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,