diff --git a/projects/ui/src/Components/ApiDetails/gloo-gateway-components/ApiProductDetailsPageHeading.tsx b/projects/ui/src/Components/ApiDetails/gloo-gateway-components/ApiProductDetailsPageHeading.tsx index 23879996..42562ff8 100644 --- a/projects/ui/src/Components/ApiDetails/gloo-gateway-components/ApiProductDetailsPageHeading.tsx +++ b/projects/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 + {selectedApiVersion.productVersionMetadata && ( + + + {Object.entries( + selectedApiVersion.productVersionMetadata + ).map(([pairKey, pairValue], idx) => ( + + ))} + + + )} {/* // Note: Removing sections for GGv2 demo. {apiProduct.name} API Versions: {apiProduct.versionsCount} - {apiProduct.description && ( + {!!apiProduct.description && ( {apiProduct.description} )} + {!!apiProduct.apiProductMetadata && ( + + + {Object.entries(apiProduct.apiProductMetadata).map( + ([pairKey, pairValue], idx) => ( + + ) + )} + + + )} diff --git a/projects/ui/src/Components/Apis/gloo-gateway-components/ApisTab/ApiSummaryCards/ApiSummaryListCard.tsx b/projects/ui/src/Components/Apis/gloo-gateway-components/ApisTab/ApiSummaryCards/ApiSummaryListCard.tsx index 16308ea2..284f66d1 100644 --- a/projects/ui/src/Components/Apis/gloo-gateway-components/ApisTab/ApiSummaryCards/ApiSummaryListCard.tsx +++ b/projects/ui/src/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 && ( {apiProduct.description} )} + {!!apiProduct.apiProductMetadata && ( + + + {Object.entries(apiProduct.apiProductMetadata).map( + ([pairKey, pairValue], idx) => ( + + ) + )} + + + )} 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 index c5f3f841..e8755688 100644 --- 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({ - // pairKey: "", - // value: "", - // }); + const [pairFilter, setPairFilter] = useState({ + 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) => { - // const newKey = evt.target.value; - // setPairFilter({ - // pairKey: newKey, - // value: pairFilter.value, - // }); - // }; - // const alterKeyValuePair = (evt: React.ChangeEvent) => { - // const newValue = evt.target.value; - // setPairFilter({ - // pairKey: pairFilter.pairKey, - // value: newValue, - // }); - // }; + const alterPairKey = (evt: React.ChangeEvent) => { + const newKey = evt.target.value; + setPairFilter({ + pairKey: newKey, + value: pairFilter.value, + }); + }; + const alterKeyValuePair = (evt: React.ChangeEvent) => { + 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 }) { /> - {/*
{ e.preventDefault(); addKeyValuePairFilter(); @@ -139,7 +140,7 @@ export function ApisFilter({ filters }: { filters: FiltrationProp }) { - */} +
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 index 9fc7a5da..8833bdd6 100644 --- 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 index c035fcba..82c40e5f 100644 --- 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 index 32469627..bd546dc6 100644 --- 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,