Catalog app sort

components/gitOpsCatalogCard/index.tsx

@@ -18,21 +18,21 @@ import {
   Installing,
 } from './gitOpsCatalogCard.styled';
 
-export const CATEGORY_LABEL_CONFIG: Record<AppCategory, { color: TagColor; label?: string }> = {
-  [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, TagColor> = {
+  [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<GitOpsCatalogApp> & {
@@ -51,7 +51,7 @@ const GitOpsCatalogCard: FunctionComponent<GitOpsCatalogCardProps> = ({
   showSubmitButton = true,
   children,
 }) => {
-  const { color, label } = CATEGORY_LABEL_CONFIG[category ?? AppCategory.APP_MANAGEMENT] ?? {};
+  const tagColor = CATEGORY_COLOR_CONFIG[category ?? AppCategory.APP_MANAGEMENT] ?? {};
   return (
     <Card>
       <Header>
@@ -73,7 +73,7 @@ const GitOpsCatalogCard: FunctionComponent<GitOpsCatalogCardProps> = ({
         </App>
         {category && (
           <Category>
-            <Tag key={category} text={label ?? category} bgColor={color} />
+            <Tag key={category} text={category} bgColor={tagColor} />
           </Category>
         )}
       </Header>

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 = () => {
         <Typography variant="subtitle2" sx={{ mb: 3 }}>
           Category
         </Typography>
-        {sortedAvailableCategories.map((category) => {
-          const { label } =
-            CATEGORY_LABEL_CONFIG[category] ?? CATEGORY_LABEL_CONFIG[AppCategory.APPLICATIONS];
-          return (
-            <FormGroup key={category} sx={{ mb: 2 }}>
-              <FormControlLabel
-                control={<Checkbox sx={{ mr: 2 }} onClick={() => onClickCategory(category)} />}
-                label={
-                  <Typography variant="body2" color={VOLCANIC_SAND}>
-                    {label ?? category}
-                  </Typography>
-                }
-                sx={{ ml: 0 }}
-              />
-            </FormGroup>
-          );
-        })}
+        {sortedAvailableCategories.map((category) => (
+          <FormGroup key={category} sx={{ mb: 2 }}>
+            <FormControlLabel
+              control={<Checkbox sx={{ mr: 2 }} onClick={() => onClickCategory(category)} />}
+              label={
+                <Typography variant="body2" color={VOLCANIC_SAND}>
+                  {category}
+                </Typography>
+              }
+              sx={{ ml: 0 }}
+            />
+          </FormGroup>
+        ))}
       </Filter>
       <Content>
         {!selectedCategories.length && <Typography variant="subtitle2">All</Typography>}

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',