minor changes updated (#1122)

Co-authored-by: Leon <>

ui-common/package.json

@@ -24,63 +24,60 @@
   },
   "peerDependencies": {
     "@craco/craco": "^6.4.3",
-    "@material-ui/core": "^4.11.3",
-    "@material-ui/icons": "^4.11.2",
+    "@material-ui/core": "^4.12.4",
+    "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
-    "@types/jest": "^26.0.22",
-    "@types/node": "^12.20.10",
-    "node-sass": "^6.0.0",
+    "@types/jest": "^26.0.24",
+    "@types/node": "^12.20.52",
+    "node-sass": "^6.0.1",
     "react": "^17.0.2",
-    "react-copy-to-clipboard": "^5.0.3",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^17.0.2",
     "recoil": "^0.5.2"
   },
   "dependencies": {
     "@craco/craco": "^6.4.3",
-    "@types/lodash": "^4.14.179",
-    "@uiw/react-textarea-code-editor": "^1.4.12",
+    "@types/lodash": "^4.14.182",
+    "@uiw/react-textarea-code-editor": "^1.6.0",
     "axios": "^0.25.0",
-    "core-js": "^3.20.2",
-    "highlight.js": "^11.3.1",
+    "core-js": "^3.22.7",
+    "highlight.js": "^11.5.1",
     "json-beautify": "^1.1.1",
     "jsonpath": "^1.1.1",
-    "marked": "^4.0.10",
-    "material-ui-popup-state": "^2.0.0",
-    "mobx": "^6.3.10",
-    "moment": "^2.29.1",
-    "node-fetch": "^3.1.1",
+    "marked": "^4.0.16",
+    "material-ui-popup-state": "^2.0.1",
+    "mobx": "^6.6.0",
+    "moment": "^2.29.3",
+    "node-fetch": "^3.2.4",
     "numeral": "^2.0.6",
     "protobuf-decoder": "^0.1.2",
     "react-graph-vis": "^1.0.7",
     "react-lowlight": "^3.0.0",
-    "react-router-dom": "^6.2.1",
+    "react-router-dom": "^6.3.0",
     "react-scrollable-feed-virtualized": "^1.4.9",
-    "react-syntax-highlighter": "^15.4.3",
-    "react-toastify": "^8.0.3",
+    "react-syntax-highlighter": "^15.5.0",
+    "react-toastify": "^8.2.0",
     "redoc": "^2.0.0-rc.59",
-    "styled-components": "^5.3.3",
-    "web-vitals": "^1.1.1",
-    "xml-formatter": "^2.6.0"
+    "styled-components": "^5.3.5",
+    "web-vitals": "^1.1.2",
+    "xml-formatter": "^2.6.1"
   },
   "devDependencies": {
-    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@rollup/plugin-node-resolve": "^13.3.0",
     "@svgr/rollup": "^6.2.1",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.5.0",
-    "@testing-library/user-event": "^7.2.1",
-    "cross-env": "^7.0.2",
-    "env-cmd": "^10.0.1",
+    "cross-env": "^7.0.3",
+    "env-cmd": "^10.1.0",
     "gh-pages": "^2.2.0",
-    "microbundle-crl": "^0.13.10",
+    "microbundle-crl": "^0.13.11",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.0.4",
-    "rollup-plugin-import-css": "^3.0.2",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-sass": "^1.2.10",
-    "rollup-plugin-scss": "^3.0.0",
+    "prettier": "^2.6.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "typescript": "^4.2.4"
+    "rollup-plugin-import-css": "^3.0.3",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-sass": "^1.2.12",
+    "rollup-plugin-scss": "^3.0.0",
+    "typescript": "^4.7.2"
   },
   "eslintConfig": {
     "extends": [

ui-common/src/components/ServiceMapModal/ServiceMapModal.module.sass

@@ -34,8 +34,6 @@
     font-weight: 600
     margin-right: 35px
 
-  & .actions
-
 .graphSection
   flex: 85%
 

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

@@ -33,6 +33,11 @@ const modalStyle = {
     padding: "1px 1px",
     paddingBottom: "15px"
 };
+
+const protocolDisplayNameMap = {
+    "GQL": "GraphQL"
+}
+
 interface LegentLabelProps {
     color: string,
     name: string
@@ -119,7 +124,11 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onClos
     const getProtocolsForFilter = useMemo(() => {
         return serviceMapApiData.edges.reduce<ProtocolType[]>((returnArr, currentValue, currentIndex, array) => {
             if (!returnArr.find(prot => prot.key === currentValue.protocol.abbr))
-                returnArr.push({ key: currentValue.protocol.abbr, value: currentValue.protocol.abbr, component: <LegentLabel color={currentValue.protocol.backgroundColor} name={currentValue.protocol.abbr} /> })
+                returnArr.push({
+                    key: currentValue.protocol.abbr, value: currentValue.protocol.abbr,
+                    component: <LegentLabel color={currentValue.protocol.backgroundColor}
+                        name={protocolDisplayNameMap[currentValue.protocol.abbr] ? protocolDisplayNameMap[currentValue.protocol.abbr] : currentValue.protocol.abbr} />
+                })
             return returnArr
         }, new Array<ProtocolType>())
     }, [serviceMapApiData])
@@ -221,12 +230,12 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onClos
                                     <div className={styles.card}>
                                         <SelectList items={getProtocolsForFilter} checkBoxWidth="5%" tableName={"PROTOCOLS"} multiSelect={true}
                                             checkedValues={checkedProtocols} setCheckedValues={onProtocolsChange} tableClassName={styles.filters}
-                                            inputSearchClass={styles.servicesFilterSearch} isFilterable={false}/>
+                                            inputSearchClass={styles.servicesFilterSearch} isFilterable={false} />
                                     </div>
                                     <div className={styles.servicesFilterWrapper + ` ${styles.card}`}>
                                         <div className={styles.servicesFilterList}>
                                             <SelectList items={getServicesForFilter} tableName={"SERVICES"} tableClassName={styles.filters} multiSelect={true}
-                                                checkBoxWidth="5%" checkedValues={checkedServices} setCheckedValues={onServiceChanges} inputSearchClass={styles.servicesFilterSearch}/>
+                                                checkBoxWidth="5%" checkedValues={checkedServices} setCheckedValues={onServiceChanges} inputSearchClass={styles.servicesFilterSearch} />
                                         </div>
                                     </div>
                                 </div>

ui/package.json

@@ -4,51 +4,48 @@
   "private": true,
   "dependencies": {
     "@craco/craco": "^6.4.3",
-    "@material-ui/core": "^4.11.3",
-    "@material-ui/icons": "^4.11.2",
+    "@material-ui/core": "^4.12.4",
+    "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
-    "@testing-library/jest-dom": "^5.11.10",
-    "@testing-library/react": "^11.2.6",
-    "@testing-library/user-event": "^12.8.3",
-    "@types/jest": "^26.0.22",
-    "@types/node": "^12.20.10",
-    "@uiw/react-textarea-code-editor": "^1.4.12",
+    "@types/jest": "^26.0.24",
+    "@types/node": "^12.20.52",
+    "@uiw/react-textarea-code-editor": "^1.6.0",
     "@up9/mizu-common": "file:up9-mizu-common-0.0.0.tgz",
     "axios": "^0.25.0",
-    "core-js": "^3.20.2",
+    "core-js": "^3.22.7",
     "craco-babel-loader": "^1.0.3",
-    "highlight.js": "^11.3.1",
+    "highlight.js": "^11.5.1",
     "json-beautify": "^1.1.1",
     "jsonpath": "^1.1.1",
-    "marked": "^4.0.10",
-    "material-ui-popup-state": "^2.0.0",
-    "mobx": "^6.3.10",
-    "moment": "^2.29.1",
-    "node-fetch": "^3.1.1",
-    "node-sass": "^6.0.0",
+    "marked": "^4.0.16",
+    "material-ui-popup-state": "^2.0.1",
+    "mobx": "^6.6.0",
+    "moment": "^2.29.3",
+    "node-fetch": "^3.2.4",
+    "node-sass": "^6.0.1",
     "numeral": "^2.0.6",
     "react": "^17.0.2",
-    "react-copy-to-clipboard": "^5.0.3",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^17.0.2",
     "react-graph-vis": "^1.0.7",
     "react-lowlight": "^3.0.0",
-    "react-router-dom": "^6.2.1",
+    "react-router-dom": "^6.3.0",
     "react-scrollable-feed-virtualized": "^1.4.9",
-    "react-syntax-highlighter": "^15.4.3",
-    "react-toastify": "^8.0.3",
+    "react-syntax-highlighter": "^15.5.0",
+    "react-toastify": "^8.2.0",
     "redoc": "^2.0.0-rc.59",
-    "styled-components": "^5.3.3",
-    "typescript": "^4.2.4",
-    "web-vitals": "^1.1.1",
-    "xml-formatter": "^2.6.0"
+    "styled-components": "^5.3.5",
+    "typescript": "^4.7.2",
+    "web-vitals": "^1.1.2",
+    "xml-formatter": "^2.6.1"
   },
   "devDependencies": {
-    "env-cmd": "^10.0.1",
+    "env-cmd": "^10.1.0",
     "npm-link-shared": "^0.5.6",
     "react-app-rewire-alias": "^1.1.7",
-    "react-dev-utils": "^12.0.0",
-    "recoil": "^0.5.2",
-    "react-error-overlay": "6.0.9"
+    "react-dev-utils": "^12.0.1",
+    "react-error-overlay": "6.0.9",
+    "recoil": "^0.5.2"
   },
   "scripts": {
     "prestart": "../devops/ui-common-pack.sh $PWD",