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

@@ -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>
   </>
 }
 

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",

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-family: Source Sans Pro,Lucida Grande,Tahoma,sans-serif
-    font-size: 20px
+    font-size: 28px
     font-weight: 600
 
 .selectContainer
-    margin-left: 1%
+    width: 14%
+    margin-bottom: 1%
+    margin-top: 1%
 
 .redoc
-    height: 98%
+    height: 85%
     overflow-y: scroll
+
+.borderLine
+  border-top: 1px solid #dee6fe
+  margin-bottom: 1%
+

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) => {
+  const onSelectedOASService = useCallback(async (selectedService) => {
-    if (!!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();
+    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 (
@@ -97,14 +102,18 @@ const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService
         <Box sx={modalStyle}>
           <div className={style.boxContainer}>
             <div className={style.selectHeader}>
-              <div><img src={openApiLogo} alt="openApi" className={style.openApilogo}/></div>
+              <div><img src={openApiLogo} alt="openApi" className={style.openApilogo} /></div>
-                <div className={style.title}>OpenAPI selected service: </div>
+              <div className={style.title}>OpenApi </div>
+            </div>
+            <div style={{ cursor: "pointer" }}>
+                <img src={closeIcon} alt="close" onClick={handleCloseModal} />
+              </div>
+          </div>
           <div className={style.selectContainer} >
               <FormControl>
-                    <Select
+                <UI.Select
                   labelId="service-select-label"
                   id="service-select"
-                      placeholder="Show OAS"
                   value={selectedServiceName}
                   onChangeCb={onSelectedOASService}
                 >
@@ -120,18 +129,14 @@ const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService
                       {service}
                     </MenuItem>
                   ))}
-                    </Select>
+                </UI.Select>
               </FormControl>
             </div>
-            </div>
+          <div className={style.borderLine}></div>
-            <div style={{ cursor: "pointer" }}>
-              <img src={closeIcon} alt="close" onClick={handleCloseModal} />
-            </div>
-          </div>
           <div className={style.redoc}>
             {selectedServiceSpec && <RedocStandalone
               spec={selectedServiceSpec}
-                                    options={redocThemeOptions}/>}
+              options={redocThemeOptions} />}
           </div>
         </Box>
       </Fade>

ui-common/src/components/OasModal/redocThemeOptions.ts

@@ -1,35 +1,52 @@
+const fontFamilyVar = "Source Sans Pro, Lucida Grande, Tahoma, sans-serif"
+
 export const redocThemeOptions = {
-       theme:{
+  theme: {
-         codeBlock:{
+    codeBlock: {
-           backgroundColor:"#11171a",
+      backgroundColor: "#14161c",
     },
-         colors:{
+    components: {
-           responses:{
+      buttons: {
-             error:{
+        fontFamily: fontFamilyVar,
-               tabTextColor:"#1b1b29"
       },
-             info:{
+      httpBadges: {
-               tabTextColor:"#1b1b29",
+        fontFamily: fontFamilyVar,
-             },
-             success:{
-               tabTextColor:"#0c0b1a"
-             },
-           },
-           text:{
-             primary:"#1b1b29",
-             secondary:"#4d4d4d"
       }
     },
-         rightPanel:{
+    colors: {
-           backgroundColor:"#253237",
+      responses: {
+        error: {
+          tabTextColor: "#1b1b29"
         },
-         sidebar:{
+        info: {
-           backgroundColor:"#ffffff"
+          tabTextColor: "#1b1b29",
         },
-         typography:{
+        success: {
-           code:{
+          tabTextColor: "#0c0b1a"
-             color:"#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
       }
     }
   }
+}

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,

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)}

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
+

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",

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>}