TRA-4419 remove headers from OAS select (#936)

ui-common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@up9/mizu-common",
-  "version": "1.0.141",
+  "version": "1.0.142",
   "description": "Made with create-react-library",
   "author": "",
   "license": "MIT",

ui-common/src/components/OasModal/OasModal.tsx

@@ -1,4 +1,4 @@
-import { Box, Fade, FormControl, MenuItem, Modal, Backdrop, ListSubheader } from "@material-ui/core";
+import { Box, Fade, FormControl, MenuItem, Modal, Backdrop } from "@material-ui/core";
 import { useCallback, useEffect, useState } from "react";
 import { RedocStandalone } from "redoc";
 import closeIcon from "assets/closeIcon.svg";
@@ -7,7 +7,6 @@ import style from './OasModal.module.sass';
 import openApiLogo from 'assets/openApiLogo.png'
 import { redocThemeOptions } from "./redocThemeOptions";
 import React from "react";
-import { TOAST_CONTAINER_ID } from "../../configs/Consts";
 import { Select } from "../UI/Select";
 
 
@@ -25,68 +24,44 @@ const modalStyle = {
   color: '#000',
 };
 
-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 [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) {
-      setSelectedServiceName(selectedService);
-      if (oasServices.length === 0) {
-        return
-      }
-      try {
-        const data = await getOasByService(selectedService);
-        setSelectedServiceSpec(data);
-      } catch (e) {
-        toast.error("Error occurred while fetching service OAS spec", { containerId: TOAST_CONTAINER_ID });
-        console.error(e);
-      }
-    }
-  }, [oasServices.length])
-
-  const resolvedArrayBuilder = useCallback(async (services) => {
-    const resServices = [];
-    const unResServices = [];
-    services.forEach(s => {
-      if (ipAddressWithPortRegex.test(s)) {
-        unResServices.push(s);
-      }
-      else {
-        resServices.push(s);
-      }
-    });
-
-    resServices.sort();
-    unResServices.sort();
-    if (resServices.length > 0) {
-      onSelectedOASService(resServices[0]);
+  const onSelectedOASService = async (selectedService) => {
+    if (oasServices.length === 0) {
+      setSelectedServiceSpec(null);
+      setSelectedServiceName("");
+      return
     }
     else {
-      onSelectedOASService(unResServices[0]);
+      setSelectedServiceName(selectedService ? selectedService : oasServices[0]);
     }
-
-    setResolvedServices(resServices);
-    setUnResolvedServices(unResServices);
-  }, [onSelectedOASService])
+    try {
+      const data = await getOasByService(selectedService ? selectedService : oasServices[0]);
+      setSelectedServiceSpec(data);
+      } catch (e) {
+        toast.error("Error occurred while fetching service OAS spec");
+        console.error(e);
+      }  
+  };
 
   useEffect(() => {
     (async () => {
       try {
         const services = await getOasServices();
-        resolvedArrayBuilder(services);
         setOasServices(services);
       } catch (e) {
         console.error(e);
       }
     })();
-  }, [openModal, resolvedArrayBuilder]);
+  }, [openModal]);
 
+  useEffect(() => {
+    onSelectedOASService(null);
+  },[oasServices])
 
   return (
     <Modal
@@ -104,36 +79,29 @@ 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 className={style.title}>OpenApi </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>
           </div>
           <div className={style.selectContainer} >
-            <FormControl>
-              <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>
-                ))}
-              </Select>
-            </FormControl>
-          </div>
+              <FormControl>
+                <Select
+                  labelId="service-select-label"
+                  id="service-select"
+                  value={selectedServiceName}
+                  onChangeCb={onSelectedOASService}
+                >
+                  {oasServices.map((service) => (
+                    <MenuItem key={service} value={service}>
+                      {service}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
+            </div>
           <div className={style.borderLine}></div>
           <div className={style.redoc}>
             {selectedServiceSpec && <RedocStandalone

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.141",
+    "@up9/mizu-common": "1.0.142",
     "axios": "^0.25.0",
     "core-js": "^3.20.2",
     "craco-babel-loader": "^1.0.3",

ui/src/components/Pages/TrafficPage/TrafficPage.tsx

@@ -44,7 +44,7 @@ const trafficViewerApi = {...api}
                                 className={commonClasses.outlinedButton + " " + commonClasses.imagedButton}
                                 style={{ marginRight: 25, textTransform: 'unset' }}
                                 onClick={handleOpenOasModal}>
-                                OpenApi Specs
+                                OpenAPI Specs
                               </Button>}
                               {window["isServiceMapEnabled"] && <Button
                                 startIcon={<img src={serviceMap} className="custom" alt="service-map" style={{marginRight:"8%"}}></img>}