From 8f768e12c8b6bcd5e32343ffc1df18addb720f78 Mon Sep 17 00:00:00 2001
From: Stephanie Roy <stephanie@iterative.ai>
Date: Thu, 11 May 2023 16:00:11 -0400
Subject: [PATCH 1/2] Automatically add new icons to the icons story in
 Storybook

---
 CONTRIBUTING.md                       |   2 -
 webview/src/stories/Icons.stories.tsx | 109 ++------------------------
 2 files changed, 7 insertions(+), 104 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index f0802c8d1a..e2a1a3813f 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -112,8 +112,6 @@ If you have added any icon (custom or from codicon), you will have to run
 `yarn svgr` or `yarn install` to ensure the icon is now available in the
 codebase.
 
-You should also add any added icon to `webview/src/stories/Icons.stories.tsx`.
-
 To use an icon, import it from `webview/src/shared/components/icons` (from the
 index file, not the file itself) and use it with the `<Icon />` component
 filling its `icon` prop with your imported icon.
diff --git a/webview/src/stories/Icons.stories.tsx b/webview/src/stories/Icons.stories.tsx
index d31b181723..a59dcd93c2 100644
--- a/webview/src/stories/Icons.stories.tsx
+++ b/webview/src/stories/Icons.stories.tsx
@@ -5,33 +5,8 @@ import { IconWrapper } from './components/IconWrapper'
 import { IconsWrapper } from './components/IconsWrapper'
 import { DISABLE_CHROMATIC_SNAPSHOTS } from './util'
 import { Icon } from '../shared/components/Icon'
-import {
-  Add,
-  Check,
-  ChevronDown,
-  ChevronRight,
-  Clock,
-  Close,
-  Copy,
-  ArrowDown,
-  Ellipsis,
-  Error,
-  Filter,
-  GitCommit,
-  GitMerge,
-  GraphLine,
-  GraphScatter,
-  Gripper,
-  ListFilter,
-  PassFilled,
-  Pinned,
-  Refresh,
-  SortPrecedence,
-  StarEmpty,
-  StarFull,
-  Trash,
-  ArrowUp
-} from '../shared/components/icons'
+
+import * as Icons from '../shared/components/icons'
 
 export default {
   args: {
@@ -45,81 +20,11 @@ export default {
 const Template: StoryFn = () => {
   return (
     <IconsWrapper>
-      <IconWrapper name="Add">
-        <Icon icon={Add} />
-      </IconWrapper>
-      <IconWrapper name="Check">
-        <Icon icon={Check} />
-      </IconWrapper>
-      <IconWrapper name="ChevronDown">
-        <Icon icon={ChevronDown} />
-      </IconWrapper>
-      <IconWrapper name="ChevronRight">
-        <Icon icon={ChevronRight} />
-      </IconWrapper>
-      <IconWrapper name="Clock">
-        <Icon icon={Clock} />
-      </IconWrapper>
-      <IconWrapper name="Close">
-        <Icon icon={Close} />
-      </IconWrapper>
-      <IconWrapper name="Copy">
-        <Icon icon={Copy} />
-      </IconWrapper>
-      <IconWrapper name="Ellipsis">
-        <Icon icon={Ellipsis} />
-      </IconWrapper>
-      <IconWrapper name="ArrowDown">
-        <Icon icon={ArrowDown} />
-      </IconWrapper>
-      <IconWrapper name="Error">
-        <Icon icon={Error} />
-      </IconWrapper>
-      <IconWrapper name="Filter">
-        <Icon icon={Filter} />
-      </IconWrapper>
-      <IconWrapper name="GitCommit">
-        <Icon icon={GitCommit} />
-      </IconWrapper>
-      <IconWrapper name="GitMerge">
-        <Icon icon={GitMerge} />
-      </IconWrapper>
-      <IconWrapper name="GraphLine">
-        <Icon icon={GraphLine} />
-      </IconWrapper>
-      <IconWrapper name="GraphScatter">
-        <Icon icon={GraphScatter} />
-      </IconWrapper>
-      <IconWrapper name="Gripper">
-        <Icon icon={Gripper} />
-      </IconWrapper>
-      <IconWrapper name="ListFilter">
-        <Icon icon={ListFilter} />
-      </IconWrapper>
-      <IconWrapper name="PassFilled">
-        <Icon icon={PassFilled} />
-      </IconWrapper>
-      <IconWrapper name="Pinned">
-        <Icon icon={Pinned} />
-      </IconWrapper>
-      <IconWrapper name="Refresh">
-        <Icon icon={Refresh} />
-      </IconWrapper>
-      <IconWrapper name="SortPrecedence">
-        <Icon icon={SortPrecedence} />
-      </IconWrapper>
-      <IconWrapper name="StarEmpty">
-        <Icon icon={StarEmpty} />
-      </IconWrapper>
-      <IconWrapper name="StarFull">
-        <Icon icon={StarFull} />
-      </IconWrapper>
-      <IconWrapper name="Trash">
-        <Icon icon={Trash} />
-      </IconWrapper>
-      <IconWrapper name="ArrowUp">
-        <Icon icon={ArrowUp} />
-      </IconWrapper>
+      {Object.values(Icons).map(IconComponent => (
+        <IconWrapper key={IconComponent.name} name={IconComponent.name}>
+          <Icon icon={IconComponent} />
+        </IconWrapper>
+      ))}
     </IconsWrapper>
   )
 }

From c7524b9c9225f2295ebbc0367a8ad6c269574738 Mon Sep 17 00:00:00 2001
From: Stephanie Roy <sroy3@users.noreply.github.com>
Date: Fri, 12 May 2023 10:27:32 -0400
Subject: [PATCH 2/2] Add available codicons to Storybook (#3874)

---
 webview/src/stories/Icons.stories.tsx | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/webview/src/stories/Icons.stories.tsx b/webview/src/stories/Icons.stories.tsx
index a59dcd93c2..bfbe196674 100644
--- a/webview/src/stories/Icons.stories.tsx
+++ b/webview/src/stories/Icons.stories.tsx
@@ -19,13 +19,24 @@ export default {
 
 const Template: StoryFn = () => {
   return (
-    <IconsWrapper>
-      {Object.values(Icons).map(IconComponent => (
-        <IconWrapper key={IconComponent.name} name={IconComponent.name}>
-          <Icon icon={IconComponent} />
-        </IconWrapper>
-      ))}
-    </IconsWrapper>
+    <>
+      <IconsWrapper>
+        {Object.values(Icons).map(IconComponent => (
+          <IconWrapper key={IconComponent.name} name={IconComponent.name}>
+            <Icon icon={IconComponent} />
+          </IconWrapper>
+        ))}
+      </IconsWrapper>
+      <p>
+        <a href="https://microsoft.github.io/vscode-codicons/dist/codicon.html">
+          Other icons that can be added
+        </a>
+      </p>
+      <p>
+        Copy the icon name, add it to `codicons` constant in
+        `webview/icons/generate.mjs` and run `yarn svgr`.
+      </p>
+    </>
   )
 }