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>
2025-08-01 00:35:31 +00:00 · 2022-03-23 22:15:04 +02:00 · 2022-03-23 22:15:04 +02:00 · 0f4710918f
commit 0f4710918f
parent 4bdda920d5
10 changed files with 135 additions and 92 deletions
--- 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>
+
  </>
 }

--- 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",
--- 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
+    height: 85%
+    overflow-y: scroll
+
+.borderLine
+  border-top: 1px solid #dee6fe
+  margin-bottom: 1%
+
--- 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>
--- 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"
-           }
-         }
-       }
-     }
+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
+      }
+    }
+  }
+}
--- 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,
--- 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)}
--- 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
+
--- 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",
--- 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>}