diff --git a/components/gitOpsCatalogCard/index.tsx b/components/gitOpsCatalogCard/index.tsx index ae48c569..7e7fb377 100644 --- a/components/gitOpsCatalogCard/index.tsx +++ b/components/gitOpsCatalogCard/index.tsx @@ -18,21 +18,21 @@ import { Installing, } from './gitOpsCatalogCard.styled'; -export const CATEGORY_LABEL_CONFIG: Record = { - [AppCategory.APP_MANAGEMENT]: { color: 'purple', label: 'App Management' }, - [AppCategory.ARCHITECTURE]: { color: 'pink' }, - [AppCategory.CI_CD]: { color: 'yellow', label: 'CI/CD' }, - [AppCategory.DATABASE]: { color: 'indigo' }, - [AppCategory.FIN_OPS]: { color: 'light-blue' }, - [AppCategory.INFRASTRUCTURE]: { color: 'grey' }, - [AppCategory.MONITORING]: { color: 'emerald' }, - [AppCategory.OBSERVABIILITY]: { color: 'light-orange' }, - [AppCategory.SECURITY]: { color: 'dark-sky-blue' }, - [AppCategory.STORAGE]: { color: 'green' }, - [AppCategory.TESTING]: { color: 'neon-green' }, - [AppCategory.QUEUEING]: { color: 'sky-blue' }, - [AppCategory.KUBESHOP]: { color: 'sky-blue' }, - [AppCategory.APPLICATIONS]: { color: 'sky-blue' }, +export const CATEGORY_COLOR_CONFIG: Record = { + [AppCategory.APP_MANAGEMENT]: 'purple', + [AppCategory.ARCHITECTURE]: 'pink', + [AppCategory.CI_CD]: 'yellow', + [AppCategory.DATABASE]: 'indigo', + [AppCategory.FIN_OPS]: 'light-blue', + [AppCategory.INFRASTRUCTURE]: 'grey', + [AppCategory.MONITORING]: 'emerald', + [AppCategory.OBSERVABIILITY]: 'light-orange', + [AppCategory.SECURITY]: 'dark-sky-blue', + [AppCategory.STORAGE]: 'green', + [AppCategory.TESTING]: 'neon-green', + [AppCategory.QUEUEING]: 'sky-blue', + [AppCategory.KUBESHOP]: 'sky-blue', + [AppCategory.APPLICATIONS]: 'sky-blue', }; export type GitOpsCatalogCardProps = PropsWithChildren & { @@ -51,7 +51,7 @@ const GitOpsCatalogCard: FunctionComponent = ({ showSubmitButton = true, children, }) => { - const { color, label } = CATEGORY_LABEL_CONFIG[category ?? AppCategory.APP_MANAGEMENT] ?? {}; + const tagColor = CATEGORY_COLOR_CONFIG[category ?? AppCategory.APP_MANAGEMENT] ?? {}; return (
@@ -73,7 +73,7 @@ const GitOpsCatalogCard: FunctionComponent = ({ {category && ( - + )}
diff --git a/containers/gitOpsCatalog/index.tsx b/containers/gitOpsCatalog/index.tsx index 68b82c83..db9ce575 100644 --- a/containers/gitOpsCatalog/index.tsx +++ b/containers/gitOpsCatalog/index.tsx @@ -7,7 +7,7 @@ import CheckCircleIcon from '@mui/icons-material/CheckCircle'; import Checkbox from '../../components/checkbox'; import Typography from '../../components/typography'; -import GitOpsCatalogCard, { CATEGORY_LABEL_CONFIG } from '../../components/gitOpsCatalogCard'; +import GitOpsCatalogCard from '../../components/gitOpsCatalogCard'; import GitopsAppModal from '../../components/gitopsAppModal'; import useModal from '../../hooks/useModal'; import { useAppDispatch, useAppSelector } from '../../redux/store'; @@ -48,7 +48,7 @@ const gitOpsCatalog: FunctionComponent = () => { ); const gitOpsCatalogApps = useAppSelector(({ cluster }) => - cluster.gitOpsCatalogApps?.filter( + cluster.gitOpsCatalogApps.filter( (app) => !cluster.clusterServices.map((s) => s.name).includes(app.name), ), ); @@ -120,14 +120,17 @@ const gitOpsCatalog: FunctionComponent = () => { }; const filteredApps = useMemo(() => { + let apps: GitOpsCatalogApp[] = []; + if (!selectedCategories.length) { - return gitOpsCatalogApps; + apps = gitOpsCatalogApps; + } else { + apps = gitOpsCatalogApps.filter( + ({ category }) => category && selectedCategories.includes(category), + ); } - return ( - gitOpsCatalogApps && - gitOpsCatalogApps.filter(({ category }) => category && selectedCategories.includes(category)) - ); + return sortBy(apps, (app) => app.display_name); }, [gitOpsCatalogApps, selectedCategories]); return ( @@ -136,23 +139,19 @@ const gitOpsCatalog: FunctionComponent = () => { Category - {sortedAvailableCategories.map((category) => { - const { label } = - CATEGORY_LABEL_CONFIG[category] ?? CATEGORY_LABEL_CONFIG[AppCategory.APPLICATIONS]; - return ( - - onClickCategory(category)} />} - label={ - - {label ?? category} - - } - sx={{ ml: 0 }} - /> - - ); - })} + {sortedAvailableCategories.map((category) => ( + + onClickCategory(category)} />} + label={ + + {category} + + } + sx={{ ml: 0 }} + /> + + ))} {!selectedCategories.length && All} diff --git a/types/gitOpsCatalog/index.ts b/types/gitOpsCatalog/index.ts index 3d3221a5..2fe9ba15 100644 --- a/types/gitOpsCatalog/index.ts +++ b/types/gitOpsCatalog/index.ts @@ -1,9 +1,9 @@ import { FieldValues } from 'react-hook-form'; export enum AppCategory { - APP_MANAGEMENT = 'Application Management', + APP_MANAGEMENT = 'App Management', ARCHITECTURE = 'Architecture', - CI_CD = 'Continuous Delivery', + CI_CD = 'CI/CD', DATABASE = 'Database', FIN_OPS = 'FinOps', INFRASTRUCTURE = 'Infrastructure',