feat(ingest): change asset list

.claude/settings.json

@@ -16,7 +16,14 @@
       "Bash(ruff:*)",
       "Bash(python -m mypy:*)",
       "Bash(python -m ruff:*)",
-      "Bash(python -m pytest:*)"
+      "Bash(python -m pytest:*)",
+      "Bash(yarn format:*)",
+      "Bash(yarn lint:*)",
+      "Bash(yarn type-check:*)",
+      "Bash(yarn test:*)",
+      "Bash(yarn generate:*)",
+      "Bash(./gradlew :datahub-web-react:yarnLintFix)",
+      "Bash(./gradlew :datahub-web-react:yarnLint)"
     ],
     "deny": []
   }

datahub-web-react/CLAUDE.md

@@ -174,8 +174,19 @@ yarn generate
 # Run formatting
 yarn format
 
-# Run linting
-yarn lint
+# Run linting on all files
+../gradlew yarnLint
+
+# Run lint-fix on a single file
+../gradlew -x yarnInstall -x yarnGenerate yarnLintFix -Pfile=src/path/to/file.tsx
+
+# Run linting on a single file
+# This does not run full type-check when we run for a single file
+# that should be run at the end of all changes before commit
+../gradlew -x yarnInstall -x yarnGenerate yarnLint -Pfile=src/path/to/file.tsx
+
+# Run lint-fix on all files
+../gradlew yarnLintFix
 
 # Run type checking
 yarn type-check

datahub-web-react/build.gradle

@@ -105,26 +105,68 @@ task yarnTest(type: YarnTask, dependsOn: [yarnInstall, yarnGenerate]) {
 }
 
 task yarnLint(type: YarnTask, dependsOn: [yarnInstall, yarnGenerate]) {
-  args = ['run', 'lint']
+  def targetFile = project.findProperty('file') ?: ''
+
+  if (targetFile.isEmpty()) {
+    // Run on all files
+    args = ['run', 'lint']
+  } else {
+    // Run on specific file - run lint, format-check, and type-check
+    doFirst {
+      // Run lint-file first
+      exec {
+        workingDir projectDir
+        commandLine 'yarn', 'run', 'lint-file', targetFile
+      }
+      // Then run format-check-file
+      exec {
+        workingDir projectDir
+        commandLine 'yarn', 'run', 'format-check-file', targetFile
+      }
+      // This does not run full type-check when we run for a single file
+      // as that would take too long
+    }
+    outputs.cacheIf { false }
+  }
 }
 
 test.dependsOn([yarnInstall, yarnTest, yarnLint])
 
 task yarnLintFix(type: YarnTask, dependsOn: [yarnInstall, yarnGenerate]) {
-  args = ['run', 'lint-fix']
-  def lint_sentinel = "${buildDir}/.yarn-lint-sentinel"
-  outputs.file(lint_sentinel)
-  inputs.files(project.fileTree(dir: 'src', include: ['**/*.ts', '**/*.tsx']))
-  doLast {
-    // touch a file with name yarn-lint.txt in the build directory
-    def file = file(lint_sentinel)
-    if (!file.exists()) {
-      file.createNewFile()
-    } else {
-      file.setLastModified(System.currentTimeMillis())
+  def targetFile = project.findProperty('file') ?: ''
+
+  if (targetFile.isEmpty()) {
+    // Run on all files
+    args = ['run', 'lint-fix']
+    def lint_sentinel = "${buildDir}/.yarn-lint-sentinel"
+    outputs.file(lint_sentinel)
+    inputs.files(project.fileTree(dir: 'src', include: ['**/*.ts', '**/*.tsx']))
+    doLast {
+      // touch a file with name yarn-lint.txt in the build directory
+      def file = file(lint_sentinel)
+      if (!file.exists()) {
+        file.createNewFile()
+      } else {
+        file.setLastModified(System.currentTimeMillis())
+      }
     }
+    outputs.cacheIf { true }
+  } else {
+    // Run on specific file - need to run both lint-fix and format
+    doFirst {
+      // Run lint-fix-file first
+      exec {
+        workingDir projectDir
+        commandLine 'yarn', 'run', 'lint-fix-file', targetFile
+      }
+      // Then run format-file
+      exec {
+        workingDir projectDir
+        commandLine 'yarn', 'run', 'format-file', targetFile
+      }
+    }
+    outputs.cacheIf { false }
   }
-  outputs.cacheIf { true }
 }
 
 task yarnBuild(type: YarnTask, dependsOn: [yarnInstall, yarnGenerate]) {

datahub-web-react/package.json

@@ -115,8 +115,12 @@
         "generate": "NODE_OPTIONS='--max-old-space-size=5120 --openssl-legacy-provider' graphql-codegen --config codegen.yml",
         "lint": "eslint . --ext .ts,.tsx --quiet && yarn format-check && yarn type-check",
         "lint-fix": "eslint . --ext .ts,.tsx --quiet --fix && yarn format",
+        "lint-file": "eslint --ext .ts,.tsx --quiet",
+        "format-check-file": "prettier --check",
+        "lint-fix-file": "eslint --ext .ts,.tsx --quiet --fix",
         "format-check": "prettier --check src",
         "format": "prettier --write src",
+        "format-file": "prettier --write",
         "type-check": "tsc --noEmit",
         "type-watch": "tsc -w --noEmit",
         "storybook": "storybook dev -p 6006",

datahub-web-react/src/alchemy-components/components/Modal/Modal.tsx

@@ -42,6 +42,12 @@ const HeaderContainer = styled.div<{ hasChildren: boolean }>`
     flex-direction: column;
 `;
 
+const TitleRow = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+`;
+
 const ButtonsContainer = styled.div`
     display: flex;
     gap: 16px;
@@ -59,6 +65,7 @@ export interface ModalProps {
     buttons: ModalButton[];
     title: string;
     subtitle?: string;
+    titlePill?: React.ReactNode;
     children?: React.ReactNode;
     onCancel: () => void;
     dataTestId?: string;
@@ -68,6 +75,7 @@ export function Modal({
     buttons,
     title,
     subtitle,
+    titlePill,
     children,
     onCancel,
     dataTestId,
@@ -83,9 +91,12 @@ export function Modal({
             data-testid={dataTestId}
             title={
                 <HeaderContainer hasChildren={!!children}>
-                    <Heading type="h1" color="gray" colorLevel={600} weight="bold" size="lg">
-                        {title}
-                    </Heading>
+                    <TitleRow>
+                        <Heading type="h1" color="gray" colorLevel={600} weight="bold" size="lg">
+                            {title}
+                        </Heading>
+                        {titlePill}
+                    </TitleRow>
                     {!!subtitle && (
                         <Text type="span" color="gray" colorLevel={1700} weight="medium">
                             {subtitle}

datahub-web-react/src/alchemy-components/components/Tabs/Tabs.stories.tsx

@@ -90,6 +90,19 @@ const meta = {
         getCurrentUrl: {
             description: 'A custom function to get the current URL. Defaults to window.location.pathname',
         },
+        scrollToTopOnChange: {
+            description: 'Whether to scroll to the top of the tabs container when switching tabs',
+            control: { type: 'boolean' },
+        },
+        maxHeight: {
+            description:
+                'Maximum height of the scrollable tabs container (only applies when scrollToTopOnChange is true)',
+            control: { type: 'text' },
+        },
+        stickyHeader: {
+            description: 'Whether to make the tab headers sticky when scrolling',
+            control: { type: 'boolean' },
+        },
     },
 
     // Args for the story
@@ -136,3 +149,77 @@ export const urlAware: Story = {
     tags: ['dev'],
     render: () => <UrlAwareTabsDemo />,
 };
+
+const StickyHeaderTabsDemo = () => {
+    const [selectedTab, setSelectedTab] = React.useState('tab1');
+
+    const stickyTabs = [
+        {
+            key: 'tab1',
+            name: 'Tab One',
+            component: (
+                <div style={{ padding: '20px' }}>
+                    <h3>Tab One with Sticky Header</h3>
+                    {Array.from({ length: 40 }, (_, i) => (
+                        <p key={i}>
+                            This is paragraph {i + 1}. The tab header will stick to the top when you scroll down. Lorem
+                            ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut
+                            labore et dolore magna aliqua.
+                        </p>
+                    ))}
+                </div>
+            ),
+        },
+        {
+            key: 'tab2',
+            name: 'Tab Two',
+            component: (
+                <div style={{ padding: '20px' }}>
+                    <h3>Tab Two Content</h3>
+                    {Array.from({ length: 35 }, (_, i) => (
+                        <div key={i} style={{ marginBottom: '15px', padding: '15px', backgroundColor: '#f0f0f0' }}>
+                            Content block {i + 1} - Notice how the tab header remains visible at the top while
+                            scrolling.
+                        </div>
+                    ))}
+                </div>
+            ),
+        },
+        {
+            key: 'tab3',
+            name: 'Tab Three',
+            component: (
+                <div style={{ padding: '20px' }}>
+                    <h3>Tab Three Content</h3>
+                    {Array.from({ length: 50 }, (_, i) => (
+                        <p key={i}>
+                            Line {i + 1}: The sticky header allows you to easily switch between tabs even when scrolled
+                            deep into the content. This is particularly useful for long content like logs or detailed
+                            configuration files.
+                        </p>
+                    ))}
+                </div>
+            ),
+        },
+    ];
+
+    return (
+        <div style={{ width: '700px', height: '500px' }}>
+            <h4>Sticky Header & Scroll to Top on Tab Change Demo</h4>
+            <p>Scroll down within the tab content to see the sticky header behavior and switch between tabs</p>
+            <Tabs
+                tabs={stickyTabs}
+                selectedTab={selectedTab}
+                onChange={setSelectedTab}
+                scrollToTopOnChange
+                maxHeight="400px"
+                stickyHeader
+            />
+        </div>
+    );
+};
+
+export const stickyHeader: Story = {
+    tags: ['dev'],
+    render: () => <StickyHeaderTabsDemo />,
+};