@teambit/ui-foundation.ui.side-bar 0.0.0-a9e2edbdd7f2d36a9ebd1ee8d02d04427ed71d54

package/component-tree/component-tree.module.scss

@@ -0,0 +1,3 @@
+.componentTree {
+  padding: 0 8px;
+}

package/component-tree/component-tree.tsx

@@ -0,0 +1,71 @@
+import { ComponentModel, useIdFromLocation } from '@teambit/component';
+import React, { useMemo } from 'react';
+import { useLocation } from '@teambit/base-react.navigation.link';
+import { indentStyle } from '@teambit/base-ui.graph.tree.indent';
+import { inflateToTree, attachPayload } from '@teambit/base-ui.graph.tree.inflate-paths';
+import { Tree, TreeNodeRenderer, TreeNode as TreeNodeType } from '@teambit/design.ui.tree';
+import { LanesModel } from '@teambit/lanes.ui.models.lanes-model';
+import { TreeContextProvider } from '@teambit/base-ui.graph.tree.tree-context';
+import { LanesContext } from '@teambit/lanes.hooks.use-lanes';
+import { PayloadType, ScopePayload } from './payload-type';
+import { DefaultTreeNodeRenderer } from './default-tree-node-renderer';
+
+type ComponentTreeProps = {
+  components: ComponentModel[];
+  transformTree?: (rootNode: TreeNodeType) => TreeNodeType;
+  TreeNode?: TreeNodeRenderer<PayloadType>;
+  isCollapsed?: boolean;
+  lanesModel?: LanesModel;
+  // assumeScopeInUrl?: boolean;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+function calcPayload(components: ComponentModel[]) {
+  const payloadMap = new Map<string, PayloadType>(components.map((c) => [c.id.toString({ ignoreVersion: true }), c]));
+
+  const scopeIds = new Set(components.map((x) => x.id.scope).filter((x) => !!x));
+  scopeIds.forEach((x) => x && payloadMap.set(`${x}/`, new ScopePayload()));
+
+  return payloadMap;
+}
+
+export function ComponentTree({
+  components,
+  isCollapsed,
+  className,
+  transformTree,
+  lanesModel,
+  // assumeScopeInUrl = false,
+  TreeNode = DefaultTreeNodeRenderer,
+}: ComponentTreeProps) {
+  const { pathname = '/' } = useLocation() || {};
+  // override default splat from location when viewing a lane component
+  const laneCompUrl = pathname.split(LanesModel.baseLaneComponentRoute.concat('/'))[1];
+  const idFromLocation = useIdFromLocation(laneCompUrl, true);
+  const activeComponent = useMemo(() => {
+    const active = components.find((x) => {
+      return idFromLocation && (idFromLocation === x.id.fullName || idFromLocation === x.id.toStringWithoutVersion());
+    });
+    return active?.id.toString({ ignoreVersion: true });
+  }, [components.length, pathname]);
+
+  const rootNode = useMemo(() => {
+    const tree = inflateToTree<ComponentModel, PayloadType>(components, (c) => c.id.toString({ ignoreVersion: true }));
+
+    const payloadMap = calcPayload(components);
+
+    attachPayload(tree, payloadMap);
+
+    if (transformTree) return transformTree(tree);
+    return tree;
+  }, [components.length]);
+
+  return (
+    <LanesContext.Provider value={{ lanesModel }}>
+      <TreeContextProvider>
+        <div style={indentStyle(1)} className={className}>
+          <Tree TreeNode={TreeNode} activePath={activeComponent} tree={rootNode} isCollapsed={isCollapsed} />
+        </div>
+      </TreeContextProvider>
+    </LanesContext.Provider>
+  );
+}

package/component-tree/component-view/component-view.module.scss

@@ -0,0 +1,104 @@
+@import '@teambit/base-ui.theme.colors/colors.module.scss';
+
+.component {
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: 8px;
+  font-size: inherit;
+  font-size: var(--bit-p-xs);
+
+  //TODO - move to a link component
+  text-decoration: none;
+  color: inherit;
+
+  box-sizing: border-box;
+  border-left: 0px solid transparent;
+
+  &:hover {
+    background: var(--bit-bg-heavy, #f6f6f6);
+    .envIcon {
+      // filter: grayscale(0);
+    }
+  }
+
+  &.active {
+    background: var(--bit-accent-bg, #eceaff);
+    .envIcon {
+      // filter: grayscale(0);
+    }
+    // .right {
+    // 	.componentIcon {
+    // 		color: $w10;
+    // 	}
+    // }
+  }
+
+  .icon {
+    width: 16px;
+    height: 16px;
+    opacity: 0.8;
+  }
+
+  .left {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+    line-height: 24px;
+
+    > span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      padding: 0 8px;
+    }
+  }
+  .envIcon {
+    transition: filter 300ms ease-in-out;
+    // filter: grayscale(1);
+    width: 16px;
+    height: 16px;
+    border-radius: 4px;
+  }
+
+  .right {
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+
+    > * {
+      margin-right: 4px;
+    }
+    > :last-child() {
+      margin-right: 0px;
+    }
+  }
+}
+
+.componentEnvTooltip {
+  font-size: var(--bit-p-xs);
+  max-width: unset !important; // override tippy's default max-width: 350px
+  .componentEnvTitle {
+    font-size: var(--bit-p-xxs, 12px);
+    color: #c9c3f6;
+    font-weight: bold;
+    margin-bottom: 4px;
+  }
+}
+
+.tooltip {
+  max-width: unset !important; // override tippy's default max-width: 350px
+  font-size: var(--bit-p-xxs);
+  opacity: 100%;
+}
+
+.envLink {
+  color: white;
+  text-decoration: none;
+}
+
+.opacity {
+  opacity: 50%;
+}

package/component-tree/component-view/component-view.tsx

@@ -0,0 +1,249 @@
+/* eslint-disable complexity */
+import { ComponentTreeSlot } from '@teambit/component-tree';
+import { Link, useLocation } from '@teambit/base-react.navigation.link';
+import { EnvIcon } from '@teambit/envs.ui.env-icon';
+import { DeprecationIcon } from '@teambit/component.ui.deprecation-icon';
+import classNames from 'classnames';
+import { ComponentID } from '@teambit/component-id';
+import { ComponentModel } from '@teambit/component';
+import { ComponentUrl } from '@teambit/component.modules.component-url';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { Tooltip } from '@teambit/design.ui.tooltip';
+import { TreeContext } from '@teambit/base-ui.graph.tree.tree-context';
+import { indentClass } from '@teambit/base-ui.graph.tree.indent';
+import { TreeNodeProps } from '@teambit/base-ui.graph.tree.recursive-tree';
+import { LanesContext } from '@teambit/lanes.hooks.use-lanes';
+import { LanesModel } from '@teambit/lanes.ui.models.lanes-model';
+import { getName } from '../utils/get-name';
+
+import styles from './component-view.module.scss';
+
+export type ComponentViewProps<Payload = any> = {
+  treeNodeSlot?: ComponentTreeSlot;
+  scopeName?: string;
+} & TreeNodeProps<Payload>;
+
+export function ComponentView(props: ComponentViewProps) {
+  const { node, scopeName, treeNodeSlot } = props;
+
+  let component = node.payload;
+
+  const { onSelect } = useContext(TreeContext);
+  const lanesContextModel = useContext(LanesContext);
+  const lanesModel = lanesContextModel?.lanesModel;
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    return () => {
+      setMounted(false);
+    };
+  }, []);
+
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+      onSelect?.(node.id, event);
+    },
+    [onSelect, node.id]
+  );
+
+  const location = useLocation();
+  const scope = { name: scopeName };
+
+  const isMissingCompOrEnvId = !component?.id || !component?.environment?.id;
+
+  component = component as ComponentModel;
+
+  const envId = !isMissingCompOrEnvId ? ComponentID.fromString(component.environment?.id as string) : undefined;
+  const isEnvOnCurrentLane = envId
+    ? lanesModel?.isComponentOnLaneButNotOnMain(envId, false, lanesModel.viewedLane?.id)
+    : false;
+
+  const envUrl = !envId
+    ? undefined
+    : (isEnvOnCurrentLane &&
+        lanesModel?.viewedLane?.id &&
+        mounted &&
+        `${window.location.origin}${LanesModel.getLaneComponentUrl(envId, lanesModel.viewedLane?.id, undefined, lanesModel.viewedLane)}`) ||
+      ComponentUrl.toUrl(envId, {
+        includeVersion: true,
+        useLocationOrigin: mounted ? window.location.host.startsWith('localhost') : false,
+      });
+
+  const envTooltip = envId ? (
+    <Link
+      external
+      className={styles.envLink}
+      href={envUrl}
+      onClick={(event) => {
+        // do not trigger component selection
+        event.stopPropagation();
+      }}
+    >
+      <div className={styles.componentEnvTitle}>Environment</div>
+      <div>{component.environment?.id}</div>
+    </Link>
+  ) : null;
+
+  const href = !isMissingCompOrEnvId
+    ? lanesModel?.getLaneComponentUrlByVersion(
+        component.id as any,
+        lanesModel.viewedLane?.id,
+        !scope.name,
+        lanesModel.viewedLane
+      )
+    : undefined;
+
+  const viewingMainCompOnLane = React.useMemo(() => {
+    if (isMissingCompOrEnvId) return false;
+    return (
+      !component.status?.isNew &&
+      !lanesModel?.viewedLane?.id.isDefault() &&
+      lanesModel?.isComponentOnMainButNotOnLane(component.id as any, undefined, lanesModel?.viewedLane?.id)
+    );
+  }, [lanesModel?.viewedLane?.id.toString(), component.id.toString()]);
+
+  /**
+   * this covers the following use cases when matching the active component's href with location
+   *
+   * 1. viewing main component
+   *
+   *  - /<component-id>/
+   *  - /<component-id>/~sub-route
+   *  - /<component-id>/~sub-route/another-sub-route
+   *  - /<component-id>/~sub-route?version=<version>
+   *  - /<component-id>/~sub-route?scope=<scope>
+   *  - /<component-id>?scope=<scope>
+   *
+   * 2. viewing a lane component
+   *
+   *  - /~lane/<lane-id>/<component-id>/
+   *  - /~lane/<lane-id>/<component-id>?scope=<scope>
+   *  - /~lane/<lane-id>/<component-id>/~sub-route
+   *  - /~lane/<lane-id>/<component-id>/~sub-route/another-sub-route
+   *  - /~lane/<lane-id>/<component-id>/~sub-route?version=<version>
+   *  - /~lane/<lane-id>/<component-id>/~sub-route?scope=<scope>
+   *
+   * 3. viewing a main component when on a lane
+   *
+   *  - /?lane=<lane-id>/<component-id>/
+   *  - /?lane=<lane-id>/<component-id>?scope=<scope>
+   *  - /?lane=<lane-id>/<component-id>/~sub-route
+   *  - /?lane=<lane-id>/<component-id>/~sub-route/another-sub-route
+   *  - /?lane=<lane-id>/<component-id>/~sub-route?version=<version>
+   *  - /?lane=<lane-id>/<component-id>/~sub-route?scope=<scope>
+   *
+   * 4. viewing currently checked out lane component on workspace
+   *
+   *  - /<component-id-without-scope>/
+   *  - /<component-id-without-scope>?scope=<scope>
+   *
+   * 5. viewing lane component from the same scope as the lane on a workspace
+   *
+   * - /~lane/<lane-id>/<component-id-without-scope>/
+   *
+   * @todo - move this logic to a util function
+   */
+  const isActive = React.useMemo(() => {
+    if (!href || !location || !component?.id) return false;
+
+    const searchParams = new URLSearchParams(location.search);
+    const scopeFromQueryParams = searchParams.get('scope');
+    const pathname = location.pathname.substring(1).split('?')[0];
+    const compIdStr = component.id.toStringWithoutVersion();
+    const compIdName = component.id.fullName;
+    const componentScope = component.id.scope;
+    const locationIncludesLaneId = location.pathname.includes(LanesModel.lanesPrefix);
+
+    const sanitizedHref = (href.startsWith('/') ? href.substring(1) : href).split('?')[0];
+
+    // if you are in a workspace, the componentId might not have a scopeId, if you are viewing
+    // a component on the checked out lane
+    const viewingCheckedOutLaneComp =
+      lanesModel?.currentLane && lanesModel.currentLane.id.toString() === lanesModel?.viewedLane?.id.toString();
+
+    if (
+      !locationIncludesLaneId &&
+      (lanesModel?.viewedLane?.id.isDefault() || viewingMainCompOnLane || viewingCheckedOutLaneComp)
+    ) {
+      // split out any sub routes if exist
+      const compUrl = pathname.split('/~')[0];
+      // may or may not contain scope
+      const scopeUrl = scope.name ? `${scope.name.replace('.', '/')}/` : '';
+      const compUrlWithoutScope = compUrl.replace(scopeUrl, '');
+      return !scopeFromQueryParams
+        ? sanitizedHref === compUrlWithoutScope
+        : sanitizedHref === compUrl && componentScope === scopeFromQueryParams;
+    }
+
+    const laneCompUrlWithSubRoutes = pathname.split(LanesModel.baseLaneComponentRoute)[1] ?? '';
+
+    const extractedLaneCompUrl = laneCompUrlWithSubRoutes.split('/~')[0] ?? '';
+    const laneCompUrl = extractedLaneCompUrl.startsWith('/') ? extractedLaneCompUrl.substring(1) : extractedLaneCompUrl;
+
+    /**
+     * if the laneCompUrl doesn't have the scope as part of it and you are on a bare scope
+     * attach the bare scope to the laneCompUrl and parse it as a ComponentID
+     */
+    const laneCompIdFromUrl =
+      ComponentID.tryFromString(laneCompUrl) ??
+      (scope.name ? ComponentID.tryFromString(`${scope.name}/${laneCompUrl}`) : undefined);
+
+    // viewing lane component from the same scope as the lane on a workspace
+    const laneAndCompFromSameScopeOnWs =
+      !scope.name && lanesModel?.viewedLane?.id && component.id.scope === lanesModel?.viewedLane?.id.scope;
+
+    if (laneAndCompFromSameScopeOnWs) {
+      return !scopeFromQueryParams
+        ? compIdName === laneCompUrl
+        : compIdName === laneCompUrl && componentScope === scopeFromQueryParams;
+    }
+
+    if (!laneCompIdFromUrl) return false;
+
+    return !scopeFromQueryParams
+      ? laneCompIdFromUrl?.toString() === compIdStr || laneCompIdFromUrl.fullName === compIdName
+      : laneCompIdFromUrl?.toString() === compIdStr ||
+          (laneCompIdFromUrl.fullName === compIdName && componentScope === scopeFromQueryParams);
+  }, [href, viewingMainCompOnLane, location?.pathname, component?.id.toString(), scope.name]);
+
+  if (isMissingCompOrEnvId) return null;
+
+  const isCompModified =
+    component.status?.modifyInfo?.hasModifiedFiles || component.status?.modifyInfo?.hasModifiedDependencies;
+
+  const addOpacity = viewingMainCompOnLane && !isCompModified;
+
+  const Name = viewingMainCompOnLane ? (
+    <Tooltip className={styles.tooltip} placement="top" content="On Main">
+      <span className={classNames(addOpacity && styles.opacity)}>{getName(node.id)}</span>
+    </Tooltip>
+  ) : (
+    <span>{getName(node.id)}</span>
+  );
+
+  return (
+    <Link
+      href={href}
+      className={classNames(indentClass, styles.component)}
+      activeClassName={styles.active}
+      onClick={handleClick}
+      // exact={true}
+      active={isActive}
+    >
+      <div className={styles.left}>
+        <Tooltip className={styles.componentEnvTooltip} placement="top" content={envTooltip}>
+          <EnvIcon component={component} className={styles.envIcon} />
+        </Tooltip>
+        {Name}
+      </div>
+
+      <div className={styles.right}>
+        <DeprecationIcon component={component} />
+        {/* {isInternal && <Icon of="Internal" className={styles.componentIcon} />} */}
+        {treeNodeSlot &&
+          treeNodeSlot.toArray().map(([id, treeNode]) => <treeNode.widget key={id} component={component} />)}
+      </div>
+    </Link>
+  );
+}

package/component-tree/component-view/index.ts

@@ -0,0 +1 @@
+export { ComponentView } from './component-view';

package/component-tree/default-tree-node-renderer/default-tree-node-renderer.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { TreeNodeProps } from '@teambit/base-ui.graph.tree.recursive-tree';
+import { PayloadType, ScopePayload } from '../payload-type';
+
+import { ComponentView } from '../component-view';
+import { ScopeTreeNode } from '../scope-tree-node';
+import { NamespaceTreeNode } from '../namespace-tree-node';
+
+export function DefaultTreeNodeRenderer(props: TreeNodeProps<PayloadType>) {
+  const { node } = props;
+  const { children, payload } = node;
+  if (!children) return <ComponentView {...props} />;
+
+  if (payload instanceof ScopePayload) return <ScopeTreeNode {...props} />;
+
+  return <NamespaceTreeNode {...props} />;
+}

package/component-tree/default-tree-node-renderer/index.ts

@@ -0,0 +1 @@
+export { DefaultTreeNodeRenderer } from './default-tree-node-renderer';

package/component-tree/index.ts

@@ -0,0 +1,6 @@
+export * from './component-tree';
+export { ComponentView } from './component-view';
+export { ScopeTreeNode } from './scope-tree-node';
+export { NamespaceTreeNode } from './namespace-tree-node';
+export { ScopePayload } from './payload-type';
+export type { PayloadType } from './payload-type';

package/component-tree/namespace-tree-node/index.ts

@@ -0,0 +1 @@
+export { NamespaceTreeNode } from './namespace-tree-node';

package/component-tree/namespace-tree-node/namespace-tree-node.module.scss

@@ -0,0 +1,53 @@
+@import '@teambit/base-ui.theme.colors/colors.module.scss';
+
+.namespace {
+  position: relative;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  user-select: none;
+  font-weight: bold;
+  font-size: inherit;
+  padding-right: 8px;
+  font-size: var(--bit-p-xs);
+  cursor: pointer;
+  &:hover {
+    background: var(--bit-bg-heavy, #f6f6f6);
+  }
+
+  .arrow {
+    display: inline-block;
+    line-height: inherit;
+    transition: all 300ms;
+    margin-right: 10px;
+    color: var(--bit-text-color-light, #6c707c);
+    &.collapsed {
+      transform: rotate(-0.25turn);
+    }
+  }
+}
+
+.highlighted {
+  color: var(--bit-accent-heavy, #5d4aec);
+}
+
+.left {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  .name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-right: 8px;
+    line-height: 24px;
+  }
+}
+
+.componentTree {
+  overflow: hidden;
+  transition: max-height 400ms ease-in-out;
+  font-size: var(--bit-p-xs);
+}

package/component-tree/namespace-tree-node/namespace-tree-node.tsx

@@ -0,0 +1,63 @@
+import { Icon } from '@teambit/evangelist.elements.icon';
+import classNames from 'classnames';
+import React, { useState, useEffect, useRef } from 'react';
+import AnimateHeight from 'react-animate-height';
+import { indentClass, indentStyle } from '@teambit/base-ui.graph.tree.indent';
+import { useTree, TreeNodeProps, TreeLayer } from '@teambit/design.ui.tree';
+import { PayloadType } from '../payload-type';
+import { getName } from '../utils/get-name';
+import styles from './namespace-tree-node.module.scss';
+
+export type NamespaceTreeNodeProps = {} & TreeNodeProps<PayloadType>;
+
+export function NamespaceTreeNode({ node, depth }: NamespaceTreeNodeProps) {
+  const { isCollapsed, activePath } = useTree();
+  const isActive = activePath?.startsWith(node.id);
+
+  const initialOpen = isActive || !isCollapsed;
+  const [open, toggle] = useState<boolean | void>(initialOpen);
+
+  const firstRun = useRef(true);
+  useEffect(() => {
+    const { current } = firstRun;
+    if (current) return;
+    if (isActive === true) toggle(true);
+  }, [isActive]);
+
+  useEffect(() => {
+    if (firstRun.current) return;
+    toggle(!isCollapsed);
+  }, [isCollapsed]);
+
+  useEffect(() => {
+    firstRun.current = false;
+  }, []);
+
+  const displayName = getName(node.id.replace(/\/$/, ''));
+  const highlighted = !open && isActive;
+  return (
+    <div>
+      {node.id && (
+        <div
+          className={classNames(indentClass, styles.namespace, highlighted && styles.highlighted)}
+          onClick={() => toggle(!open)}
+          tabIndex={0}
+          role="button"
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') toggle(!open);
+          }}
+        >
+          <div className={styles.left}>
+            <Icon className={classNames(styles.arrow, !open && styles.collapsed)} of="fat-arrow-down" />
+            <span className={styles.name}>{displayName}</span>
+          </div>
+        </div>
+      )}
+      <AnimateHeight height={open ? 'auto' : 0}>
+        <div style={indentStyle(depth + 1)} className={classNames(styles.componentTree)}>
+          {node.children && <TreeLayer childNodes={node.children} depth={depth} />}
+        </div>
+      </AnimateHeight>
+    </div>
+  );
+}

package/component-tree/payload-type.tsx

@@ -0,0 +1,10 @@
+import { ComponentModel } from '@teambit/component';
+import { LaneModel } from '@teambit/lanes.ui.models.lanes-model';
+
+export class ScopePayload {
+  get isScope() {
+    return true;
+  }
+}
+
+export type PayloadType = ComponentModel | ScopePayload | LaneModel | undefined;

package/component-tree/scope-tree-node/index.ts

@@ -0,0 +1 @@
+export { ScopeTreeNode } from './scope-tree-node';

package/component-tree/scope-tree-node/scope-tree-node.module.scss

@@ -0,0 +1,53 @@
+@import '@teambit/base-ui.theme.colors/colors.module.scss';
+
+.scope {
+  position: relative;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  user-select: none;
+  cursor: pointer;
+  font-weight: bold;
+  font-size: inherit;
+  padding-right: 8px;
+  font-size: var(--bit-p-xs);
+  &:hover {
+    background: var(--bit-bg-heavy, #f6f6f6);
+  }
+
+  .arrow {
+    display: inline-block;
+    line-height: inherit;
+    transition: all 300ms;
+    margin-right: 10px;
+    color: var(--bit-text-color-light, #6c707c);
+    &.collapsed {
+      transform: rotate(-0.25turn);
+    }
+  }
+}
+
+.highlighted {
+  color: var(--bit-accent-heavy, #5d4aec);
+}
+
+.left {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  .name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-right: 8px;
+    line-height: 115%;
+  }
+}
+
+.componentTree {
+  overflow: hidden;
+  transition: max-height 400ms ease-in-out;
+  font-size: var(--bit-p-xs);
+}