Merge branch 'main' of github.com:solo-io/dev-portal-starter

solo-io · Jul 10, 2024 · d417d77 · d417d77
2 parents 0187f2f + 5e39106
commit d417d77
Show file tree

Hide file tree

Showing 7 changed files with 110 additions and 61 deletions.
diff --git a/...cts/ui/src/Components/ApiDetails/gloo-gateway-components/ApiProductDetailsPageHeading.tsx b/...cts/ui/src/Components/ApiDetails/gloo-gateway-components/ApiProductDetailsPageHeading.tsx
@@ -1,4 +1,4 @@
-import { Flex, Select } from "@mantine/core";
+import { Box, Flex, Select } from "@mantine/core";
 import toast from "react-hot-toast";
 import {
   ApiProductSummary,
@@ -12,6 +12,7 @@ import { downloadFile } from "../../../Utility/utility";
 import { BannerHeading } from "../../Common/Banner/BannerHeading";
 import { BannerHeadingTitle } from "../../Common/Banner/BannerHeadingTitle";
 import { Button } from "../../Common/Button";
+import { DataPairPill, DataPairPillList } from "../../Common/DataPairPill";
 import { ApiProductDetailsPageStyles as Styles } from "./ApiProductDetailsPage.style";
 
 const ApiProductDetailsPageHeading = ({
@@ -113,6 +114,21 @@ const ApiProductDetailsPageHeading = ({
                 DOWNLOAD SPEC
               </Button>
             </Flex>
+            {selectedApiVersion.productVersionMetadata && (
+              <Box mt={"5px"} sx={{ flexBasis: "100%" }}>
+                <DataPairPillList className="metadataList">
+                  {Object.entries(
+                    selectedApiVersion.productVersionMetadata
+                  ).map(([pairKey, pairValue], idx) => (
+                    <DataPairPill
+                      key={idx}
+                      pairKey={pairKey}
+                      value={pairValue}
+                    />
+                  ))}
+                </DataPairPillList>
+              </Box>
+            )}
             {/*
             // Note: Removing sections for GGv2 demo.
             <NewSubscriptionModal

diff --git a/...rc/Components/Apis/gloo-gateway-components/ApisTab/ApiSummaryCards/ApiSummaryGridCard.tsx b/...rc/Components/Apis/gloo-gateway-components/ApisTab/ApiSummaryCards/ApiSummaryGridCard.tsx
@@ -5,6 +5,10 @@ import { CardStyles } from "../../../../../Styles/shared/Card.style";
 import { GridCardStyles } from "../../../../../Styles/shared/GridCard.style";
 import { useGetImageURL } from "../../../../../Utility/custom-image-utility";
 import { getApiProductDetailsSpecTabLink } from "../../../../../Utility/link-builders";
+import {
+  DataPairPill,
+  DataPairPillList,
+} from "../../../../Common/DataPairPill";
 
 /**
  * MAIN COMPONENT
@@ -25,13 +29,24 @@ export function ApiSummaryGridCard({
       <Box pb={"25px"}>
         <GridCardStyles.Title>{apiProduct.name}</GridCardStyles.Title>
         API Versions: {apiProduct.versionsCount}
-        {apiProduct.description && (
+        {!!apiProduct.description && (
           <Box pt={"15px"}>
             <GridCardStyles.Description>
               {apiProduct.description}
             </GridCardStyles.Description>
           </Box>
         )}
+        {!!apiProduct.apiProductMetadata && (
+          <Box pt={"15px"}>
+            <DataPairPillList className="metadataList">
+              {Object.entries(apiProduct.apiProductMetadata).map(
+                ([pairKey, pairValue], idx) => (
+                  <DataPairPill key={idx} pairKey={pairKey} value={pairValue} />
+                )
+              )}
+            </DataPairPillList>
+          </Box>
+        )}
       </Box>
       <GridCardStyles.Footer>
         <CardStyles.MetaInfo>

diff --git a/...rc/Components/Apis/gloo-gateway-components/ApisTab/ApiSummaryCards/ApiSummaryListCard.tsx b/...rc/Components/Apis/gloo-gateway-components/ApisTab/ApiSummaryCards/ApiSummaryListCard.tsx
@@ -6,6 +6,10 @@ import { CardStyles } from "../../../../../Styles/shared/Card.style";
 import { ListCardStyles } from "../../../../../Styles/shared/ListCard.style";
 import { useGetImageURL } from "../../../../../Utility/custom-image-utility";
 import { getApiProductDetailsSpecTabLink } from "../../../../../Utility/link-builders";
+import {
+  DataPairPill,
+  DataPairPillList,
+} from "../../../../Common/DataPairPill";
 
 /**
  * MAIN COMPONENT
@@ -30,6 +34,21 @@ export function ApiSummaryListCard({
             {apiProduct.description && (
               <Text color="gray.6">{apiProduct.description}</Text>
             )}
+            {!!apiProduct.apiProductMetadata && (
+              <Box pt={"5px"}>
+                <DataPairPillList className="metadataList">
+                  {Object.entries(apiProduct.apiProductMetadata).map(
+                    ([pairKey, pairValue], idx) => (
+                      <DataPairPill
+                        key={idx}
+                        pairKey={pairKey}
+                        value={pairValue}
+                      />
+                    )
+                  )}
+                </DataPairPillList>
+              </Box>
+            )}
           </Box>
         </Flex>
         <ListCardStyles.Footer>

diff --git a/projects/ui/src/Components/Apis/gloo-gateway-components/ApisTab/ApisFilter.tsx b/projects/ui/src/Components/Apis/gloo-gateway-components/ApisTab/ApisFilter.tsx
@@ -1,9 +1,10 @@
 import { Select, TextInput } from "@mantine/core";
-import { useContext } from "react";
+import { useContext, useState } from "react";
 import { Icon } from "../../../../Assets/Icons";
 import { AppContext } from "../../../../Context/AppContext";
 import { FilterStyles as Styles } from "../../../../Styles/shared/Filters.style";
-import { FilterType } from "../../../../Utility/filter-utility";
+import { FilterType, getPairString } from "../../../../Utility/filter-utility";
+import { KeyValuePair } from "../../../Common/DataPairPill";
 import {
   AppliedFiltersSection,
   FiltrationProp,
@@ -13,10 +14,10 @@ import GridListToggle from "../../../Common/GridListToggle";
 export function ApisFilter({ filters }: { filters: FiltrationProp }) {
   const { preferGridView, setPreferGridView } = useContext(AppContext);
 
-  // const [pairFilter, setPairFilter] = useState<KeyValuePair>({
-  //   pairKey: "",
-  //   value: "",
-  // });
+  const [pairFilter, setPairFilter] = useState<KeyValuePair>({
+    pairKey: "",
+    value: "",
+  });
 
   const addNameFilter = (evt: { target: { value: string } }) => {
     const displayName = evt.target.value;
@@ -36,38 +37,38 @@ export function ApisFilter({ filters }: { filters: FiltrationProp }) {
     filters.setNameFilter("");
   };
 
-  // const alterPairKey = (evt: React.ChangeEvent<HTMLInputElement>) => {
-  //   const newKey = evt.target.value;
-  //   setPairFilter({
-  //     pairKey: newKey,
-  //     value: pairFilter.value,
-  //   });
-  // };
-  // const alterKeyValuePair = (evt: React.ChangeEvent<HTMLInputElement>) => {
-  //   const newValue = evt.target.value;
-  //   setPairFilter({
-  //     pairKey: pairFilter.pairKey,
-  //     value: newValue,
-  //   });
-  // };
+  const alterPairKey = (evt: React.ChangeEvent<HTMLInputElement>) => {
+    const newKey = evt.target.value;
+    setPairFilter({
+      pairKey: newKey,
+      value: pairFilter.value,
+    });
+  };
+  const alterKeyValuePair = (evt: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = evt.target.value;
+    setPairFilter({
+      pairKey: pairFilter.pairKey,
+      value: newValue,
+    });
+  };
 
-  // const addKeyValuePairFilter = () => {
-  //   const displayName = getPairString(pairFilter);
-  //   if (displayName.trim() === ":") return;
-  //   // Check for duplicate filters.
-  //   const isDuplicateFilter = filters.allFilters.some(
-  //     (f) => f.type === FilterType.keyValuePair && f.displayName === displayName
-  //   );
-  //   if (isDuplicateFilter) {
-  //     return;
-  //   }
-  //   filters.setAllFilters([
-  //     ...filters.allFilters,
-  //     { displayName, type: FilterType.keyValuePair },
-  //   ]);
+  const addKeyValuePairFilter = () => {
+    const displayName = getPairString(pairFilter);
+    if (displayName.trim() === ":") return;
+    // Check for duplicate filters.
+    const isDuplicateFilter = filters.allFilters.some(
+      (f) => f.type === FilterType.keyValuePair && f.displayName === displayName
+    );
+    if (isDuplicateFilter) {
+      return;
+    }
+    filters.setAllFilters([
+      ...filters.allFilters,
+      { displayName, type: FilterType.keyValuePair },
+    ]);
 
-  //   setPairFilter({ pairKey: "", value: "" });
-  // };
+    setPairFilter({ pairKey: "", value: "" });
+  };
 
   const addTypeFilter = (addedType: string) => {
     filters.setAllFilters([
@@ -109,7 +110,7 @@ export function ApisFilter({ filters }: { filters: FiltrationProp }) {
           />
           <Icon.MagnifyingGlass style={{ pointerEvents: "none" }} />
         </form>
-        {/* <form
+        <form
           onSubmit={(e) => {
             e.preventDefault();
             addKeyValuePairFilter();
@@ -139,7 +140,7 @@ export function ApisFilter({ filters }: { filters: FiltrationProp }) {
               <Icon.Add />
             </button>
           </div>
-        </form> */}
+        </form>
         <div className="dropdownFilter">
           <div className="gearHolder">
             <Icon.CodeGear />

diff --git a/projects/ui/src/Components/Apis/gloo-gateway-components/ApisTab/ApisList.tsx b/projects/ui/src/Components/Apis/gloo-gateway-components/ApisTab/ApisList.tsx
@@ -1,7 +1,11 @@
 import { useContext, useMemo } from "react";
 import { useListApiProducts } from "../../../../Apis/gg_hooks";
 import { AppContext } from "../../../../Context/AppContext";
-import { FilterPair, FilterType } from "../../../../Utility/filter-utility";
+import {
+  FilterPair,
+  FilterType,
+  parsePairString,
+} from "../../../../Utility/filter-utility";
 import { EmptyData } from "../../../Common/EmptyData";
 import { Loading } from "../../../Common/Loading";
 import { ApisPageStyles } from "../../ApisPage.style";
@@ -38,24 +42,13 @@ export function ApisList({
                 api.name
                   .toLocaleLowerCase()
                   .includes(filter.displayName.toLocaleLowerCase())) ||
-              filter.type !== FilterType.name
+              (filter.type === FilterType.keyValuePair &&
+                !!api.apiProductMetadata &&
+                api.apiProductMetadata[
+                  parsePairString(filter.displayName).pairKey
+                ] === parsePairString(filter.displayName).value) ||
+              filter.type === FilterType.apiType
           );
-        // api.apiVersions.some((apiVersion) => {
-        //   return allFilters.every((filter) => {
-        //     return (
-        //       (filter.type === FilterType.name &&
-        //         api.apiProductDisplayName
-        //           .toLocaleLowerCase()
-        //           .includes(filter.displayName.toLocaleLowerCase())) ||
-        //       (filter.type === FilterType.keyValuePair &&
-        //         apiVersion.customMetadata &&
-        //         apiVersion.customMetadata[
-        //           parsePairString(filter.displayName).pairKey
-        //         ] === parsePairString(filter.displayName).value) ||
-        //       (filter.type === FilterType.apiType && true) // This is the only type available for now
-        //     );
-        //   });
-        // });
         return passesNameFilter && passesFilterList;
       })
       .sort((a, b) => a.name.localeCompare(b.name));

diff --git a/projects/ui/src/Styles/shared/ListCard.style.tsx b/projects/ui/src/Styles/shared/ListCard.style.tsx
@@ -5,12 +5,17 @@ import { borderRadiusConstants } from "../constants";
 export namespace ListCardStyles {
   export const ApiImageHolder = styled.div(
     ({ theme }) => css`
-      height: 140px;
+      display: flex;
+      padding: 2px;
+      align-items: center;
       border-right: 1px solid ${theme.splashBlue};
 
       img {
+        display: inline-block;
         width: auto;
-        height: 100%;
+        height: 200px;
+        border-radius: ${borderRadiusConstants.xs};
+        box-shadow: 0 0 2px ${theme.augustGrey};
       }
     `
   );

diff --git a/projects/ui/src/Utility/filter-utility.ts b/projects/ui/src/Utility/filter-utility.ts
@@ -23,7 +23,7 @@ export function getPairString(pair: KeyValuePair) {
   return `${pair.pairKey} : ${pair.value}`;
 }
 export function parsePairString(pairString: string): KeyValuePair {
-  const [pairKey, value] = pairString.split(":").map((s) => s.trim());
+  const [pairKey, value] = pairString.split(" : ").map((s) => s.trim());
   return {
     pairKey,
     value,