[ui] Repair Polars logo for dark mode (dagster-io#21341)

## Summary & Motivation Resolves dagster-io#19261. Added an OpTags storybook example to show all of the possible tags. <img width="842" alt="Screenshot 2024-04-22 at 14 25 36" src="https://github.com/dagster-io/dagster/assets/2823852/76d42513-288a-466c-9a59-92d29f7d21c9"> <img width="847" alt="Screenshot 2024-04-22 at 14 25 29" src="https://github.com/dagster-io/dagster/assets/2823852/843e1e41-0094-4b12-84c5-4fdaadf88fbc"> ## How I Tested These Changes yarn storybook, switch between light/dark.
nikomancy · May 1, 2024 · 2935842 · 2935842
1 parent 412e34c
commit 2935842
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 6 deletions.
diff --git a/js_modules/dagster-ui/packages/ui-core/src/graph/OpTags.tsx b/js_modules/dagster-ui/packages/ui-core/src/graph/OpTags.tsx
@@ -94,7 +94,14 @@ interface OpTagsProps {
   reversed?: boolean;
 }
 
-export const KNOWN_TAGS = {
+type KnownTag = {
+  color: string | null;
+  icon?: StaticImageData | string;
+  content: string;
+  reversed?: boolean;
+};
+
+export const KNOWN_TAGS: Record<string, KnownTag> = {
   jupyter: {
     color: '#929292',
     icon: jupyter,
@@ -412,6 +419,7 @@ export const KNOWN_TAGS = {
     color: '#24292E',
     icon: polars,
     content: 'Polars',
+    reversed: true,
   },
   catboost: {
     color: null,
@@ -577,6 +585,15 @@ export const AssetComputeKindTag = ({
   );
 };
 
+export const extractIconSrc = (knownTag: KnownTag | undefined) => {
+  // Storybook imports SVGs are string but nextjs imports them as object.
+  // This is a temporary work around until we can get storybook to import them the same way as nextjs
+  if (typeof knownTag?.icon !== 'undefined') {
+    return typeof knownTag.icon === 'string' ? (knownTag.icon as any) : knownTag.icon?.src;
+  }
+  return '';
+};
+
 export const OpTags = React.memo(({tags, style, reduceColor, reduceText}: OpTagsProps) => {
   return (
     <OpTagsContainer style={style}>
@@ -587,6 +604,7 @@ export const OpTags = React.memo(({tags, style, reduceColor, reduceText}: OpTags
         // This is useful when the icon requires mulltiple colors. like Airflow.
         const color = known?.color || null;
         const reversed = known && 'reversed' in known ? known.reversed : false;
+
         return (
           <Box
             key={tag.label}
@@ -602,7 +620,7 @@ export const OpTags = React.memo(({tags, style, reduceColor, reduceText}: OpTags
               <OpTagIconWrapper
                 role="img"
                 $size={16}
-                $img={known.icon.src}
+                $img={extractIconSrc(known)}
                 $color={reversed ? Colors.accentPrimary() : color}
                 $rotation={null}
                 aria-label={tag.label}
@@ -625,7 +643,7 @@ export const TagIcon = React.memo(({label}: {label: string}) => {
       <OpTagIconWrapper
         role="img"
         $size={16}
-        $img={known.icon.src}
+        $img={extractIconSrc(known)}
         $color={reversed ? Colors.accentPrimary() : color}
         $rotation={null}
         aria-label={label}

diff --git a/js_modules/dagster-ui/packages/ui-core/src/graph/__stories__/OpTags.stories.tsx b/js_modules/dagster-ui/packages/ui-core/src/graph/__stories__/OpTags.stories.tsx
@@ -0,0 +1,18 @@
+import {Meta} from '@storybook/react';
+
+import {IOpTag, KNOWN_TAGS, OpTags} from '../OpTags';
+
+// eslint-disable-next-line import/no-default-export
+export default {
+  title: 'OpTags',
+  component: OpTags,
+} as Meta;
+
+export const AllTags = () => {
+  const tags: IOpTag[] = Object.keys(KNOWN_TAGS).map((label) => ({label, onClick: () => {}}));
+  return (
+    <div style={{height: '600px', position: 'relative'}}>
+      <OpTags tags={tags} style={{flexWrap: 'wrap'}} />
+    </div>
+  );
+};
diff --git a/js_modules/dagster-ui/packages/ui-core/src/insights/InsightsIcon.tsx b/js_modules/dagster-ui/packages/ui-core/src/insights/InsightsIcon.tsx
@@ -1,7 +1,7 @@
 // eslint-disable-next-line no-restricted-imports
 import {Colors, Icon, IconName, IconNames, IconWrapper} from '@dagster-io/ui-components';
 
-import {KNOWN_TAGS} from '../graph/OpTags';
+import {KNOWN_TAGS, extractIconSrc} from '../graph/OpTags';
 
 type IntegrationIconName = keyof typeof KNOWN_TAGS;
 export type InsightsIconType = IconName | IntegrationIconName;
@@ -17,12 +17,11 @@ export const InsightsIcon = (props: InsightsIconProps) => {
     return <Icon name={name as IconName} style={{marginLeft: 0}} color={color} />;
   } else {
     const known = KNOWN_TAGS[props.name as IntegrationIconName];
-    const src = 'icon' in known ? known.icon.src : '';
     return (
       <IconWrapper
         role="img"
         $size={16}
-        $img={src}
+        $img={extractIconSrc(known)}
         $color={color}
         $rotation={null}
         style={{marginLeft: 0}}