From 11ac08780edda0f58bbe6be69dc7a26073cd9776 Mon Sep 17 00:00:00 2001 From: Isaac Hellendag <2823852+hellendag@users.noreply.github.com> Date: Fri, 13 Sep 2024 09:40:11 -0500 Subject: [PATCH] [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 https://github.com/dagster-io/internal/pull/11507. ## How I Tested These Changes TS in both internal and OSS. ## Changelog NOCHANGELOG --- .../packages/ui-core/src/graph/OpTags.tsx | 182 +++++++++++++++++- .../ui-core/src/insights/InsightsIcon.tsx | 4 +- .../ui-core/src/search/SearchResults.tsx | 4 +- 3 files changed, 181 insertions(+), 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 index 72cf1641a2ad4..f3df383984bd5 100644 --- 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 = { +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 = { jupyter: { icon: jupyter, content: 'jupyter', @@ -889,7 +1059,8 @@ export const OpTags = React.memo(({tags, style, reduceColor, reduceText}: OpTags return ( {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 ( 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 index 44a2512411adc..8e22a68568e73 100644 --- 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 index 7e14a3c43eec5..e02e86636377b 100644 --- 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,7 +132,7 @@ 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 = ; icons.push(computeKindSearchIcon); @@ -140,7 +140,7 @@ function buildSearchIcons(item: SearchResult, isHighlight: boolean): JSX.Element } if (item.type === AssetFilterSearchResultType.Kind) { - if (KNOWN_TAGS[item.label]) { + if (KNOWN_TAGS.hasOwnProperty(item.label)) { const kindSearchIcon = ; icons.push(kindSearchIcon);