Add enhanced support for external subapp (#1171)

- support description property to use as title when hovering over app
- use a different default icon as previous default icon is used by studios

Author: nicwells

src/shared/components/Header/Navigation.tsx

@@ -27,11 +27,19 @@ const ExternalNavigationItem: React.FC<{
   onClickNavigationItem: () => void;
   appIcon: string;
   appLabel: string;
-}> = ({ appKey, appURL, onClickNavigationItem, appIcon, appLabel }) => {
+  appDescription: string;
+}> = ({
+  appKey,
+  appURL,
+  onClickNavigationItem,
+  appIcon,
+  appLabel,
+  appDescription,
+}) => {
   return (
     <NavigationItemContainer appKey={appKey}>
       <a
-        title=""
+        title={appDescription}
         target="_blank"
         href={appURL || ''}
         onClick={onClickNavigationItem}
@@ -76,6 +84,7 @@ const Navigation: React.FC<{ subApps: any; authenticated: boolean }> = ({
                   appURL={app.url}
                   appIcon={app.icon}
                   appLabel={app.label}
+                  appDescription={app.description}
                   onClickNavigationItem={() => setNavMenuVisible(false)}
                 />
               ) : app.requireLogin && !authenticated ? (

src/shared/hooks/useSubApps.ts

@@ -7,10 +7,11 @@ function addExternalSubApps(
   subApps: Map<string, SubAppObject>,
   eSubbApps: ExternalSubApp[]
 ) {
-  const icon = require('../images/gridIcon.svg');
+  const defaultIcon = require('../images/noteIcon.svg');
   eSubbApps.forEach(e => {
     subApps.set(e.title, {
-      icon,
+      icon: e.icon ? e.icon : defaultIcon,
+      description: e.description,
       namespace: e.title,
       routes: [],
       subAppType: 'external',
@@ -23,6 +24,8 @@ function addExternalSubApps(
 type ExternalSubApp = {
   title: string;
   url: string;
+  icon?: string;
+  description?: string;
 };
 
 const useSubApps = () => {