From 0f4710918ffaaa9230194b123bf85daac97da0db Mon Sep 17 00:00:00 2001
From: AmitUp9 <96980485+AmitUp9@users.noreply.github.com>
Date: Wed, 23 Mar 2022 22:15:04 +0200
Subject: [PATCH] TRA-4122 oas gui grooming (#915)

* oas styling
* oas button text change
* ui-common version update
* font fix
* version updating
Co-authored-by: gadotroee <55343099+gadotroee@users.noreply.github.com>
---
 ui-common/example/src/App.tsx                 |  5 +-
 ui-common/package.json                        |  2 +-
 .../components/OasModal/OasModal.module.sass  | 21 +++--
 .../src/components/OasModal/OasModal.tsx      | 93 ++++++++++---------
 .../components/OasModal/redocThemeOptions.ts  | 87 ++++++++++-------
 ui-common/src/components/UI/Select.tsx        |  2 +-
 ui-common/src/components/UI/Tabs.tsx          |  1 +
 .../components/UI/style/Select.module.sass    | 12 +++
 ui/package.json                               |  2 +-
 .../Pages/TrafficPage/TrafficPage.tsx         |  2 +-
 10 files changed, 135 insertions(+), 92 deletions(-)

diff --git a/ui-common/example/src/App.tsx b/ui-common/example/src/App.tsx
index 111318db5..1853170ed 100644
--- a/ui-common/example/src/App.tsx
+++ b/ui-common/example/src/App.tsx
@@ -1,4 +1,4 @@
-import TrafficViewer,{useWS, DEFAULT_QUERY} from '@up9/mizu-common';
+import TrafficViewer,{useWS, DEFAULT_QUERY, OasModal} from '@up9/mizu-common';
 import "@up9/mizu-common/dist/index.css"
 import {useEffect} from 'react';
 import Api, {getWebsocketUrl} from "./api";
@@ -17,8 +17,7 @@ const App = () => {
   },[])
 
   return <>
-    <TrafficViewer message={message} error={error} isWebSocketOpen={isOpen}
-                   trafficViewerApiProp={trafficViewerApi} ></TrafficViewer>
+
   </>
 }
 
diff --git a/ui-common/package.json b/ui-common/package.json
index b22675981..771c9d099 100644
--- a/ui-common/package.json
+++ b/ui-common/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@up9/mizu-common",
-  "version": "1.0.133",
+  "version": "1.0.135",
   "description": "Made with create-react-library",
   "author": "",
   "license": "MIT",
diff --git a/ui-common/src/components/OasModal/OasModal.module.sass b/ui-common/src/components/OasModal/OasModal.module.sass
index 8cef4c07d..f7f8015e4 100644
--- a/ui-common/src/components/OasModal/OasModal.module.sass
+++ b/ui-common/src/components/OasModal/OasModal.module.sass
@@ -6,23 +6,32 @@
     padding: 10px
 
 .selectHeader
+    font-family: Source Sans Pro,Lucida Grande,Tahoma,sans-serif
     display: flex
     align-items: center
+    font-weight: 900
     width: 100%
     margin-top: -1%
 
 .openApilogo
-    width: 36px
+    width: 43px
 
 .title
     color:#494677
-    font-family: Lato
-    font-size: 20px
+    font-family: Source Sans Pro,Lucida Grande,Tahoma,sans-serif
+    font-size: 28px
     font-weight: 600
 
 .selectContainer
-    margin-left: 1%
+    width: 14%
+    margin-bottom: 1%
+    margin-top: 1%
 
 .redoc
-    height: 98%
-    overflow-y: scroll
\ No newline at end of file
+    height: 85%
+    overflow-y: scroll
+
+.borderLine
+  border-top: 1px solid #dee6fe
+  margin-bottom: 1%
+
diff --git a/ui-common/src/components/OasModal/OasModal.tsx b/ui-common/src/components/OasModal/OasModal.tsx
index f2d91e1db..1f1c2804c 100644
--- a/ui-common/src/components/OasModal/OasModal.tsx
+++ b/ui-common/src/components/OasModal/OasModal.tsx
@@ -7,7 +7,7 @@ import style from './OasModal.module.sass';
 import openApiLogo from 'assets/openApiLogo.png'
 import { redocThemeOptions } from "./redocThemeOptions";
 import React from "react";
-import { Select } from "../UI/Select";
+import { UI } from "../..";
 
 const modalStyle = {
   position: 'absolute',
@@ -25,17 +25,17 @@ const modalStyle = {
 
 const ipAddressWithPortRegex = new RegExp('([0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}):([0-9]{1,5})');
 
-const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService}) => { 
+const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService }) => {
   const [oasServices, setOasServices] = useState([] as string[])
   const [selectedServiceName, setSelectedServiceName] = useState("");
   const [selectedServiceSpec, setSelectedServiceSpec] = useState(null);
   const [resolvedServices, setResolvedServices] = useState([]);
   const [unResolvedServices, setUnResolvedServices] = useState([]);
 
-  const onSelectedOASService = useCallback( async (selectedService) => {
-    if (!!selectedService){
+  const onSelectedOASService = useCallback(async (selectedService) => {
+    if (!!selectedService) {
       setSelectedServiceName(selectedService);
-      if(oasServices.length === 0){
+      if (oasServices.length === 0) {
         return
       }
       try {
@@ -46,13 +46,13 @@ const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService
         console.error(e);
       }
     }
-  },[oasServices.length])
+  }, [oasServices.length])
 
-  const resolvedArrayBuilder = useCallback(async(services) => {
+  const resolvedArrayBuilder = useCallback(async (services) => {
     const resServices = [];
     const unResServices = [];
     services.forEach(s => {
-      if(ipAddressWithPortRegex.test(s)){
+      if (ipAddressWithPortRegex.test(s)) {
         unResServices.push(s);
       }
       else {
@@ -62,10 +62,16 @@ const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService
 
     resServices.sort();
     unResServices.sort();
-    onSelectedOASService(resServices[0]);
+    if (resServices.length > 0) {
+      onSelectedOASService(resServices[0]);
+    }
+    else {
+      onSelectedOASService(unResServices[0]);
+    }
+
     setResolvedServices(resServices);
     setUnResolvedServices(unResServices);
-  },[onSelectedOASService])
+  }, [onSelectedOASService])
 
   useEffect(() => {
     (async () => {
@@ -77,8 +83,7 @@ const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService
         console.error(e);
       }
     })();
-  }, [openModal,resolvedArrayBuilder]);
-
+  }, [openModal, resolvedArrayBuilder]);
 
 
   return (
@@ -90,48 +95,48 @@ const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService
       closeAfterTransition
       BackdropComponent={Backdrop}
       BackdropProps={{
-          timeout: 500,
+        timeout: 500,
       }}
     >
       <Fade in={openModal}>
         <Box sx={modalStyle}>
           <div className={style.boxContainer}>
             <div className={style.selectHeader}>
-              <div><img src={openApiLogo} alt="openApi" className={style.openApilogo}/></div>
-                <div className={style.title}>OpenAPI selected service: </div>
-                <div className={style.selectContainer} >
-                  <FormControl>
-                    <Select
-                      labelId="service-select-label"
-                      id="service-select"
-                      placeholder="Show OAS"
-                      value={selectedServiceName}
-                      onChangeCb={onSelectedOASService}
-                    >
-                      <ListSubheader disableSticky={true}>Resolved</ListSubheader>
-                      {resolvedServices.map((service) => (
-                        <MenuItem key={service} value={service}>
-                          {service}
-                        </MenuItem>
-                      ))}
-                      <ListSubheader disableSticky={true}>UnResolved</ListSubheader>
-                      {unResolvedServices.map((service) => (
-                        <MenuItem key={service} value={service}>
-                          {service}
-                        </MenuItem>
-                      ))} 
-                    </Select>
-                  </FormControl>
-                </div>
+              <div><img src={openApiLogo} alt="openApi" className={style.openApilogo} /></div>
+              <div className={style.title}>OpenApi </div>
             </div>
             <div style={{ cursor: "pointer" }}>
-              <img src={closeIcon} alt="close" onClick={handleCloseModal} />
-            </div>
+                <img src={closeIcon} alt="close" onClick={handleCloseModal} />
+              </div>
           </div>
+          <div className={style.selectContainer} >
+              <FormControl>
+                <UI.Select
+                  labelId="service-select-label"
+                  id="service-select"
+                  value={selectedServiceName}
+                  onChangeCb={onSelectedOASService}
+                >
+                  <ListSubheader disableSticky={true}>Resolved</ListSubheader>
+                  {resolvedServices.map((service) => (
+                    <MenuItem key={service} value={service}>
+                      {service}
+                    </MenuItem>
+                  ))}
+                  <ListSubheader disableSticky={true}>UnResolved</ListSubheader>
+                  {unResolvedServices.map((service) => (
+                    <MenuItem key={service} value={service}>
+                      {service}
+                    </MenuItem>
+                  ))}
+                </UI.Select>
+              </FormControl>
+            </div>
+          <div className={style.borderLine}></div>
           <div className={style.redoc}>
-          {selectedServiceSpec && <RedocStandalone 
-                                    spec={selectedServiceSpec}   
-                                    options={redocThemeOptions}/>}
+            {selectedServiceSpec && <RedocStandalone
+              spec={selectedServiceSpec}
+              options={redocThemeOptions} />}
           </div>
         </Box>
       </Fade>
diff --git a/ui-common/src/components/OasModal/redocThemeOptions.ts b/ui-common/src/components/OasModal/redocThemeOptions.ts
index 722794323..ba72d9453 100644
--- a/ui-common/src/components/OasModal/redocThemeOptions.ts
+++ b/ui-common/src/components/OasModal/redocThemeOptions.ts
@@ -1,35 +1,52 @@
-export const redocThemeOptions = {    
-       theme:{
-         codeBlock:{
-           backgroundColor:"#11171a",
-         },
-         colors:{
-           responses:{
-             error:{
-               tabTextColor:"#1b1b29"
-             },
-             info:{
-               tabTextColor:"#1b1b29",
-             },
-             success:{
-               tabTextColor:"#0c0b1a"
-             },
-           },
-           text:{
-             primary:"#1b1b29",
-             secondary:"#4d4d4d"
-           }
-         },
-         rightPanel:{
-           backgroundColor:"#253237",
-         },
-         sidebar:{
-           backgroundColor:"#ffffff"
-         },
-         typography:{
-           code:{
-             color:"#0c0b1a"
-           }
-         }
-       }
-     }
\ No newline at end of file
+const fontFamilyVar = "Source Sans Pro, Lucida Grande, Tahoma, sans-serif"
+
+export const redocThemeOptions = {
+  theme: {
+    codeBlock: {
+      backgroundColor: "#14161c",
+    },
+    components: {
+      buttons: {
+        fontFamily: fontFamilyVar,
+      },
+      httpBadges: {
+        fontFamily: fontFamilyVar,
+      }
+    },
+    colors: {
+      responses: {
+        error: {
+          tabTextColor: "#1b1b29"
+        },
+        info: {
+          tabTextColor: "#1b1b29",
+        },
+        success: {
+          tabTextColor: "#0c0b1a"
+        },
+      },
+      text: {
+        primary: "#1b1b29",
+        secondary: "#4d4d4d"
+      }
+    },
+    rightPanel: {
+      backgroundColor: "#0D0B1D",
+    },
+    sidebar: {
+      backgroundColor: "#ffffff"
+    },
+    typography: {
+      code: {
+        color: "#0c0b1a",
+        fontFamily: fontFamilyVar
+      },
+      fontFamily: fontFamilyVar,
+      fontSize: "90%",
+      fontWieght: "normal",
+      headings: {
+        fontFamily: fontFamilyVar
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/ui-common/src/components/UI/Select.tsx b/ui-common/src/components/UI/Select.tsx
index de1a8eebe..152865dd7 100644
--- a/ui-common/src/components/UI/Select.tsx
+++ b/ui-common/src/components/UI/Select.tsx
@@ -19,7 +19,7 @@ const menuProps: any = {
 };
 
 // icons styles are not overwritten from the Props, only as a separate object
-const classes = {icon: styles.icon, selectMenu: styles.list};
+const classes = {icon: styles.icon, selectMenu: styles.list, select: styles.oasSelect, root:styles.root};
 
 const defaultProps = {
     MenuProps: menuProps,
diff --git a/ui-common/src/components/UI/Tabs.tsx b/ui-common/src/components/UI/Tabs.tsx
index af4a8ec2c..39ec2e55c 100644
--- a/ui-common/src/components/UI/Tabs.tsx
+++ b/ui-common/src/components/UI/Tabs.tsx
@@ -76,6 +76,7 @@ const Tabs: React.FC<Props> = ({classes={}, tabs, currentTab, color, onChange, l
         {tabs.map(({tab, disabled, disabledMessage, highlight, badge}, index) => {
             const active = currentTab === tab;
             const tabLink = <span
+                data-cy={"tab-" + tab}
                 key={tab}
                 className={`${_classes.tab} ${active ? _classes.active : ''} ${disabled ? _classes.disabled : ''} ${highlight ? _classes.highlight : ''} ${dark ? 'dark' : ''}`}
                 onClick={() => !disabled && onChange(tab)}
diff --git a/ui-common/src/components/UI/style/Select.module.sass b/ui-common/src/components/UI/style/Select.module.sass
index 7195c0a16..5e6f7507e 100644
--- a/ui-common/src/components/UI/style/Select.module.sass
+++ b/ui-common/src/components/UI/style/Select.module.sass
@@ -3,3 +3,15 @@
 
 .list
     margin-top: 8px
+
+.oasSelect
+    font-weight: normal 
+    padding: 8px 4px 8px 12px !important
+    border: 1px solid #9d9d9d !important
+    border-radius: 9px !important
+    font-family: Source Sans Pro, Lucida Grande, Tahoma, sans-serif !important
+    width: 216px !important
+
+.root
+    font-family: Source Sans Pro, Lucida Grande, Tahoma, sans-serif !important
+
diff --git a/ui/package.json b/ui/package.json
index 63ebaa79e..cf962f038 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -13,7 +13,7 @@
     "@types/jest": "^26.0.22",
     "@types/node": "^12.20.10",
     "@uiw/react-textarea-code-editor": "^1.4.12",
-    "@up9/mizu-common": "1.0.133",
+    "@up9/mizu-common": "1.0.135",
     "axios": "^0.25.0",
     "core-js": "^3.20.2",
     "craco-babel-loader": "^1.0.3",
diff --git a/ui/src/components/Pages/TrafficPage/TrafficPage.tsx b/ui/src/components/Pages/TrafficPage/TrafficPage.tsx
index 08cf05a0c..7f51dd62b 100644
--- a/ui/src/components/Pages/TrafficPage/TrafficPage.tsx
+++ b/ui/src/components/Pages/TrafficPage/TrafficPage.tsx
@@ -45,7 +45,7 @@ const trafficViewerApi = {...api}
                                 className={commonClasses.outlinedButton + " " + commonClasses.imagedButton}
                                 style={{ marginRight: 25 }}
                                 onClick={handleOpenOasModal}>
-                                Show OAS
+                                OpenApi Specs
                               </Button>}
                               {window["isServiceMapEnabled"] && <Button
                                 startIcon={<img src={serviceMap} className="custom" alt="service-map" style={{marginRight:"8%"}}></img>}