task/WP-273: Category icon

client/src/components/Applications/AppBrowser/AppBrowser.jsx

@@ -90,7 +90,7 @@ const AppBrowser = () => {
                     }
                   >
                     <span className="nav-content">
-                      <AppIcon appId={app.appId} />
+                      <AppIcon appId={app.appId} category={category} />
                       <span className="nav-text">{app.label || app.appId}</span>
                     </span>
                   </NavLink>

client/src/components/Applications/AppForm/AppForm.jsx

@@ -150,6 +150,19 @@ const AdjustValuesWhenQueueChanges = ({ app }) => {
 };
 
 const AppInfo = ({ app }) => {
+  const categoryDict = useSelector((state) => state.apps.categoryDict);
+  const getAppCategory = (appId) => {
+    let category = null;
+    Object.entries(categoryDict).forEach(([cat, apps]) => {
+      if (apps.some((app) => app.appId === appId)) {
+        category = cat;
+      }
+    });
+    return category;
+  };
+
+  const appCategory = getAppCategory(app.definition.id);
+
   return (
     <div className="appInfo-wrapper">
       <h5 className="appInfo-title">{app.definition.label}</h5>
@@ -163,7 +176,7 @@ const AppInfo = ({ app }) => {
           target="_blank"
           rel="noreferrer noopener"
         >
-          <AppIcon appId={app.definition.id} />{' '}
+          <AppIcon appId={app.definition.id} category={appCategory} />{' '}
           <span>{app.definition.notes.label} Documentation</span>
         </a>
       ) : null}

client/src/components/_common/AppIcon/AppIcon.jsx

@@ -4,10 +4,14 @@ import PropTypes from 'prop-types';
 import Icon from '_common/Icon';
 import './AppIcon.scss';
 
-const AppIcon = ({ appId }) => {
+const AppIcon = ({ appId, category }) => {
   const appIcons = useSelector((state) => state.apps.appIcons);
   const findAppIcon = (id) => {
-    let appIcon = 'applications';
+    if (!category) {
+      console.error('Category is undefined for appId:', id);
+      return 'applications';
+    }
+    let appIcon = category.replace(' ', '-').toLowerCase();
     Object.keys(appIcons).forEach((appName) => {
       if (id.includes(appName)) {
         appIcon = appIcons[appName].toLowerCase();
@@ -27,6 +31,11 @@ const AppIcon = ({ appId }) => {
 };
 AppIcon.propTypes = {
   appId: PropTypes.string.isRequired,
+  category: PropTypes.string,
+};
+
+AppIcon.defaultProps = {
+  category: 'applications',
 };
 
 export default AppIcon;

client/src/components/_common/AppIcon/AppIcon.test.js

@@ -15,26 +15,30 @@ const store = mockStore({
       jupyter: 'jupyter',
     },
   },
+  categories: {
+    'test-apps': ['vasp'],
+    'data-processing': ['jupyter'],
+  },
 });
 
 expect.extend({ toHaveAttribute });
 
-function renderAppIcon(appId) {
+function renderAppIcon(appId, category = 'default') {
   return render(
     <Provider store={store}>
-      <AppIcon appId={appId} />
+      <AppIcon appId={appId} category={category} />
     </Provider>
   );
 }
 
 describe('AppIcon', () => {
   it('should render icons for known app IDs', () => {
-    const { getByRole } = renderAppIcon('jupyter');
+    const { getByRole } = renderAppIcon('jupyter', 'data-processing');
     expect(getByRole('img')).toHaveAttribute('class', 'icon icon-jupyter');
   });
-  it('should show generic icons for apps with no appIcon', () => {
-    const { getByRole } = renderAppIcon('vasp');
-    expect(getByRole('img')).toHaveAttribute('class', 'icon icon-applications');
+  it('should show category icons for apps with no appIcon', () => {
+    const { getByRole } = renderAppIcon('vasp', 'test-apps');
+    expect(getByRole('img')).toHaveAttribute('class', 'icon icon-test-apps');
   });
   it('should render icons for prtl.clone apps', () => {
     const { getByRole } = renderAppIcon(