Skip to content

Commit

Permalink
feat: match emui catalog to final designs (#2012)
Browse files Browse the repository at this point in the history 
## Description:
This PR matches the EMUI catalog to the final designs in figma.

#### Demo


https://github.com/kurtosis-tech/kurtosis/assets/4419574/87c6627b-613c-4421-8923-fc61f70b52e4

## Is this change user facing?
YES

## References (if applicable):
*
https://www.figma.com/file/8WkttVmRVJfudO9i9n4RGD/Handoff-Screens?node-id=1810%3A11280&mode=dev
  • Loading branch information
@Dartoxian
Dartoxian committed Jan 3, 2024
1 parent 4287f88 commit c55fc7a
Show file tree
Hide file tree
Showing 22 changed files with 577 additions and 195 deletions.
Binary file added enclave-manager/web/packages/app/public/noLogo.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
309 changes: 253 additions & 56 deletions enclave-manager/web/packages/app/src/emui/catalog/Catalog.tsx
View file
@@ -1,18 +1,23 @@
import { SmallCloseIcon } from "@chakra-ui/icons";
import {
Box,
Button,
ButtonGroup,
Card,
CardBody,
CardHeader,
Checkbox,
Flex,
Heading,
Icon,
IconButton,
Input,
InputGroup,
InputLeftElement,
InputRightElement,
Text,
Menu,
MenuButton,
MenuDivider,
MenuItem,
MenuList,
} from "@chakra-ui/react";
import { GetPackagesResponse, KurtosisPackage } from "kurtosis-cloud-indexer-sdk";
import {
Expand All @@ -21,20 +26,32 @@ import {
isDefined,
KurtosisAlert,
KurtosisPackageCardGrid,
KurtosisPackageCardRow,
maybeArrayToArray,
PageTitle,
useKeyboardAction,
useSavedPackages,
} from "kurtosis-ui-components";
import { useMemo, useRef, useState } from "react";
import { upperFirst } from "lodash";
import { useEffect, useMemo, useRef, useState } from "react";
import { BiSortAlt2 } from "react-icons/bi";
import { FiSearch } from "react-icons/fi";
import { HiStar } from "react-icons/hi";
import { IoFilterSharp, IoPlay } from "react-icons/io5";
import { MdBookmarkAdded } from "react-icons/md";
import { useSearchParams } from "react-router-dom";
import { ConfigureEnclaveModal } from "../enclaves/components/modals/ConfigureEnclaveModal";
import { EnclavesContextProvider } from "../enclaves/EnclavesContext";
import { useCatalogContext } from "./CatalogContext";

type SearchState = {
term: string;
filter: ("saved" | "featured")[]; // TODO: Implement 'featured'
sortBy?: "stars" | "runs";
};

export const Catalog = () => {
const { catalog } = useCatalogContext();
const { savedPackages } = useSavedPackages();

if (catalog.isErr) {
return (
Expand All @@ -44,23 +61,27 @@ export const Catalog = () => {
);
}

return <CatalogImpl savedPackages={savedPackages} catalog={catalog.value} />;
return <CatalogImpl catalog={catalog.value} />;
};

type CatalogImplProps = {
catalog: GetPackagesResponse;
savedPackages: KurtosisPackage[];
};

const CatalogImpl = ({ catalog, savedPackages }: CatalogImplProps) => {
const CatalogImpl = ({ catalog }: CatalogImplProps) => {
const searchRef = useRef<HTMLInputElement>(null);
const [searchTerm, setSearchTerm] = useState("");
const [searchParams, setUrlSearchParams] = useSearchParams();
const initialTerm = searchParams.get("t") || "";
const initialFilter = maybeArrayToArray(searchParams.get("f")).filter(isDefined);
const initialSortBy = searchParams.get("s") || undefined;

const [searchState, setSearchState] = useState<SearchState>({
term: initialTerm,
filter: initialFilter as ("saved" | "featured")[],
sortBy: initialSortBy as "stars" | "runs",
});
const [configuringPackage, setConfiguringPackage] = useState<KurtosisPackage>();
const isSearching = searchTerm.length > 0;
const filteredCatalog = useMemo(
() => catalog.packages.filter((kurtosisPackage) => kurtosisPackage.name.toLowerCase().indexOf(searchTerm) > -1),
[searchTerm, catalog],
);
const isSearching = searchState.term.length > 0 || searchState.filter.length > 0 || isDefined(searchState.sortBy);

const handlePackageRun = (kurtosisPackage: KurtosisPackage) => {
setConfiguringPackage(kurtosisPackage);
Expand All @@ -76,14 +97,29 @@ const CatalogImpl = ({ catalog, savedPackages }: CatalogImplProps) => {
},
escape: () => {
if (isDefined(searchRef.current) && searchRef.current === document.activeElement) {
setSearchTerm("");
setSearchState((searchTerm) => ({ ...searchTerm, term: "" }));
}
},
}),
[searchRef],
),
);

useEffect(() => {
const params = new URLSearchParams();
params.set("t", searchState.term);
searchState.filter.forEach((f) => params.set("f", f));
if (isDefined(searchState.sortBy)) {
params.set("s", searchState.sortBy);
}
const currentParts = window.location.href.split("?");
if (currentParts.length > 1) {
setUrlSearchParams(params, { replace: true });
} else {
setUrlSearchParams(params);
}
}, [searchState, setUrlSearchParams]);

return (
<AppPageLayout>
<Flex p={"17px 0"}>
Expand All @@ -97,61 +133,41 @@ const CatalogImpl = ({ catalog, savedPackages }: CatalogImplProps) => {
</InputLeftElement>
<Input
ref={searchRef}
value={searchTerm}
value={searchState.term}
bgColor={"gray.850"}
onChange={(e) => setSearchTerm(e.target.value)}
onChange={(e) => setSearchState((searchTerm) => ({ ...searchTerm, term: e.target.value }))}
placeholder={"Search"}
/>
<InputRightElement w={"unset"}>
<InputRightElement w={"unset"} mr={"8px"}>
{isSearching ? (
<IconButton
aria-label={"Clear search"}
<Button
variant="ghost"
size={"sm"}
icon={<SmallCloseIcon />}
onClick={() => setSearchTerm("")}
/>
size={"xs"}
rightIcon={<SmallCloseIcon />}
onClick={() => setSearchState((searchTerm) => ({ filter: [], term: "" }))}
>
Clear
</Button>
) : (
<FindCommand whiteSpace={"nowrap"} pr={"10px"} />
)}
</InputRightElement>
</InputGroup>
</Flex>
{isSearching && (
<>
<Heading fontSize={"lg"} fontWeight={"medium"}>
{filteredCatalog.length} Matches
</Heading>
<KurtosisPackageCardGrid packages={filteredCatalog} onPackageRunClicked={handlePackageRun} />
</>
<CatalogSearchResults
catalog={catalog}
searchState={searchState}
onSearchStateChanged={setSearchState}
onPackageRunClicked={handlePackageRun}
/>
)}
{!isSearching && (
<>
{savedPackages.length > 0 && (
<Box as={"section"} pb="32px" borderColor={"whiteAlpha.300"} borderBottomWidth={"1px"}>
<Card>
<CardHeader
display={"flex"}
gap={"8px"}
alignItems={"center"}
fontSize={"lg"}
pb={"0"}
fontWeight={"medium"}
>
<Icon as={MdBookmarkAdded} color={"kurtosisGreen.400"} />
<Text as={"span"}>Saved</Text>
</CardHeader>
<CardBody>
<KurtosisPackageCardGrid packages={savedPackages} onPackageRunClicked={handlePackageRun} />
</CardBody>
</Card>
</Box>
)}
<Heading fontSize={"lg"} fontWeight={"medium"}>
All
</Heading>
<KurtosisPackageCardGrid packages={catalog.packages} onPackageRunClicked={handlePackageRun} />
</>
<CatalogDefaultView
catalog={catalog}
onSearchStateChanged={setSearchState}
onPackageRunClicked={handlePackageRun}
/>
)}
{configuringPackage && (
<EnclavesContextProvider skipInitialLoad>
Expand All @@ -166,3 +182,184 @@ const CatalogImpl = ({ catalog, savedPackages }: CatalogImplProps) => {
</AppPageLayout>
);
};

type CatalogSearchResultsProps = {
catalog: GetPackagesResponse;
searchState: SearchState;
onSearchStateChanged: (updater: (oldState: SearchState) => SearchState) => void;
onPackageRunClicked: (kurtosisPackage: KurtosisPackage) => void;
};

const CatalogSearchResults = ({
catalog,
searchState,
onSearchStateChanged,
onPackageRunClicked,
}: CatalogSearchResultsProps) => {
const { savedPackages } = useSavedPackages();

const filteredCatalog = useMemo(
() =>
catalog.packages
.filter((kurtosisPackage) => kurtosisPackage.name.toLowerCase().indexOf(searchState.term.toLowerCase()) > -1)
.filter((kurtosisPackage) => {
if (searchState.filter.length === 0) {
return true;
}
if (
searchState.filter.indexOf("saved") >= 0 &&
savedPackages.some((savedKurtosisPackage) => savedKurtosisPackage.name === kurtosisPackage.name)
) {
return true;
}
// TODO: Implement 'featured' filtering
return false;
})
.sort((a, b) => {
if (searchState.sortBy === "stars") {
return a.stars > b.stars ? -1 : a.stars === b.stars ? 0 : 1;
}
if (searchState.sortBy === "runs") {
return b.runCount - a.runCount;
}
return 0;
}),
[searchState, catalog, savedPackages],
);

const handleFilterToggle = (filter: "saved" | "featured") => () => {
onSearchStateChanged((searchTerm) => ({
...searchTerm,
filter:
searchTerm.filter.indexOf(filter) >= 0
? searchTerm.filter.filter((searchFilter) => searchFilter !== filter)
: [...searchTerm.filter, filter],
}));
};

return (
<Flex flexDirection={"column"} gap={"32px"} maxW={"1248px"}>
<Flex justifyContent={"space-between"} alignItems={"center"}>
<Heading fontSize={"lg"} fontWeight={"medium"}>
{filteredCatalog.length} Matches
</Heading>
<ButtonGroup variant={"ghost"} size={"xs"}>
<Menu closeOnSelect={false}>
<MenuButton
as={Button}
leftIcon={<IoFilterSharp />}
variant={searchState.filter.length > 0 ? "activeFilterControl" : "ghost"}
colorScheme={searchState.filter.length > 0 ? "kurtosisGreen" : "ghost"}
>
{searchState.filter.length > 0 ? searchState.filter.map((v) => upperFirst(v)).join(", ") : "Filter"}
</MenuButton>
<MenuList>
<MenuItem>
<Flex as={"span"} gap={"8px"}>
<Checkbox onChange={handleFilterToggle("saved")} isChecked={searchState.filter.indexOf("saved") >= 0}>
Saved
</Checkbox>
</Flex>
</MenuItem>
<MenuDivider />
<MenuItem onClick={() => onSearchStateChanged((searchTerm) => ({ ...searchTerm, filter: [] }))}>
Clear
</MenuItem>
</MenuList>
</Menu>
<Menu>
<MenuButton
as={Button}
leftIcon={<BiSortAlt2 />}
variant={isDefined(searchState.sortBy) ? "activeFilterControl" : "ghost"}
colorScheme={isDefined(searchState.sortBy) ? "kurtosisGreen" : "ghost"}
>
{isDefined(searchState.sortBy) ? `Sorted by ${searchState.sortBy}` : "Sort"}
</MenuButton>
<MenuList>
<MenuItem
icon={<HiStar />}
onClick={() => onSearchStateChanged((searchState) => ({ ...searchState, sortBy: "stars" }))}
>
Stars
</MenuItem>
<MenuItem
icon={<IoPlay />}
onClick={() => onSearchStateChanged((searchState) => ({ ...searchState, sortBy: "runs" }))}
>
Run Count
</MenuItem>
<MenuDivider />
<MenuItem onClick={() => onSearchStateChanged((searchState) => ({ ...searchState, sortBy: undefined }))}>
Clear
</MenuItem>
</MenuList>
</Menu>
</ButtonGroup>
</Flex>
<KurtosisPackageCardGrid packages={filteredCatalog} onPackageRunClicked={onPackageRunClicked} />
</Flex>
);
};

type CatalogDefaultViewProps = {
catalog: GetPackagesResponse;
onSearchStateChanged: (updater: (oldState: SearchState) => SearchState) => void;
onPackageRunClicked: (kurtosisPackage: KurtosisPackage) => void;
};

const CatalogDefaultView = ({ catalog, onPackageRunClicked, onSearchStateChanged }: CatalogDefaultViewProps) => {
const { savedPackages } = useSavedPackages();

const mostStarredPackages = useMemo(
() => [...catalog.packages].sort((a, b) => (a.stars > b.stars ? -1 : a.stars === b.stars ? 0 : 1)).slice(0, 10),
[catalog],
);
const mostRanPackages = useMemo(
() =>
[...catalog.packages]
.sort((a, b) => (a.runCount > b.runCount ? -1 : a.runCount === b.runCount ? 0 : 1))
.slice(0, 10),
[catalog],
);

return (
<>
{savedPackages.length > 0 && (
<Box as={"section"}>
<Card>
<CardBody>
<KurtosisPackageCardRow
title={"Saved"}
icon={<Icon as={MdBookmarkAdded} color={"kurtosisGreen.400"} />}
packages={savedPackages}
onPackageRunClicked={onPackageRunClicked}
onSeeAllClicked={() => onSearchStateChanged((searchTerm) => ({ ...searchTerm, filter: ["saved"] }))}
/>
</CardBody>
</Card>
</Box>
)}
<Box as={"section"} pb="32px" borderColor={"whiteAlpha.300"} borderBottomWidth={"1px"}>
<KurtosisPackageCardRow
title={"Most starred"}
packages={mostStarredPackages}
onPackageRunClicked={onPackageRunClicked}
onSeeAllClicked={() => onSearchStateChanged((searchState) => ({ ...searchState, sortBy: "stars" }))}
/>
</Box>
<Box as={"section"} pb="32px" borderColor={"whiteAlpha.300"} borderBottomWidth={"1px"}>
<KurtosisPackageCardRow
title={"Most Ran"}
packages={mostRanPackages}
onPackageRunClicked={onPackageRunClicked}
onSeeAllClicked={() => onSearchStateChanged((searchState) => ({ ...searchState, sortBy: "runs" }))}
/>
</Box>
<Heading fontSize={"lg"} fontWeight={"medium"}>
All
</Heading>
<KurtosisPackageCardGrid packages={catalog.packages} onPackageRunClicked={onPackageRunClicked} />
</>
);
};

0 comments on commit c55fc7a

Please sign in to comment.