Skip to content

Commit d417d77

Browse files
CharlesthebirdCharlesthebird
committed
Merge branch 'main' of github.com:solo-io/dev-portal-starter
2 parents 0187f2f + 5e39106 commit d417d77

File tree

7 files changed

+110
-61
lines changed

7 files changed

+110
-61
lines changed

‎projects/ui/src/Components/ApiDetails/gloo-gateway-components/ApiProductDetailsPageHeading.tsx

+17-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Flex, Select } from "@mantine/core";
1+
import { Box, Flex, Select } from "@mantine/core";
22
import toast from "react-hot-toast";
33
import {
44
ApiProductSummary,
@@ -12,6 +12,7 @@ import { downloadFile } from "../../../Utility/utility";
1212
import { BannerHeading } from "../../Common/Banner/BannerHeading";
1313
import { BannerHeadingTitle } from "../../Common/Banner/BannerHeadingTitle";
1414
import { Button } from "../../Common/Button";
15+
import { DataPairPill, DataPairPillList } from "../../Common/DataPairPill";
1516
import { ApiProductDetailsPageStyles as Styles } from "./ApiProductDetailsPage.style";
1617

1718
const ApiProductDetailsPageHeading = ({
@@ -113,6 +114,21 @@ const ApiProductDetailsPageHeading = ({
113114
DOWNLOAD SPEC
114115
</Button>
115116
</Flex>
117+
{selectedApiVersion.productVersionMetadata && (
118+
<Box mt={"5px"} sx={{ flexBasis: "100%" }}>
119+
<DataPairPillList className="metadataList">
120+
{Object.entries(
121+
selectedApiVersion.productVersionMetadata
122+
).map(([pairKey, pairValue], idx) => (
123+
<DataPairPill
124+
key={idx}
125+
pairKey={pairKey}
126+
value={pairValue}
127+
/>
128+
))}
129+
</DataPairPillList>
130+
</Box>
131+
)}
116132
{/*
117133
// Note: Removing sections for GGv2 demo.
118134
<NewSubscriptionModal

‎projects/ui/src/Components/Apis/gloo-gateway-components/ApisTab/ApiSummaryCards/ApiSummaryGridCard.tsx

+16-1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@ import { CardStyles } from "../../../../../Styles/shared/Card.style";
55
import { GridCardStyles } from "../../../../../Styles/shared/GridCard.style";
66
import { useGetImageURL } from "../../../../../Utility/custom-image-utility";
77
import { getApiProductDetailsSpecTabLink } from "../../../../../Utility/link-builders";
8+
import {
9+
DataPairPill,
10+
DataPairPillList,
11+
} from "../../../../Common/DataPairPill";
812

913
/**
1014
* MAIN COMPONENT
@@ -25,13 +29,24 @@ export function ApiSummaryGridCard({
2529
<Box pb={"25px"}>
2630
<GridCardStyles.Title>{apiProduct.name}</GridCardStyles.Title>
2731
API Versions: {apiProduct.versionsCount}
28-
{apiProduct.description && (
32+
{!!apiProduct.description && (
2933
<Box pt={"15px"}>
3034
<GridCardStyles.Description>
3135
{apiProduct.description}
3236
</GridCardStyles.Description>
3337
</Box>
3438
)}
39+
{!!apiProduct.apiProductMetadata && (
40+
<Box pt={"15px"}>
41+
<DataPairPillList className="metadataList">
42+
{Object.entries(apiProduct.apiProductMetadata).map(
43+
([pairKey, pairValue], idx) => (
44+
<DataPairPill key={idx} pairKey={pairKey} value={pairValue} />
45+
)
46+
)}
47+
</DataPairPillList>
48+
</Box>
49+
)}
3550
</Box>
3651
<GridCardStyles.Footer>
3752
<CardStyles.MetaInfo>

‎projects/ui/src/Components/Apis/gloo-gateway-components/ApisTab/ApiSummaryCards/ApiSummaryListCard.tsx

+19
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ import { CardStyles } from "../../../../../Styles/shared/Card.style";
66
import { ListCardStyles } from "../../../../../Styles/shared/ListCard.style";
77
import { useGetImageURL } from "../../../../../Utility/custom-image-utility";
88
import { getApiProductDetailsSpecTabLink } from "../../../../../Utility/link-builders";
9+
import {
10+
DataPairPill,
11+
DataPairPillList,
12+
} from "../../../../Common/DataPairPill";
913

1014
/**
1115
* MAIN COMPONENT
@@ -30,6 +34,21 @@ export function ApiSummaryListCard({
3034
{apiProduct.description && (
3135
<Text color="gray.6">{apiProduct.description}</Text>
3236
)}
37+
{!!apiProduct.apiProductMetadata && (
38+
<Box pt={"5px"}>
39+
<DataPairPillList className="metadataList">
40+
{Object.entries(apiProduct.apiProductMetadata).map(
41+
([pairKey, pairValue], idx) => (
42+
<DataPairPill
43+
key={idx}
44+
pairKey={pairKey}
45+
value={pairValue}
46+
/>
47+
)
48+
)}
49+
</DataPairPillList>
50+
</Box>
51+
)}
3352
</Box>
3453
</Flex>
3554
<ListCardStyles.Footer>

‎projects/ui/src/Components/Apis/gloo-gateway-components/ApisTab/ApisFilter.tsx

+39-38
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { Select, TextInput } from "@mantine/core";
2-
import { useContext } from "react";
2+
import { useContext, useState } from "react";
33
import { Icon } from "../../../../Assets/Icons";
44
import { AppContext } from "../../../../Context/AppContext";
55
import { FilterStyles as Styles } from "../../../../Styles/shared/Filters.style";
6-
import { FilterType } from "../../../../Utility/filter-utility";
6+
import { FilterType, getPairString } from "../../../../Utility/filter-utility";
7+
import { KeyValuePair } from "../../../Common/DataPairPill";
78
import {
89
AppliedFiltersSection,
910
FiltrationProp,
@@ -13,10 +14,10 @@ import GridListToggle from "../../../Common/GridListToggle";
1314
export function ApisFilter({ filters }: { filters: FiltrationProp }) {
1415
const { preferGridView, setPreferGridView } = useContext(AppContext);
1516

16-
// const [pairFilter, setPairFilter] = useState<KeyValuePair>({
17-
// pairKey: "",
18-
// value: "",
19-
// });
17+
const [pairFilter, setPairFilter] = useState<KeyValuePair>({
18+
pairKey: "",
19+
value: "",
20+
});
2021

2122
const addNameFilter = (evt: { target: { value: string } }) => {
2223
const displayName = evt.target.value;
@@ -36,38 +37,38 @@ export function ApisFilter({ filters }: { filters: FiltrationProp }) {
3637
filters.setNameFilter("");
3738
};
3839

39-
// const alterPairKey = (evt: React.ChangeEvent<HTMLInputElement>) => {
40-
// const newKey = evt.target.value;
41-
// setPairFilter({
42-
// pairKey: newKey,
43-
// value: pairFilter.value,
44-
// });
45-
// };
46-
// const alterKeyValuePair = (evt: React.ChangeEvent<HTMLInputElement>) => {
47-
// const newValue = evt.target.value;
48-
// setPairFilter({
49-
// pairKey: pairFilter.pairKey,
50-
// value: newValue,
51-
// });
52-
// };
40+
const alterPairKey = (evt: React.ChangeEvent<HTMLInputElement>) => {
41+
const newKey = evt.target.value;
42+
setPairFilter({
43+
pairKey: newKey,
44+
value: pairFilter.value,
45+
});
46+
};
47+
const alterKeyValuePair = (evt: React.ChangeEvent<HTMLInputElement>) => {
48+
const newValue = evt.target.value;
49+
setPairFilter({
50+
pairKey: pairFilter.pairKey,
51+
value: newValue,
52+
});
53+
};
5354

54-
// const addKeyValuePairFilter = () => {
55-
// const displayName = getPairString(pairFilter);
56-
// if (displayName.trim() === ":") return;
57-
// // Check for duplicate filters.
58-
// const isDuplicateFilter = filters.allFilters.some(
59-
// (f) => f.type === FilterType.keyValuePair && f.displayName === displayName
60-
// );
61-
// if (isDuplicateFilter) {
62-
// return;
63-
// }
64-
// filters.setAllFilters([
65-
// ...filters.allFilters,
66-
// { displayName, type: FilterType.keyValuePair },
67-
// ]);
55+
const addKeyValuePairFilter = () => {
56+
const displayName = getPairString(pairFilter);
57+
if (displayName.trim() === ":") return;
58+
// Check for duplicate filters.
59+
const isDuplicateFilter = filters.allFilters.some(
60+
(f) => f.type === FilterType.keyValuePair && f.displayName === displayName
61+
);
62+
if (isDuplicateFilter) {
63+
return;
64+
}
65+
filters.setAllFilters([
66+
...filters.allFilters,
67+
{ displayName, type: FilterType.keyValuePair },
68+
]);
6869

69-
// setPairFilter({ pairKey: "", value: "" });
70-
// };
70+
setPairFilter({ pairKey: "", value: "" });
71+
};
7172

7273
const addTypeFilter = (addedType: string) => {
7374
filters.setAllFilters([
@@ -109,7 +110,7 @@ export function ApisFilter({ filters }: { filters: FiltrationProp }) {
109110
/>
110111
<Icon.MagnifyingGlass style={{ pointerEvents: "none" }} />
111112
</form>
112-
{/* <form
113+
<form
113114
onSubmit={(e) => {
114115
e.preventDefault();
115116
addKeyValuePairFilter();
@@ -139,7 +140,7 @@ export function ApisFilter({ filters }: { filters: FiltrationProp }) {
139140
<Icon.Add />
140141
</button>
141142
</div>
142-
</form> */}
143+
</form>
143144
<div className="dropdownFilter">
144145
<div className="gearHolder">
145146
<Icon.CodeGear />

‎projects/ui/src/Components/Apis/gloo-gateway-components/ApisTab/ApisList.tsx

+11-18
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
import { useContext, useMemo } from "react";
22
import { useListApiProducts } from "../../../../Apis/gg_hooks";
33
import { AppContext } from "../../../../Context/AppContext";
4-
import { FilterPair, FilterType } from "../../../../Utility/filter-utility";
4+
import {
5+
FilterPair,
6+
FilterType,
7+
parsePairString,
8+
} from "../../../../Utility/filter-utility";
59
import { EmptyData } from "../../../Common/EmptyData";
610
import { Loading } from "../../../Common/Loading";
711
import { ApisPageStyles } from "../../ApisPage.style";
@@ -38,24 +42,13 @@ export function ApisList({
3842
api.name
3943
.toLocaleLowerCase()
4044
.includes(filter.displayName.toLocaleLowerCase())) ||
41-
filter.type !== FilterType.name
45+
(filter.type === FilterType.keyValuePair &&
46+
!!api.apiProductMetadata &&
47+
api.apiProductMetadata[
48+
parsePairString(filter.displayName).pairKey
49+
] === parsePairString(filter.displayName).value) ||
50+
filter.type === FilterType.apiType
4251
);
43-
// api.apiVersions.some((apiVersion) => {
44-
// return allFilters.every((filter) => {
45-
// return (
46-
// (filter.type === FilterType.name &&
47-
// api.apiProductDisplayName
48-
// .toLocaleLowerCase()
49-
// .includes(filter.displayName.toLocaleLowerCase())) ||
50-
// (filter.type === FilterType.keyValuePair &&
51-
// apiVersion.customMetadata &&
52-
// apiVersion.customMetadata[
53-
// parsePairString(filter.displayName).pairKey
54-
// ] === parsePairString(filter.displayName).value) ||
55-
// (filter.type === FilterType.apiType && true) // This is the only type available for now
56-
// );
57-
// });
58-
// });
5952
return passesNameFilter && passesFilterList;
6053
})
6154
.sort((a, b) => a.name.localeCompare(b.name));

‎projects/ui/src/Styles/shared/ListCard.style.tsx

+7-2
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,17 @@ import { borderRadiusConstants } from "../constants";
55
export namespace ListCardStyles {
66
export const ApiImageHolder = styled.div(
77
({ theme }) => css`
8-
height: 140px;
8+
display: flex;
9+
padding: 2px;
10+
align-items: center;
911
border-right: 1px solid ${theme.splashBlue};
1012
1113
img {
14+
display: inline-block;
1215
width: auto;
13-
height: 100%;
16+
height: 200px;
17+
border-radius: ${borderRadiusConstants.xs};
18+
box-shadow: 0 0 2px ${theme.augustGrey};
1419
}
1520
`
1621
);

‎projects/ui/src/Utility/filter-utility.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export function getPairString(pair: KeyValuePair) {
2323
return `${pair.pairKey} : ${pair.value}`;
2424
}
2525
export function parsePairString(pairString: string): KeyValuePair {
26-
const [pairKey, value] = pairString.split(":").map((s) => s.trim());
26+
const [pairKey, value] = pairString.split(" : ").map((s) => s.trim());
2727
return {
2828
pairKey,
2929
value,

0 commit comments

Comments
 (0)