[ui] Some changes to icon types for Plus (#24471)

## Summary & Motivation Made a few changes to how the types are defined for insights icons to try to add a bit more strictness. Counterpart to dagster-io/internal#11507. ## How I Tested These Changes TS in both internal and OSS. ## Changelog NOCHANGELOG
dagster-io · Sep 13, 2024 · 11ac087 · 11ac087 · github-actions · Sep 13, 2024
1 parent f4cff85
commit 11ac087
Show file tree

Hide file tree

Showing 3 changed files with 181 additions and 9 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
@@ -174,7 +174,177 @@ type KnownTag = {
   blackAndWhite?: boolean;
 };
 
-export const KNOWN_TAGS: Record<string, KnownTag> = {
+export type KnownTagType =
+  | 'jupyter'
+  | 'ipynb'
+  | 'noteable'
+  | 'airbyte'
+  | 'sling'
+  | 'snowflake'
+  | 'snowpark'
+  | 'python'
+  | 'fivetran'
+  | 'dbt'
+  | 'slack'
+  | 'pytorch'
+  | 'pyspark'
+  | 'spark'
+  | 'duckdb'
+  | 'tensorflow'
+  | 'pandas'
+  | 'googlesheets'
+  | 'sql'
+  | 'wandb'
+  | 'databricks'
+  | 'airflow'
+  | 'airtable'
+  | 'omni'
+  | 'datadog'
+  | 'postgres'
+  | 'postgresql'
+  | 'stripe'
+  | 'hightouch'
+  | 'census'
+  | 'hex'
+  | 'azure'
+  | 'azureml'
+  | 'sagemaker'
+  | 'bigquery'
+  | 'teams'
+  | 'mlflow'
+  | 'mysql'
+  | 'greatexpectations'
+  | 'powerbi'
+  | 'gcp'
+  | 'googlecloud'
+  | 'looker'
+  | 'tableau'
+  | 'segment'
+  | 'athena'
+  | 's3'
+  | 'aws'
+  | 'stitch'
+  | 'openai'
+  | 'vercel'
+  | 'github'
+  | 'gitlab'
+  | 'plotly'
+  | 'modal'
+  | 'meltano'
+  | 'matplotlib'
+  | 'numpy'
+  | 'scipy'
+  | 'scikitlearn'
+  | 'kubernetes'
+  | 'k8s'
+  | 'polars'
+  | 'catboost'
+  | 'rust'
+  | 'pytorchlightning'
+  | 'deltalake'
+  | 'parquet'
+  | 'lightgbm'
+  | 'xgboost'
+  | 'rockset'
+  | 'optuna'
+  | 'chalk'
+  | 'excel'
+  | 'ray'
+  | 'axioma'
+  | 'cube'
+  | 'metabase'
+  | 'linear'
+  | 'notion'
+  | 'hackernewsapi'
+  | 'hackernews'
+  | 'tecton'
+  | 'dask'
+  | 'dlt'
+  | 'dlthub'
+  | 'huggingface'
+  | 'huggingfaceapi'
+  | 'sqlserver'
+  | 'mongodb'
+  | 'atlan'
+  | 'celery'
+  | 'claude'
+  | 'collibra'
+  | 'datahub'
+  | 'discord'
+  | 'docker'
+  | 'facebook'
+  | 'gemini'
+  | 'google'
+  | 'graphql'
+  | 'hashicorp'
+  | 'hudi'
+  | 'iceberg'
+  | 'instagram'
+  | 'lakefs'
+  | 'linkedin'
+  | 'llama'
+  | 'meta'
+  | 'microsoft'
+  | 'minstral'
+  | 'montecarlo'
+  | 'openmetadata'
+  | 'oracle'
+  | 'pagerduty'
+  | 'pandera'
+  | 'papermill'
+  | 'papertrail'
+  | 'plural'
+  | 'prefect'
+  | 'react'
+  | 'reddit'
+  | 'redshift'
+  | 'salesforce'
+  | 'sdf'
+  | 'secoda'
+  | 'shell'
+  | 'shopify'
+  | 'soda'
+  | 'sqlite'
+  | 'sqlmesh'
+  | 'stepfuncitons'
+  | 'awsstepfuncitons'
+  | 'awssetepfunciton'
+  | 'setepfunciton'
+  | 'thoughtspot'
+  | 'trino'
+  | 'twilio'
+  | 'twitter'
+  | 'x'
+  | 'youtube'
+  | 'typescript'
+  | 'javascript'
+  | 'scala'
+  | 'csharp'
+  | 'cplus'
+  | 'cplusplus'
+  | 'java'
+  | 'go'
+  | 'r'
+  | 'net'
+  | 'sharepoint'
+  | 'table'
+  | 'view'
+  | 'dag'
+  | 'task'
+  | 'source'
+  | 'seed'
+  | 'file'
+  | 'dashboard'
+  | 'notebook'
+  | 'csv'
+  | 'pdf'
+  | 'yaml'
+  | 'gold'
+  | 'silver'
+  | 'bronze'
+  | 'expand';
+
+export const KNOWN_TAGS: Record<KnownTagType, KnownTag> = {
   jupyter: {
     icon: jupyter,
     content: 'jupyter',
@@ -889,7 +1059,8 @@ export const OpTags = React.memo(({tags, style, reduceColor, reduceText}: OpTags
   return (
     <OpTagsContainer style={style}>
       {tags.map((tag) => {
-        const known = KNOWN_TAGS[coerceToStandardLabel(tag.label) as keyof typeof KNOWN_TAGS];
+        const known = KNOWN_TAGS[coerceToStandardLabel(tag.label) as KnownTagType];
+        const blackAndWhite = known && 'blackAndWhite' in known && known.blackAndWhite;
         const text = known?.content || tag.label;
 
         return (
@@ -908,7 +1079,7 @@ export const OpTags = React.memo(({tags, style, reduceColor, reduceText}: OpTags
                 role="img"
                 $size={16}
                 $img={extractIconSrc(known)}
-                $color={known.blackAndWhite ? Colors.accentPrimary() : null}
+                $color={blackAndWhite ? Colors.accentPrimary() : null}
                 $rotation={null}
                 aria-label={tag.label}
               />
@@ -922,14 +1093,15 @@ export const OpTags = React.memo(({tags, style, reduceColor, reduceText}: OpTags
 });
 
 export const TagIcon = React.memo(({label}: {label: string}) => {
-  const known = KNOWN_TAGS[coerceToStandardLabel(label) as keyof typeof KNOWN_TAGS];
+  const known = KNOWN_TAGS[coerceToStandardLabel(label) as KnownTagType];
+  const blackAndWhite = known && 'blackAndWhite' in known && known.blackAndWhite;
   if (known && 'icon' in known) {
     return (
       <OpTagIconWrapper
         role="img"
         $size={16}
         $img={extractIconSrc(known)}
-        $color={known.blackAndWhite ? Colors.accentPrimary() : null}
+        $color={blackAndWhite ? Colors.accentPrimary() : null}
         $rotation={null}
         aria-label={label}
       />

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,9 +1,9 @@
 // eslint-disable-next-line no-restricted-imports
 import {Colors, Icon, IconName, IconNames, IconWrapper} from '@dagster-io/ui-components';
 
-import {KNOWN_TAGS, extractIconSrc} from '../graph/OpTags';
+import {KNOWN_TAGS, KnownTagType, extractIconSrc} from '../graph/OpTags';
 
-type IntegrationIconName = keyof typeof KNOWN_TAGS;
+type IntegrationIconName = KnownTagType;
 export type InsightsIconType = IconName | IntegrationIconName;
 
 interface InsightsIconProps {

diff --git a/js_modules/dagster-ui/packages/ui-core/src/search/SearchResults.tsx b/js_modules/dagster-ui/packages/ui-core/src/search/SearchResults.tsx
@@ -132,15 +132,15 @@ function buildSearchIcons(item: SearchResult, isHighlight: boolean): JSX.Element
 
   if (item.type === SearchResultType.Asset) {
     const computeKindTag = item.tags?.find(isCanonicalComputeKindTag);
-    if (computeKindTag && KNOWN_TAGS[computeKindTag.value]) {
+    if (computeKindTag && KNOWN_TAGS.hasOwnProperty(computeKindTag.value)) {
       const computeKindSearchIcon = <TagIcon label={computeKindTag.value} />;
 
       icons.push(computeKindSearchIcon);
     }
   }
 
   if (item.type === AssetFilterSearchResultType.Kind) {
-    if (KNOWN_TAGS[item.label]) {
+    if (KNOWN_TAGS.hasOwnProperty(item.label)) {
       const kindSearchIcon = <TagIcon label={item.label} />;
 
       icons.push(kindSearchIcon);