add artifacts drawer to code tab (#6550)

* add artifacts drawer to code tab * hide top level nodes by default * clean up * lint fix * artifacts tree loading * make dependency drawer scrollable * make artifact node open in new tab by default * remove unused styles * clean up * memoize + change line height Co-authored-by: Luv Kapur <[email protected]>
teambit · Oct 20, 2022 · f88cda4 · f88cda4
1 parent 8eeece8
commit f88cda4
Show file tree

Hide file tree

Showing 47 changed files with 307 additions and 729 deletions.
diff --git a/.bitmap b/.bitmap
@@ -195,12 +195,6 @@
         "mainFile": "index.ts",
         "rootDir": "scopes/pipelines/modules/builder-data"
     },
-    "builder-ui": {
-        "scope": "teambit.pipelines",
-        "version": "0.0.64",
-        "mainFile": "index.ts",
-        "rootDir": "scopes/pipelines/builder-ui"
-    },
     "bundler": {
         "scope": "teambit.compilation",
         "version": "0.0.879",
@@ -1098,6 +1092,24 @@
         "mainFile": "index.ts",
         "rootDir": "scopes/design/ui/alert-card"
     },
+    "ui/artifacts/artifacts-tree": {
+        "scope": "",
+        "version": "",
+        "mainFile": "index.ts",
+        "rootDir": "scopes/component/ui/component-artifacts/artifacts-tree"
+    },
+    "ui/artifacts/models/component-artifacts-model": {
+        "scope": "",
+        "version": "",
+        "mainFile": "index.ts",
+        "rootDir": "scopes/component/ui/component-artifacts/models/component-artifacts-model"
+    },
+    "ui/artifacts/queries/use-component-artifacts": {
+        "scope": "",
+        "version": "",
+        "mainFile": "index.ts",
+        "rootDir": "scopes/component/ui/component-artifacts/queries/use-component-artifacts"
+    },
     "ui/aspect-box": {
         "scope": "teambit.harmony",
         "version": "0.0.492",
@@ -1662,42 +1674,6 @@
         "mainFile": "index.ts",
         "rootDir": "scopes/design/ui/pill-label"
     },
-    "ui/pipelines/artifacts-panel": {
-        "scope": "teambit.component",
-        "version": "0.0.19",
-        "mainFile": "index.ts",
-        "rootDir": "scopes/component/ui/pipelines/artifacts-panel"
-    },
-    "ui/pipelines/component-pipeline": {
-        "scope": "teambit.component",
-        "version": "0.0.19",
-        "mainFile": "index.ts",
-        "rootDir": "scopes/component/ui/pipelines/component-pipeline"
-    },
-    "ui/pipelines/component-pipeline-context": {
-        "scope": "teambit.component",
-        "version": "0.0.8",
-        "mainFile": "index.ts",
-        "rootDir": "scopes/component/ui/pipelines/component-pipeline-context"
-    },
-    "ui/pipelines/component-pipeline-model": {
-        "scope": "teambit.component",
-        "version": "0.0.8",
-        "mainFile": "index.ts",
-        "rootDir": "scopes/component/ui/pipelines/component-pipeline-model"
-    },
-    "ui/pipelines/component-pipeline-queries": {
-        "scope": "teambit.component",
-        "version": "0.0.10",
-        "mainFile": "index.ts",
-        "rootDir": "scopes/component/ui/pipelines/component-pipeline-queries"
-    },
-    "ui/pipelines/component-pipeline-utils": {
-        "scope": "teambit.component",
-        "version": "0.0.7",
-        "mainFile": "index.ts",
-        "rootDir": "scopes/component/ui/pipelines/component-pipeline-utils"
-    },
     "ui/preview-placeholder": {
         "scope": "teambit.preview",
         "version": "0.0.493",

diff --git a/scopes/code/ui/code-tab-page/code-tab-page.tsx b/scopes/code/ui/code-tab-page/code-tab-page.tsx
@@ -21,9 +21,10 @@ import styles from './code-tab-page.module.scss';
 
 type CodePageProps = {
   fileIconSlot?: FileIconSlot;
+  host: string;
 } & HTMLAttributes<HTMLDivElement>;
 
-export function CodePage({ className, fileIconSlot }: CodePageProps) {
+export function CodePage({ className, fileIconSlot, host }: CodePageProps) {
   const urlParams = useCodeParams();
   const component = useContext(ComponentContext);
   const { mainFile, fileTree = [], dependencies, devFiles } = useCode(component.id);
@@ -52,6 +53,8 @@ export function CodePage({ className, fileIconSlot }: CodePageProps) {
       </HoverSplitter>
       <Pane className={styles.right}>
         <CodeTabTree
+          host={host}
+          componentId={component.id}
           currentFile={currentFile}
           dependencies={dependencies}
           fileTree={fileTree}

diff --git a/scopes/code/ui/code-tab-tree/code-tab-tree.module.scss b/scopes/code/ui/code-tab-tree/code-tab-tree.module.scss
@@ -14,6 +14,11 @@
   }
 }
 
+.openDrawer {
+  flex: 1;
+  height: 100%;
+}
+
 .codeDrawerContent {
   overflow-y: auto;
 }

diff --git a/scopes/code/ui/code-tab-tree/code-tab-tree.tsx b/scopes/code/ui/code-tab-tree/code-tab-tree.tsx
@@ -6,11 +6,15 @@ import type { DependencyType } from '@teambit/code.ui.queries.get-component-code
 import { DependencyTree } from '@teambit/code.ui.dependency-tree';
 import { TreeNode } from '@teambit/design.ui.tree';
 import { WidgetProps } from '@teambit/ui-foundation.ui.tree.tree-node';
+import { ComponentID } from '@teambit/component-id';
+import { ArtifactsTree } from '@teambit/component.ui.artifacts.artifacts-tree';
 
 import styles from './code-tab-tree.module.scss';
 
 export type CodeTabTreeProps = {
   fileTree: any[];
+  host: string;
+  componentId: ComponentID;
   dependencies?: DependencyType[];
   currentFile?: string;
   widgets?: ComponentType<WidgetProps<any>>[];
@@ -26,6 +30,8 @@ export function CodeTabTree({
   widgets,
   getHref,
   getIcon,
+  host,
+  componentId,
 }: CodeTabTreeProps) {
   const [openDrawerList, onToggleDrawer] = useState(['FILES']);
 
@@ -45,7 +51,7 @@ export function CodeTabTree({
         onToggle={() => handleDrawerToggle('FILES')}
         name="FILES"
         contentClass={styles.codeDrawerContent}
-        className={classNames(styles.codeTabDrawer)}
+        className={classNames(styles.codeTabDrawer, openDrawerList.includes('FILES') && styles.openDrawer)}
       >
         <FileTree
           files={fileTree || ['']}
@@ -58,12 +64,20 @@ export function CodeTabTree({
       <DrawerUI
         isOpen={openDrawerList.includes('DEPENDENCIES')}
         onToggle={() => handleDrawerToggle('DEPENDENCIES')}
-        className={classNames(styles.codeTabDrawer)}
+        className={classNames(styles.codeTabDrawer, openDrawerList.includes('DEPENDENCIES') && styles.openDrawer)}
         contentClass={styles.codeDrawerContent}
         name="DEPENDENCIES"
       >
         <DependencyTree dependenciesArray={dependencies} />
       </DrawerUI>
+      <ArtifactsTree
+        drawerName="ARTIFACTS"
+        host={host}
+        componentId={componentId}
+        getIcon={getIcon}
+        drawerOpen={openDrawerList.includes('ARTIFACTS')}
+        onToggleDrawer={() => handleDrawerToggle('ARTIFACTS')}
+      />
     </div>
   );
 }
diff --git a/scopes/code/ui/dependency-tree/dependency-drawer/dependency-drawer.module.scss b/scopes/code/ui/dependency-tree/dependency-drawer/dependency-drawer.module.scss
@@ -5,7 +5,9 @@
     padding-left: 16px;
   }
 }
-
+.dependencyDrawerContent {
+  overflow-y: auto;
+}
 .dependencyLink {
   height: 32px;
   display: flex;

diff --git a/scopes/code/ui/dependency-tree/dependency-drawer/dependency-drawer.tsx b/scopes/code/ui/dependency-tree/dependency-drawer/dependency-drawer.tsx
@@ -13,7 +13,13 @@ export type DependencyDrawerProps = {
 export function DependencyDrawer({ name, isOpen, onToggle, dependencies }: DependencyDrawerProps) {
   if (!dependencies || dependencies.length === 0) return null;
   return (
-    <DrawerUI isOpen={isOpen} onToggle={onToggle} name={name} className={styles.dependencyDrawer}>
+    <DrawerUI
+      isOpen={isOpen}
+      onToggle={onToggle}
+      name={name}
+      className={styles.dependencyDrawer}
+      contentClass={styles.dependencyDrawerContent}
+    >
       <DependencyList deps={dependencies} />
     </DrawerUI>
   );

diff --git a/scopes/component/code/code.ui.runtime.tsx b/scopes/component/code/code.ui.runtime.tsx
@@ -1,7 +1,7 @@
 import { ComponentAspect, ComponentUI } from '@teambit/component';
 import { UIRuntime } from '@teambit/ui';
 import React from 'react';
-import { SlotRegistry, Slot } from '@teambit/harmony';
+import { Harmony, SlotRegistry, Slot } from '@teambit/harmony';
 import type { FileIconMatch } from '@teambit/code.ui.utils.get-file-icon';
 import { staticStorageUrl } from '@teambit/base-ui.constants.storage';
 import { CodePage } from '@teambit/code.ui.code-tab-page';
@@ -23,11 +23,12 @@ export class CodeUI {
     /**
      * register an icon for a specific file type. pass icon and a match method/regexp
      */
+    private host: string,
     private fileIconSlot?: FileIconSlot
   ) {}
 
   getCodePage = () => {
-    return <CodePage fileIconSlot={this.fileIconSlot} />;
+    return <CodePage fileIconSlot={this.fileIconSlot} host={this.host} />;
   };
 
   registerEnvFileIcon(icons: FileIconMatch[]) {
@@ -42,10 +43,13 @@ export class CodeUI {
 
   static async provider(
     [component, componentCompare]: [ComponentUI, ComponentCompareUI],
-    config,
-    [fileIconSlot]: [FileIconSlot]
+    _,
+    [fileIconSlot]: [FileIconSlot],
+    harmony: Harmony
   ) {
-    const ui = new CodeUI(fileIconSlot);
+    const { config } = harmony;
+    const host = String(config.get('teambit.harmony/bit'));
+    const ui = new CodeUI(host, fileIconSlot);
     const section = new CodeSection(ui);
     // overrides the default tsx react icon with the typescript icon
     ui.registerEnvFileIcon([

diff --git a/scopes/component/ui/component-artifacts/artifacts-tree/artifact-file-node-clicked.ts b/scopes/component/ui/component-artifacts/artifacts-tree/artifact-file-node-clicked.ts
@@ -0,0 +1,27 @@
+import { ArtifactFile } from '@teambit/component.ui.artifacts.models.component-artifacts-model';
+
+export const fileNodeClicked =
+  (files: (ArtifactFile & { id: string })[], opts: 'download' | 'new tab') => (e, node) => {
+    const { id } = node;
+    const artifactFile = files.find((file) => file.id === id);
+
+    if (artifactFile?.downloadUrl) {
+      fetch(artifactFile.downloadUrl, { method: 'GET' })
+        .then((res) => res.blob())
+        .then((blob) => {
+          // create blob link to download
+          const url = window.URL.createObjectURL(new Blob([blob]));
+          const link = document.createElement('a');
+          link.href = url;
+          if (opts === 'download') link.setAttribute('download', artifactFile.path);
+          if (opts === 'new tab') link.setAttribute('target', '_blank');
+          // append to html page
+          document.body.appendChild(link);
+          // force download
+          link.click();
+          // clean up and remove the link
+          link.parentNode?.removeChild(link);
+        })
+        .catch(() => {});
+    }
+  };
diff --git a/...tifacts-panel/artifacts-panel.module.scss → ...artifacts-tree/artifacts-tree.module.scss b/...tifacts-panel/artifacts-panel.module.scss → ...artifacts-tree/artifacts-tree.module.scss
@@ -14,9 +14,11 @@
     border: none;
     border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
   }
+}
+.openDrawer {
+  flex: 1;
   height: 100%;
 }
-
 .artifactsPanelCodeDrawerContent {
   overflow-y: auto;
 }
@@ -39,10 +41,10 @@
   pointer-events: auto;
 }
 
-.artifactsPanelTree {
-  pointer-events: none;
-}
-
 .artifactIconLink {
   text-decoration: none;
 }
+
+.link {
+  color: var(--bit-accent-color, #6c5ce7);
+}