feat(ui): support custom icons

Signed-off-by: Michael Crenshaw <350466+crenshaw-dev@users.noreply.github.com>
crenshaw-dev · Nov 20, 2024 · 10760b5 · 10760b5
1 parent 83953fe
commit 10760b5
Show file tree

Hide file tree

Showing 10 changed files with 75 additions and 17 deletions.
diff --git a/Makefile b/Makefile
@@ -237,6 +237,10 @@ clidocsgen:
 actionsdocsgen:
 	hack/generate-actions-list.sh
 
+.PHONY: resourceiconsgen
+resourceiconsgen:
+	hack/generate-icons-typescript.sh
+
 .PHONY: codegen-local
 codegen-local: mod-vendor-local mockgen gogen protogen clientgen openapigen clidocsgen actionsdocsgen manifests-local notification-docs notification-catalog
 	rm -rf vendor/

diff --git a/hack/generate-icons-typescript.sh b/hack/generate-icons-typescript.sh
@@ -0,0 +1,10 @@
+#!/usr/bin/env bash
+
+# Users may configure custom resource icons in resource_customizations. This script generates a list of those icons so
+# that the UI knows which icons are available.
+
+echo "// Code generated by hack/generate-icons-typescript.sh; DO NOT EDIT." > ui/src/app/applications/components/resource-customizations.ts
+echo "" >> ui/src/app/applications/components/resource-customizations.ts
+echo "export const resourceIcons = [" >> ui/src/app/applications/components/resource-customizations.ts
+find resource_customizations -name icon.svg | sed 's/resource_customizations\//  "/' | sed 's/\/icon.svg/",/' >> ui/src/app/applications/components/resource-customizations.ts
+echo "]" >> ui/src/app/applications/components/resource-customizations.ts
diff --git a/ui/src/app/applications/components/application-details/application-resource-list.tsx b/ui/src/app/applications/components/application-details/application-resource-list.tsx
@@ -82,7 +82,7 @@ export const ApplicationResourceList = (props: ApplicationResourceListProps) =>
                                     <div className='row'>
                                         <div className='columns small-1 xxxlarge-1'>
                                             <div className='application-details__resource-icon'>
-                                                <ResourceIcon kind={res.kind} />
+                                                <ResourceIcon group={res.group} kind={res.kind} />
                                                 <br />
                                                 <div>{ResourceLabel({kind: res.kind})}</div>
                                             </div>

diff --git a/ui/src/app/applications/components/application-pod-view/pod-view.tsx b/ui/src/app/applications/components/application-pod-view/pod-view.tsx
@@ -98,7 +98,7 @@ export class PodView extends React.Component<PodViewProps> {
                                                     style={group.kind === 'node' ? {} : {cursor: 'pointer'}}>
                                                     <div style={{display: 'flex', alignItems: 'center'}}>
                                                         <div style={{marginRight: '10px'}}>
-                                                            <ResourceIcon kind={group.kind || 'Unknown'} />
+                                                            <ResourceIcon group={group.group} kind={group.kind || 'Unknown'} />
                                                             <br />
                                                             {<div style={{textAlign: 'center'}}>{ResourceLabel({kind: group.kind})}</div>}
                                                         </div>

diff --git a/ui/src/app/applications/components/application-resource-tree/application-resource-tree.tsx b/ui/src/app/applications/components/application-resource-tree/application-resource-tree.tsx
@@ -283,7 +283,7 @@ function renderGroupedNodes(props: ApplicationResourceTreeProps, node: {count: n
         <React.Fragment>
             <div className='application-resource-tree__node' style={{left: node.x, top: node.y, width: node.width, height: node.height}}>
                 <div className='application-resource-tree__node-kind-icon'>
-                    <ResourceIcon kind={node.kind} />
+                    <ResourceIcon group={node.group} kind={node.kind} />
                     <br />
                     <div className='application-resource-tree__node-kind'>{ResourceLabel({kind: node.kind})}</div>
                 </div>
@@ -460,7 +460,7 @@ function renderPodGroup(props: ApplicationResourceTreeProps, id: string, node: R
                     className={classNames('application-resource-tree__node-kind-icon', {
                         'application-resource-tree__node-kind-icon--big': rootNode
                     })}>
-                    <ResourceIcon kind={node.kind || 'Unknown'} />
+                    <ResourceIcon group={node.group} kind={node.kind || 'Unknown'} />
                     <br />
                     {!rootNode && <div className='application-resource-tree__node-kind'>{ResourceLabel({kind: node.kind})}</div>}
                 </div>
@@ -740,7 +740,7 @@ function renderResourceNode(props: ApplicationResourceTreeProps, id: string, nod
                 className={classNames('application-resource-tree__node-kind-icon', {
                     'application-resource-tree__node-kind-icon--big': rootNode
                 })}>
-                <ResourceIcon kind={node.kind} />
+                <ResourceIcon group={node.group} kind={node.kind} />
                 <br />
                 {!rootNode && <div className='application-resource-tree__node-kind'>{ResourceLabel({kind: node.kind})}</div>}
             </div>

diff --git a/ui/src/app/applications/components/resource-customizations.ts b/ui/src/app/applications/components/resource-customizations.ts
@@ -0,0 +1,4 @@
+// Code generated by hack/generate-icons-typescript.sh; DO NOT EDIT.
+
+export const resourceIcons = [
+]
diff --git a/ui/src/app/applications/components/resource-details/resource-details.tsx b/ui/src/app/applications/components/resource-details/resource-details.tsx
@@ -291,7 +291,7 @@ export const ResourceDetails = (props: ResourceDetailsProps) => {
                         <React.Fragment>
                             <div className='resource-details__header'>
                                 <div style={{display: 'flex', flexDirection: 'column', marginRight: '15px', alignItems: 'center', fontSize: '12px'}}>
-                                    <ResourceIcon kind={selectedNode.kind} />
+                                    <ResourceIcon group={selectedNode.group} kind={selectedNode.kind} />
                                     {ResourceLabel({kind: selectedNode.kind})}
                                 </div>
                                 <h1>{selectedNode.name}</h1>

diff --git a/ui/src/app/applications/components/resource-icon.tsx b/ui/src/app/applications/components/resource-icon.tsx
@@ -1,17 +1,22 @@
 import * as React from 'react';
 import {resourceIcons} from './resources';
+import {resourceIcons as resourceCustomizations} from './resource-customizations';
 
-export const ResourceIcon = ({kind, customStyle}: {kind: string; customStyle?: React.CSSProperties}) => {
+export const ResourceIcon = ({group, kind, customStyle}: {group: string, kind: string; customStyle?: React.CSSProperties}) => {
     if (kind === 'node') {
         return <img src={'assets/images/infrastructure_components/' + kind + '.svg'} alt={kind} style={{padding: '2px', width: '40px', height: '32px', ...customStyle}} />;
     }
-    const i = resourceIcons.get(kind);
-    if (i !== undefined) {
-        return <img src={'assets/images/resources/' + i + '.svg'} alt={kind} style={{padding: '2px', width: '40px', height: '32px', ...customStyle}} />;
-    }
     if (kind === 'Application') {
         return <i title={kind} className={`icon argo-icon-application`} style={customStyle} />;
     }
+    if (!group) {
+        const i = resourceIcons.get(kind);
+        if (i !== undefined) {
+            return <img src={'assets/images/resources/' + i + '.svg'} alt={kind} style={{padding: '2px', width: '40px', height: '32px', ...customStyle}} />;
+        }
+    } else if (resourceCustomizations.includes(`${group}/${kind}`)) {
+        return <img src={`assets/images/resource_customizations/${group}/${kind}/icon.svg`} alt={kind} style={{padding: '2px', width: '40px', height: '32px', ...customStyle}} />;
+    }
     const initials = kind.replace(/[a-z]/g, '');
     const n = initials.length;
     const style: React.CSSProperties = {

diff --git a/ui/src/app/webpack.config.js b/ui/src/app/webpack.config.js
@@ -89,6 +89,10 @@ const config = {
                 {
                     from: 'node_modules/monaco-editor/min/vs/base/browser/ui/codicons/codicon',
                     to: 'assets/fonts'
+                },
+                {
+                    from: '../resource_customizations/*/*/icon.svg',
+                    to: 'assets/images/resources'
                 }
             ]
         }),

diff --git a/ui/yarn.lock b/ui/yarn.lock
@@ -2876,7 +2876,6 @@ arg@^4.1.0:
   dependencies:
     "@fortawesome/fontawesome-free" "^6.2.1"
     "@tippy.js/react" "^3.1.1"
-    antd "^5.6.1"
     classnames "^2.2.6"
     core-js "^3.32.1"
     foundation-sites "^6.4.3"
@@ -2886,7 +2885,7 @@ arg@^4.1.0:
     react-form "^2.16.0"
     react-helmet "^6.1.0"
     react-router-dom "^4.2.2"
-    react-toastify "9.0.8"
+    react-toastify "9.0.3"
     rxjs "^7.8.1"
     typescript "^4.9.5"
     uuid "^9.0.0"
@@ -3364,7 +3363,7 @@ chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@^2.0.0, chalk@^2.0.1, chalk@^2.4.1, chalk@^2.4.2:
+chalk@^2.0.0, chalk@^2.0.1, chalk@^2.4.0, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -3924,7 +3923,7 @@ debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
   dependencies:
     ms "2.1.2"
 
-debug@^3.1.1:
+debug@^3.1.0, debug@^3.1.1:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
   integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
@@ -5055,6 +5054,11 @@ file-entry-cache@^8.0.0:
   dependencies:
     flat-cache "^4.0.0"
 
+filesize@^3.6.1:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.6.1.tgz#090bb3ee01b6f801a8a8be99d31710b3422bb317"
+  integrity sha512-7KjR1vv6qnicaPMi1iiTcI85CyYwRO/PSFCu6SvqL8jN2Wjt/NIYQTFtFs7fSDCYOstUkEWIQGFUg5YZQfjlcg==
+
 fill-range@^7.1.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
@@ -5396,7 +5400,7 @@ gopd@^1.0.1:
   dependencies:
     get-intrinsic "^1.1.3"
 
-graceful-fs@^4.1.2, graceful-fs@^4.2.11, graceful-fs@^4.2.4, graceful-fs@^4.2.6, graceful-fs@^4.2.9:
+graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.2.11, graceful-fs@^4.2.4, graceful-fs@^4.2.6, graceful-fs@^4.2.9:
   version "4.2.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
   integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
@@ -7139,6 +7143,11 @@ mobx-react@^7.2.0:
   dependencies:
     mobx-react-lite "^3.3.0"
 
+moment@^2.22.1:
+  version "2.30.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.30.1.tgz#f8c91c07b7a786e30c59926df530b4eac96974ae"
+  integrity sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==
+
 moment@^2.29.4:
   version "2.29.4"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
@@ -9344,7 +9353,7 @@ side-channel@^1.0.6:
     get-intrinsic "^1.2.4"
     object-inspect "^1.13.1"
 
-signal-exit@^3.0.3, signal-exit@^3.0.7:
+signal-exit@^3.0.2, signal-exit@^3.0.3, signal-exit@^3.0.7:
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
   integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
@@ -10558,6 +10567,15 @@ wrappy@1:
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
 
+write-file-atomic@^2.3.0:
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.4.3.tgz#1fd2e9ae1df3e75b8d8c367443c692d4ca81f481"
+  integrity sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==
+  dependencies:
+    graceful-fs "^4.1.11"
+    imurmurhash "^0.1.4"
+    signal-exit "^3.0.2"
+
 write-file-atomic@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-4.0.2.tgz#a9df01ae5b77858a027fd2e80768ee433555fcfd"
@@ -10566,6 +10584,19 @@ write-file-atomic@^4.0.2:
     imurmurhash "^0.1.4"
     signal-exit "^3.0.7"
 
+write-file-webpack-plugin@^4.5.1:
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/write-file-webpack-plugin/-/write-file-webpack-plugin-4.5.1.tgz#aeeb68889194da5ec8a864667d46da9e00ee92d5"
+  integrity sha512-AZ7qJUvhTCBiOtG21aFJUcNuLVo2FFM6JMGKvaUGAH+QDqQAp2iG0nq3GcuXmJOFQR2JjpjhyYkyPrbFKhdjNQ==
+  dependencies:
+    chalk "^2.4.0"
+    debug "^3.1.0"
+    filesize "^3.6.1"
+    lodash "^4.17.13"
+    mkdirp "^0.5.1"
+    moment "^2.22.1"
+    write-file-atomic "^2.3.0"
+
 ws@^8.11.0, ws@^8.4.2:
   version "8.17.1"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.17.1.tgz#9293da530bb548febc95371d90f9c878727d919b"