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',
@@ -62,7 +62,13 @@ 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])
@@ -80,7 +86,6 @@ const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService
   }, [openModal, resolvedArrayBuilder]);
 
 
-
   return (
     <Modal
       aria-labelledby="transition-modal-title"
@@ -98,13 +103,17 @@ const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService
           <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.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,14 +129,10 @@ 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}

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

@@ -1,7 +1,17 @@
+const fontFamilyVar = "Source Sans Pro, Lucida Grande, Tahoma, sans-serif"
+
 export const redocThemeOptions = {
   theme: {
     codeBlock: {
-           backgroundColor:"#11171a",
+      backgroundColor: "#14161c",
+    },
+    components: {
+      buttons: {
+        fontFamily: fontFamilyVar,
+      },
+      httpBadges: {
+        fontFamily: fontFamilyVar,
+      }
     },
     colors: {
       responses: {
@@ -21,14 +31,21 @@ export const redocThemeOptions = {
       }
     },
     rightPanel: {
-           backgroundColor:"#253237",
+      backgroundColor: "#0D0B1D",
     },
     sidebar: {
       backgroundColor: "#ffffff"
     },
     typography: {
       code: {
-             color:"#0c0b1a"
+        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>}