[AppForm] Use bundle_icon field for app icon in App Form header (#1345)

client/modules/workspace/src/AppsSubmissionForm/AppsSubmissionForm.tsx

@@ -6,6 +6,7 @@ import { useForm, FormProvider } from 'react-hook-form';
 import { Link } from 'react-router-dom';
 import { zodResolver } from '@hookform/resolvers/zod';
 import {
+  useAppsListing,
   useGetAppsSuspense,
   usePostJobs,
   useGetSystems,
@@ -50,6 +51,7 @@ import {
   updateValuesForQueue,
   getDefaultExecSystem,
   getAllocationList,
+  findAppById,
 } from '../utils';
 
 export const AppsSubmissionForm: React.FC = () => {
@@ -65,6 +67,10 @@ export const AppsSubmissionForm: React.FC = () => {
   } = useAuthenticatedUser() as { user: TUser };
 
   const { definition, license, defaultSystemNeedsKeys } = app;
+  const { data: appListingData } = useAppsListing();
+  const icon =
+    findAppById(appListingData, definition.id)?.icon ??
+    (definition.notes.icon || 'Generic-App');
 
   const defaultStorageHost = defaultStorageSystem.host;
   const hasCorral = ['data.tacc.utexas.edu', 'corral.tacc.utexas.edu'].some(
@@ -481,7 +487,7 @@ export const AppsSubmissionForm: React.FC = () => {
           <Header style={headerStyle}>
             <Flex justify="space-between">
               <div>
-                <AppIcon name={definition.notes.icon || 'Generic-App'} />
+                <AppIcon name={icon} />
                 {definition.notes.label || definition.id}
               </div>
               {definition.notes.helpUrl && (

client/modules/workspace/src/utils/apps.ts

@@ -1,6 +1,7 @@
 import { useParams, useLocation } from 'react-router-dom';
 import { z } from 'zod';
 import {
+  TAppCategories,
   TAppParamsType,
   TTapisSystem,
   TTapisApp,
@@ -447,3 +448,24 @@ export const useGetAppParams = () => {
 
   return { appId, appVersion };
 };
+
+/**
+ * Find app in app tray categories and get the icon info.
+ * @param data TAppCategories or undefined
+ * @param appId string - id of an app.
+ * @returns icon name if available, otherwise null
+ */
+export const findAppById = (
+  data: TAppCategories | undefined,
+  appId: string
+) => {
+  if (!data) return null;
+  for (const category of data.categories) {
+    for (const app of category.apps) {
+      if (app.app_id === appId) {
+        return app;
+      }
+    }
+  }
+  return null;
+};