[ui] Update ui-components lint dep, re-run lint (#16661)

## Summary & Motivation Bump eslint-config version in `ui-components` to make the TS warning go away. Re-run lint. ## How I Tested These Changes BK
dagster-io · Sep 20, 2023 · 0adef1b · 0adef1b · github-actions · Sep 20, 2023
1 parent 87f9b90
commit 0adef1b
Show file tree

Hide file tree

Showing 21 changed files with 95 additions and 386 deletions.
diff --git a/js_modules/dagster-ui/packages/ui-components/package.json b/js_modules/dagster-ui/packages/ui-components/package.json
@@ -45,7 +45,7 @@
     "@babel/preset-env": "^7.16.7",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
-    "@dagster-io/eslint-config": "1.0.12",
+    "@dagster-io/eslint-config": "1.0.13",
     "@mdx-js/react": "^1.6.22",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^21.0.3",

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Box.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Box.tsx
@@ -60,11 +60,15 @@ const borderSettingToCSS = (border: BorderSide | BorderSetting) => {
       `;
     case 'top-and-bottom':
       return css`
-        box-shadow: inset 0 ${width}px ${color}, inset 0 -${width}px ${color};
+        box-shadow:
+          inset 0 ${width}px ${color},
+          inset 0 -${width}px ${color};
       `;
     case 'left-and-right':
       return css`
-        box-shadow: inset ${width}px 0 ${color}, inset -${width}px 0 ${color};
+        box-shadow:
+          inset ${width}px 0 ${color},
+          inset -${width}px 0 ${color};
       `;
     case 'top':
       return css`

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/ConfigTypeSchema.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/ConfigTypeSchema.tsx
@@ -276,9 +276,8 @@ const DictEntry = React.forwardRef(
     props: React.ComponentProps<typeof DictEntryDiv>,
     ref: React.ForwardedRef<HTMLButtonElement>,
   ) => {
-    const {hovered, onMouseEnter, onMouseLeave} = React.useContext(
-      HoveredDictEntryContext,
-    ).useDictEntryHover();
+    const {hovered, onMouseEnter, onMouseLeave} =
+      React.useContext(HoveredDictEntryContext).useDictEntryHover();
 
     return (
       <DictEntryDiv2>

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Menu.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Menu.tsx
@@ -120,7 +120,9 @@ const StyledMenuItem = styled(BlueprintMenuItem)<StyledMenuItemProps>`
   color: ${({$textColor}) => $textColor};
   line-height: 20px;
   padding: 6px 8px 6px 12px;
-  transition: background-color 50ms, box-shadow 150ms;
+  transition:
+    background-color 50ms,
+    box-shadow 150ms;
   align-items: flex-start;
   font-size: 14px;
 

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/NewConfigEditor.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/NewConfigEditor.tsx
@@ -76,14 +76,8 @@ export type ConfigEditorHandle = {
 
 export const NewConfigEditor = React.forwardRef<ConfigEditorHandle, ConfigEditorProps>(
   (props, ref) => {
-    const {
-      configCode,
-      checkConfig,
-      readOnly,
-      configSchema,
-      onConfigChange,
-      onHelpContextChange,
-    } = props;
+    const {configCode, checkConfig, readOnly, configSchema, onConfigChange, onHelpContextChange} =
+      props;
     const editor = React.useRef<CodeMirror.Editor | null>(null);
 
     React.useImperativeHandle(

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/StyledButton.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/StyledButton.tsx
@@ -23,7 +23,11 @@ export const StyledButton = styled.button<StyledButtonProps>`
   font-size: 14px;
   line-height: 20px;
   padding: 6px 12px;
-  transition: background 100ms, box-shadow 150ms, filter 100ms, opacity 150ms;
+  transition:
+    background 100ms,
+    box-shadow 150ms,
+    filter 100ms,
+    opacity 150ms;
   user-select: none;
   white-space: nowrap;
 

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/SubwayDot.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/SubwayDot.tsx
@@ -84,7 +84,9 @@ const Blob = styled.div<BlobProps>`
   justify-content: center;
   outline: none;
   text-transform: uppercase;
-  transition: background 50ms linear, color 50ms linear;
+  transition:
+    background 50ms linear,
+    color 50ms linear;
   user-select: none;
   width: ${({$blobSize}) => `${$blobSize}px`};
 

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Table.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Table.tsx
@@ -16,7 +16,9 @@ export const Table = styled(HTMLTable)<TableProps>`
 
   & tr th,
   & tr td {
-    box-shadow: inset 0 1px 0 ${Colors.KeylineGray}, inset 1px 0 0 ${Colors.KeylineGray} !important;
+    box-shadow:
+      inset 0 1px 0 ${Colors.KeylineGray},
+      inset 1px 0 0 ${Colors.KeylineGray} !important;
   }
 
   & tr th {
@@ -47,7 +49,9 @@ export const Table = styled(HTMLTable)<TableProps>`
   }
 
   & tr:last-child td {
-    box-shadow: inset 0 1px 0 ${Colors.KeylineGray}, inset 1px 0 0 ${Colors.KeylineGray},
+    box-shadow:
+      inset 0 1px 0 ${Colors.KeylineGray},
+      inset 1px 0 0 ${Colors.KeylineGray},
       inset 0 -1px 0 ${Colors.KeylineGray} !important;
   }
 

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/TextInput.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/TextInput.tsx
@@ -85,7 +85,9 @@ const RightContainer = styled.div`
 export const TextInputStyles = css`
   border: none;
   border-radius: 8px;
-  box-shadow: ${Colors.Gray300} inset 0px 0px 0px 1px, ${Colors.KeylineGray} inset 2px 2px 1.5px;
+  box-shadow:
+    ${Colors.Gray300} inset 0px 0px 0px 1px,
+    ${Colors.KeylineGray} inset 2px 2px 1.5px;
   flex-grow: 1;
   font-size: 14px;
   line-height: 20px;
@@ -94,7 +96,9 @@ export const TextInputStyles = css`
   transition: box-shadow 150ms;
 
   :disabled {
-    box-shadow: ${Colors.Gray200} inset 0px 0px 0px 1px, ${Colors.KeylineGray} inset 2px 2px 1.5px;
+    box-shadow:
+      ${Colors.Gray200} inset 0px 0px 0px 1px,
+      ${Colors.KeylineGray} inset 2px 2px 1.5px;
     background-color: ${Colors.Gray50};
     color: ${Colors.Gray400};
   }
@@ -104,7 +108,9 @@ export const TextInputStyles = css`
   }
 
   :focus {
-    box-shadow: ${Colors.Gray300} inset 0px 0px 0px 1px, ${Colors.KeylineGray} inset 2px 2px 1.5px,
+    box-shadow:
+      ${Colors.Gray300} inset 0px 0px 0px 1px,
+      ${Colors.KeylineGray} inset 2px 2px 1.5px,
       rgba(58, 151, 212, 0.6) 0 0 0 3px;
     outline: none;
   }
@@ -133,8 +139,10 @@ const StyledInput = styled.input<StyledInputProps>`
   padding: ${({$hasIcon}) => ($hasIcon ? '6px 6px 6px 28px' : '6px 6px 6px 12px')};
 
   :focus {
-    box-shadow: ${({$strokeColor}) => $strokeColor} inset 0px 0px 0px 1px,
-      ${Colors.KeylineGray} inset 2px 2px 1.5px, rgba(58, 151, 212, 0.6) 0 0 0 3px;
+    box-shadow:
+      ${({$strokeColor}) => $strokeColor} inset 0px 0px 0px 1px,
+      ${Colors.KeylineGray} inset 2px 2px 1.5px,
+      rgba(58, 151, 212, 0.6) 0 0 0 3px;
   }
 `;
 
@@ -150,8 +158,10 @@ export const TextArea = styled.textarea<TextAreaProps>`
     ${Colors.KeylineGray} inset 2px 2px 1.5px;
 
   :focus {
-    box-shadow: ${({$strokeColor}) => $strokeColor || Colors.Gray300} inset 0px 0px 0px 1px,
-      ${Colors.KeylineGray} inset 2px 2px 1.5px, rgba(58, 151, 212, 0.6) 0 0 0 3px;
+    box-shadow:
+      ${({$strokeColor}) => $strokeColor || Colors.Gray300} inset 0px 0px 0px 1px,
+      ${Colors.KeylineGray} inset 2px 2px 1.5px,
+      rgba(58, 151, 212, 0.6) 0 0 0 3px;
   }
 
   ${({$resize}) => ($resize ? `resize: ${$resize};` : null)}

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/TokenizingField.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/TokenizingField.tsx
@@ -450,13 +450,17 @@ export const TokenizingField: React.FC<TokenizingFieldProps> = ({
 export const StyledTagInput = styled(TagInput)<{$maxWidth?: any}>`
   border: none;
   border-radius: 8px;
-  box-shadow: ${Colors.Gray300} inset 0px 0px 0px 1px, ${Colors.KeylineGray} inset 2px 2px 1.5px;
+  box-shadow:
+    ${Colors.Gray300} inset 0px 0px 0px 1px,
+    ${Colors.KeylineGray} inset 2px 2px 1.5px;
   min-width: 400px;
   max-width: ${(p) => (p.$maxWidth ? p.$maxWidth : '600px')};
   transition: box-shadow 150ms;
 
   &.bp4-active {
-    box-shadow: ${Colors.Gray300} inset 0px 0px 0px 1px, ${Colors.KeylineGray} inset 2px 2px 1.5px,
+    box-shadow:
+      ${Colors.Gray300} inset 0px 0px 0px 1px,
+      ${Colors.KeylineGray} inset 2px 2px 1.5px,
       rgba(58, 151, 212, 0.6) 0 0 0 3px;
   }
 

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/UnstyledButton.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/UnstyledButton.tsx
@@ -12,7 +12,9 @@ export const UnstyledButton = styled.button<Props>`
   cursor: pointer;
   padding: 0;
   text-align: start;
-  transition: box-shadow 150ms, opacity 150ms;
+  transition:
+    box-shadow 150ms,
+    opacity 150ms;
   user-select: none;
   white-space: nowrap;
 

diff --git a/...es/dagster-ui/packages/ui-components/src/components/configeditor/codemirror-yaml/mode.tsx b/...es/dagster-ui/packages/ui-components/src/components/configeditor/codemirror-yaml/mode.tsx
@@ -343,14 +343,8 @@ const registerYamlHint = () => {
         schema?: ConfigSchema;
       },
     ): {list: Array<CodemirrorHint>; from: CodemirrorLocation; to: CodemirrorLocation} => {
-      const {
-        cursor,
-        context,
-        token,
-        start,
-        searchString,
-        prevToken,
-      } = expandAutocompletionContextAtCursor(editor);
+      const {cursor, context, token, start, searchString, prevToken} =
+        expandAutocompletionContextAtCursor(editor);
 
       const from = {line: cursor.line, ch: start};
       const to = {line: cursor.line, ch: token.end};

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/useSuggestionsForString.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/useSuggestionsForString.tsx
@@ -7,10 +7,10 @@ export const useSuggestionsForString = (
   const tokens = value.toLocaleLowerCase().trim().split(/\s+/);
   const queryString = tokens[tokens.length - 1] || '';
 
-  const suggestions = React.useMemo(() => buildSuggestions(queryString), [
-    buildSuggestions,
-    queryString,
-  ]);
+  const suggestions = React.useMemo(
+    () => buildSuggestions(queryString),
+    [buildSuggestions, queryString],
+  );
 
   const onSelectSuggestion = React.useCallback(
     (suggestion: string) => {

diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/SidebarAssetInfo.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/SidebarAssetInfo.tsx
@@ -245,6 +245,7 @@ const SIDEBAR_ASSET_FRAGMENT = gql`
     autoMaterializePolicy {
       policyType
       rules {
+        className
         decisionType
         description
       }

diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/types/SidebarAssetInfo.types.ts b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/types/SidebarAssetInfo.types.ts
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeDefinition.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeDefinition.tsx
@@ -322,6 +322,7 @@ export const ASSET_NODE_DEFINITION_FRAGMENT = gql`
     autoMaterializePolicy {
       policyType
       rules {
+        className
         description
         decisionType
       }

diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetsGroupsGlobalGraphRoot.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetsGroupsGlobalGraphRoot.tsx
@@ -106,10 +106,10 @@ export const AssetsGroupsGlobalGraphRoot: React.FC = () => {
           <AssetGraphExplorerFilters
             assetGroups={assetGroups}
             visibleAssetGroups={React.useMemo(() => filters.groups || [], [filters.groups])}
-            setGroupFilters={React.useCallback((groups) => setFilters({...filters, groups}), [
-              filters,
-              setFilters,
-            ])}
+            setGroupFilters={React.useCallback(
+              (groups) => setFilters({...filters, groups}),
+              [filters, setFilters],
+            )}
           />
         }
         options={{preferAssetRendering: true, explodeComposites: true}}

diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AutomaterializePolicyTag.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AutomaterializePolicyTag.tsx
@@ -21,15 +21,11 @@ export const automaterializePolicyDescription = (policy: {
     <Box flex={{direction: 'column', gap: 12}}>
       This asset will be automatically materialized if it is:
       <ul style={{paddingLeft: 20, margin: 0}}>
-        {MATERIALIZE?.map((rule) => (
-          <li key={rule.description}>{rule.description}</li>
-        ))}
+        {MATERIALIZE?.map((rule) => <li key={rule.description}>{rule.description}</li>)}
       </ul>
       and it is not:
       <ul style={{paddingLeft: 20, margin: 0}}>
-        {SKIP?.map((rule) => (
-          <li key={rule.description}>{rule.description}</li>
-        ))}
+        {SKIP?.map((rule) => <li key={rule.description}>{rule.description}</li>)}
       </ul>
       {DISCARD && DISCARD.length > 0 && (
         <>

diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/types/AssetNodeDefinition.types.ts b/js_modules/dagster-ui/packages/ui-core/src/assets/types/AssetNodeDefinition.types.ts
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/types/AssetView.types.ts b/js_modules/dagster-ui/packages/ui-core/src/assets/types/AssetView.types.ts