Update next-image types and fix image imports (#15921)

Images are now imported as objects with a src attribute.

Test Plan
yarn ts

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;
+}

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: `
     {

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;
 }
 

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"]
 }

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;
+}

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

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"]
 }

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>
         );
       })}