From 47735b72f245798fd5de462065dff4d4d615cb1e Mon Sep 17 00:00:00 2001
From: Marco polo <salazarm@users.noreply.github.com>
Date: Fri, 18 Aug 2023 10:40:51 -0400
Subject: [PATCH] Update next-image types and fix image imports  (#15921)

Images are now imported as objects with a src attribute.

Test Plan
yarn ts
---
 .../packages/app-oss/custom-next-env.d.ts     | 49 +++++++++++++
 .../packages/app-oss/src/pages/_document.tsx  |  2 +
 .../packages/app-oss/src/react-app-env.d.ts   | 72 -------------------
 .../packages/app-oss/src/typings.d.ts         | 13 ++--
 .../dagster-ui/packages/app-oss/tsconfig.json |  4 +-
 .../ui-components/custom-next-env.d.ts        | 49 +++++++++++++
 .../ui-components/src/components/Icon.tsx     | 19 +----
 .../packages/ui-components/src/types/svg.d.ts |  5 --
 .../packages/ui-components/tsconfig.json      |  2 +-
 .../packages/ui-core/src/graph/OpTags.tsx     | 12 ++--
 .../dagster-ui/packages/ui-core/typings.d.ts  | 65 +++++++++++++----
 11 files changed, 164 insertions(+), 128 deletions(-)
 create mode 100644 js_modules/dagster-ui/packages/app-oss/custom-next-env.d.ts
 delete mode 100644 js_modules/dagster-ui/packages/app-oss/src/react-app-env.d.ts
 create mode 100644 js_modules/dagster-ui/packages/ui-components/custom-next-env.d.ts
 delete mode 100644 js_modules/dagster-ui/packages/ui-components/src/types/svg.d.ts

diff --git a/js_modules/dagster-ui/packages/app-oss/custom-next-env.d.ts b/js_modules/dagster-ui/packages/app-oss/custom-next-env.d.ts
new file mode 100644
index 0000000000000..03ccc583d0c44
--- /dev/null
+++ b/js_modules/dagster-ui/packages/app-oss/custom-next-env.d.ts
@@ -0,0 +1,49 @@
+/* eslint-disable import/no-default-export */
+/// <reference types="next" />
+
+type StaticImageData = {
+  src: string;
+  height: number;
+  width: number;
+  placeholder?: string;
+};
+
+declare module '*.svg' {
+  const content: StaticImageData;
+  export default content;
+}
+
+declare module '*.jpg' {
+  const content: StaticImageData;
+  export default content;
+}
+
+declare module '*.jpeg' {
+  const content: StaticImageData;
+  export default content;
+}
+
+declare module '*.gif' {
+  const content: StaticImageData;
+  export default content;
+}
+
+declare module '*.webp' {
+  const content: StaticImageData;
+  export default content;
+}
+
+declare module '*.ico' {
+  const content: StaticImageData;
+  export default content;
+}
+
+declare module '*.bmp' {
+  const content: StaticImageData;
+  export default content;
+}
+
+declare module '*.avif' {
+  const content: StaticImageData;
+  export default content;
+}
diff --git a/js_modules/dagster-ui/packages/app-oss/src/pages/_document.tsx b/js_modules/dagster-ui/packages/app-oss/src/pages/_document.tsx
index e8ec79b09d44a..d2c201eebccb1 100644
--- a/js_modules/dagster-ui/packages/app-oss/src/pages/_document.tsx
+++ b/js_modules/dagster-ui/packages/app-oss/src/pages/_document.tsx
@@ -17,12 +17,14 @@ export default function Document() {
         {/* Not sure if we need the following script */}
         <script
           id="webpack-nonce-setter"
+          nonce="NONCE-PLACEHOLDER"
           dangerouslySetInnerHTML={{__html: `__webpack_nonce__ = 'NONCE-PLACEHOLDER';`}}
         />
         {isDev ? <meta httpEquiv="Content-Security-Policy" content={getSecurityPolicy()} /> : null}
         <script
           type="application/json"
           id="initialization-data"
+          nonce="NONCE-PLACEHOLDER"
           dangerouslySetInnerHTML={{
             __html: `
     {
diff --git a/js_modules/dagster-ui/packages/app-oss/src/react-app-env.d.ts b/js_modules/dagster-ui/packages/app-oss/src/react-app-env.d.ts
deleted file mode 100644
index 6732a31ec9a94..0000000000000
--- a/js_modules/dagster-ui/packages/app-oss/src/react-app-env.d.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-/// <reference types="node" />
-/// <reference types="react-dom" />
-
-/* eslint-disable import/no-default-export */
-
-declare namespace NodeJS {
-  interface ProcessEnv {
-    readonly NODE_ENV: 'development' | 'production' | 'test';
-    readonly PUBLIC_URL: string;
-  }
-}
-
-declare module '*.avif' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.bmp' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.gif' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.jpg' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.jpeg' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.png' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.webp' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.svg' {
-  import * as React from 'react';
-
-  export const ReactComponent: React.FunctionComponent<
-    React.SVGProps<SVGSVGElement> & {title?: string}
-  >;
-
-  const src: string;
-  export default src;
-}
-
-declare module '*.module.css' {
-  const classes: {readonly [key: string]: string};
-  export default classes;
-}
-
-declare module '*.module.scss' {
-  const classes: {readonly [key: string]: string};
-  export default classes;
-}
-
-declare module '*.module.sass' {
-  const classes: {readonly [key: string]: string};
-  export default classes;
-}
diff --git a/js_modules/dagster-ui/packages/app-oss/src/typings.d.ts b/js_modules/dagster-ui/packages/app-oss/src/typings.d.ts
index 84adcc6fc8158..404adea633ef0 100644
--- a/js_modules/dagster-ui/packages/app-oss/src/typings.d.ts
+++ b/js_modules/dagster-ui/packages/app-oss/src/typings.d.ts
@@ -1,3 +1,7 @@
+/* eslint-disable import/no-default-export */
+
+/// <reference types="next" />
+
 declare module '@vx/gradient';
 declare module '@vx/group';
 declare module '@vx/network';
@@ -26,28 +30,19 @@ interface Navigator extends NavigatorClipboard {}
 
 declare module '*.json' {
   const value: any;
-  // eslint-disable-next-line import/no-default-export
   export default value;
 }
 
 declare module '*.mp4' {
   const src: string;
-  // eslint-disable-next-line import/no-default-export
   export default src;
 }
 
-declare module '*.svg' {
-  const content: any;
-  // eslint-disable-next-line import/no-default-export
-  export default content;
-}
-
 declare module 'worker-loader!*' {
   class WebpackWorker extends Worker {
     constructor();
   }
 
-  // eslint-disable-next-line import/no-default-export
   export default WebpackWorker;
 }
 
diff --git a/js_modules/dagster-ui/packages/app-oss/tsconfig.json b/js_modules/dagster-ui/packages/app-oss/tsconfig.json
index 7cc5b281bdf7d..b6eb020ede920 100644
--- a/js_modules/dagster-ui/packages/app-oss/tsconfig.json
+++ b/js_modules/dagster-ui/packages/app-oss/tsconfig.json
@@ -26,6 +26,6 @@
     "lib": ["dom", "dom.iterable", "esnext"],
     "incremental": true
   },
-  "include": ["src", "next.config.js"],
-  "exclude": ["node_modules"]
+  "include": ["src", "custom-next-env.d.ts"],
+  "exclude": ["node_modules", "next-env.d.ts"]
 }
diff --git a/js_modules/dagster-ui/packages/ui-components/custom-next-env.d.ts b/js_modules/dagster-ui/packages/ui-components/custom-next-env.d.ts
new file mode 100644
index 0000000000000..03ccc583d0c44
--- /dev/null
+++ b/js_modules/dagster-ui/packages/ui-components/custom-next-env.d.ts
@@ -0,0 +1,49 @@
+/* eslint-disable import/no-default-export */
+/// <reference types="next" />
+
+type StaticImageData = {
+  src: string;
+  height: number;
+  width: number;
+  placeholder?: string;
+};
+
+declare module '*.svg' {
+  const content: StaticImageData;
+  export default content;
+}
+
+declare module '*.jpg' {
+  const content: StaticImageData;
+  export default content;
+}
+
+declare module '*.jpeg' {
+  const content: StaticImageData;
+  export default content;
+}
+
+declare module '*.gif' {
+  const content: StaticImageData;
+  export default content;
+}
+
+declare module '*.webp' {
+  const content: StaticImageData;
+  export default content;
+}
+
+declare module '*.ico' {
+  const content: StaticImageData;
+  export default content;
+}
+
+declare module '*.bmp' {
+  const content: StaticImageData;
+  export default content;
+}
+
+declare module '*.avif' {
+  const content: StaticImageData;
+  export default content;
+}
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx
index 4660e509e8f23..458fcb4b53dac 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx
@@ -310,19 +310,6 @@ export const Icons = {
   zoom_out,
 } as const;
 
-// TODO: Find more elegant solution
-const copy: any = Icons;
-Object.keys(copy).forEach((key) => {
-  let img = copy[key];
-  if (typeof img === 'object' && 'default' in img) {
-    // in Dagster UI but not in Storybook due to webpack config differences
-    img = (img as {default: any}).default;
-  } else if (img.src) {
-    img = img.src;
-  }
-  copy[key] = img;
-});
-
 const SVGS_WITH_COLORS = new Set([(slack as any).src]);
 
 export type IconName = keyof typeof Icons;
@@ -342,11 +329,7 @@ interface Props {
 
 export const Icon = React.memo((props: Props) => {
   const {name, size = 16, style} = props;
-  let img = Icons[name] || '';
-  if (typeof img === 'object' && 'default' in img) {
-    // in Dagster UI but not in Storybook due to webpack config differences
-    img = (img as {default: any}).default;
-  }
+  const img = Icons[name].src || '';
   const color: string | null = props.color || (SVGS_WITH_COLORS.has(img) ? null : Colors.Dark);
   return (
     <IconWrapper
diff --git a/js_modules/dagster-ui/packages/ui-components/src/types/svg.d.ts b/js_modules/dagster-ui/packages/ui-components/src/types/svg.d.ts
deleted file mode 100644
index 1b21410568ca6..0000000000000
--- a/js_modules/dagster-ui/packages/ui-components/src/types/svg.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-declare module '*.svg' {
-  const content: any;
-  // eslint-disable-next-line import/no-default-export
-  export default content;
-}
diff --git a/js_modules/dagster-ui/packages/ui-components/tsconfig.json b/js_modules/dagster-ui/packages/ui-components/tsconfig.json
index 37381e09b9324..a3432bec52442 100644
--- a/js_modules/dagster-ui/packages/ui-components/tsconfig.json
+++ b/js_modules/dagster-ui/packages/ui-components/tsconfig.json
@@ -22,5 +22,5 @@
     "noFallthroughCasesInSwitch": true
   },
   "exclude": ["node_modules", "lib"],
-  "include": ["src", "types"]
+  "include": ["src", "custom-next-env.d.ts"]
 }
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 1fb22a524da3d..addbc1a43de7c 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
@@ -416,10 +416,10 @@ export const OpTags = React.memo(({tags, style, reduceColor, reduceText}: OpTags
   return (
     <OpTagsContainer style={style}>
       {tags.map((tag) => {
-        const known = (KNOWN_TAGS as any)[coerceToStandardLabel(tag.label)];
+        const known = KNOWN_TAGS[coerceToStandardLabel(tag.label) as keyof typeof KNOWN_TAGS];
         const text = known?.content || tag.label;
         const color = known?.color || generateColorForLabel(tag.label);
-        const textcolor = known?.reversed ? Colors.Gray900 : Colors.White;
+        const textcolor = 'reversed' in known ? Colors.Gray900 : Colors.White;
         return (
           <Box
             key={tag.label}
@@ -433,18 +433,18 @@ export const OpTags = React.memo(({tags, style, reduceColor, reduceText}: OpTags
               fontWeight: reduceColor ? 500 : 700,
             }}
           >
-            {known?.icon && (
+            {'icon' in known && (
               <OpTagIconWrapper
                 role="img"
                 $size={16}
-                $img={known?.icon}
-                $color={reduceColor ? (known?.reversed ? Colors.Gray900 : color) : textcolor}
+                $img={known.icon.src}
+                $color={reduceColor ? ('reversed' in known ? Colors.Gray900 : color) : textcolor}
                 //$color={reduceColor ? color : textcolor}
                 $rotation={null}
                 aria-label={tag.label}
               />
             )}
-            {known?.icon && reduceText ? undefined : text}
+            {'icon' in known && reduceText ? undefined : text}
           </Box>
         );
       })}
diff --git a/js_modules/dagster-ui/packages/ui-core/typings.d.ts b/js_modules/dagster-ui/packages/ui-core/typings.d.ts
index 6772e97d03ca3..a9490dd609f87 100644
--- a/js_modules/dagster-ui/packages/ui-core/typings.d.ts
+++ b/js_modules/dagster-ui/packages/ui-core/typings.d.ts
@@ -1,26 +1,15 @@
+/* eslint-disable import/no-default-export */
+/// <reference types="next" />
+
 declare module '@vx/shape';
 
 declare module '*.json' {
   const value: any;
-  // eslint-disable-next-line import/no-default-export
   export default value;
 }
 
-declare module '*.png' {
-  const value: string;
-  // eslint-disable-next-line import/no-default-export
-  export default value;
-}
-
-declare module '*.svg' {
-  const content: any;
-  // eslint-disable-next-line import/no-default-export
-  export default content;
-}
-
 declare module '*.mp4' {
   const src: string;
-  // eslint-disable-next-line import/no-default-export
   export default src;
 }
 
@@ -29,7 +18,6 @@ declare module 'worker-loader!*' {
     constructor();
   }
 
-  // eslint-disable-next-line import/no-default-export
   export default WebpackWorker;
 }
 
@@ -44,3 +32,50 @@ declare namespace Intl {
     timeZones: string[];
   }
 }
+
+type StaticImageData = {
+  src: string;
+  height: number;
+  width: number;
+  placeholder?: string;
+};
+
+declare module '*.svg' {
+  const content: StaticImageData;
+  export default content;
+}
+
+declare module '*.jpg' {
+  const content: StaticImageData;
+  export default content;
+}
+
+declare module '*.jpeg' {
+  const content: StaticImageData;
+  export default content;
+}
+
+declare module '*.gif' {
+  const content: StaticImageData;
+  export default content;
+}
+
+declare module '*.webp' {
+  const content: StaticImageData;
+  export default content;
+}
+
+declare module '*.ico' {
+  const content: StaticImageData;
+  export default content;
+}
+
+declare module '*.bmp' {
+  const content: StaticImageData;
+  export default content;
+}
+
+declare module '*.avif' {
+  const content: StaticImageData;
+  export default content;
+}