@teambit/component.ui.version-dropdown 0.0.784 → 0.0.786

package/version-dropdown.tsx

@@ -1,4 +1,4 @@
-import React, { useState, ReactNode } from 'react';
+import React, { useState } from 'react';
 import { MenuLinkItem } from '@teambit/design.ui.surfaces.menu.link-item';
 import { Dropdown } from '@teambit/evangelist.surfaces.dropdown';
 import { Tab } from '@teambit/ui-foundation.ui.use-box.tab';
@@ -7,67 +7,123 @@ import { UserAvatar } from '@teambit/design.ui.avatar';
 import { LineSkeleton } from '@teambit/base-ui.loaders.skeleton';
 import { LaneModel } from '@teambit/lanes.ui.models.lanes-model';
 import classNames from 'classnames';
-
 import styles from './version-dropdown.module.scss';
 import { VersionInfo } from './version-info';
 import { LaneInfo } from './lane-info';
-import { SimpleVersion } from './version-dropdown-placeholder';
+import { SimpleVersion, VersionProps } from './version-dropdown-placeholder';
 
 export const LOCAL_VERSION = 'workspace';
 
 export type DropdownComponentVersion = Partial<LegacyComponentLog> & { version: string };
 
-export type VersionDropdownProps = {
-  tags: DropdownComponentVersion[];
+export type UseComponentDropdownVersionsResult = {
+  tags?: DropdownComponentVersion[];
   snaps?: DropdownComponentVersion[];
-  lanes?: LaneModel[];
+  loading?: boolean;
+};
+export type UseComponentDropdownVersionsProps = {
+  skip?: boolean;
+};
+export type UseComponentDropdownVersions = (
+  props?: UseComponentDropdownVersionsProps
+) => UseComponentDropdownVersionsResult;
+export type GetActiveTabIndex = (
+  currentVersion?: string,
+  tabs?: Array<VersionMenuTab>,
+  tags?: DropdownComponentVersion[],
+  snaps?: DropdownComponentVersion[],
+  currentLane?: LaneModel
+) => number;
+export type VersionDropdownProps = {
   localVersion?: boolean;
-  currentVersion: string;
-  currentLane?: LaneModel;
   latestVersion?: string;
+  currentVersion: string;
+  useCurrentVersionLog?: (props?: { skip?: boolean; version?: string }) => DropdownComponentVersion | undefined;
+  hasMoreVersions?: boolean;
   loading?: boolean;
+  useComponentVersions?: UseComponentDropdownVersions;
+  currentLane?: LaneModel;
+  lanes?: LaneModel[];
+  getActiveTabIndex?: GetActiveTabIndex;
   overrideVersionHref?: (version: string) => string;
   placeholderClassName?: string;
   dropdownClassName?: string;
   menuClassName?: string;
   showVersionDetails?: boolean;
   disabled?: boolean;
-  placeholderComponent?: ReactNode;
+  PlaceholderComponent?: React.ComponentType<VersionProps>;
 } & React.HTMLAttributes<HTMLDivElement>;
 
-export function VersionDropdown({
-  snaps,
-  tags,
-  lanes,
+export const VersionDropdown = React.memo(_VersionDropdown);
+const VersionMenu = React.memo(_VersionMenu);
+function _VersionDropdown({
   currentVersion,
   latestVersion,
   localVersion,
+  useCurrentVersionLog,
+  hasMoreVersions,
   loading,
-  currentLane,
   overrideVersionHref,
   className,
   placeholderClassName,
+  getActiveTabIndex,
   dropdownClassName,
   menuClassName,
-  showVersionDetails,
+  showVersionDetails = true,
   disabled,
-  placeholderComponent = (
+  PlaceholderComponent: _PlaceholderComponent,
+  currentLane,
+  useComponentVersions,
+  lanes,
+  ...rest
+}: VersionDropdownProps) {
+  const [key, setKey] = useState(0);
+  const singleVersion = !hasMoreVersions;
+  const [open, setOpen] = useState(false);
+
+  React.useEffect(() => {
+    if (loading && open) {
+      setOpen(false);
+    }
+  }, [loading]);
+
+  const handlePlaceholderClicked = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (loading) return;
+    if (e.target === e.currentTarget) {
+      setOpen((o) => !o);
+    }
+  };
+
+  const defaultPlaceholder = (
     <SimpleVersion
+      useCurrentVersionLog={useCurrentVersionLog}
       disabled={disabled}
-      snaps={snaps}
-      tags={tags}
       className={placeholderClassName}
       currentVersion={currentVersion}
+      onClick={handlePlaceholderClicked}
+      hasMoreVersions={hasMoreVersions}
+      loading={loading}
+      showFullVersion={currentVersion === 'workspace'}
     />
-  ),
-  ...rest
-}: VersionDropdownProps) {
-  const [key, setKey] = useState(0);
+  );
 
-  const singleVersion = (snaps || []).concat(tags).length < 2 && !localVersion;
+  const PlaceholderComponent = _PlaceholderComponent ? (
+    <_PlaceholderComponent
+      useCurrentVersionLog={useCurrentVersionLog}
+      disabled={disabled}
+      className={placeholderClassName}
+      currentVersion={currentVersion}
+      onClick={handlePlaceholderClicked}
+      hasMoreVersions={hasMoreVersions}
+      loading={loading}
+      showFullVersion={currentVersion === 'workspace'}
+    />
+  ) : (
+    defaultPlaceholder
+  );
 
   if (disabled || (singleVersion && !loading)) {
-    return <div className={classNames(styles.noVersions, className)}>{placeholderComponent}</div>;
+    return <div className={classNames(styles.noVersions, className)}>{PlaceholderComponent}</div>;
   }
 
   return (
@@ -75,94 +131,167 @@ export function VersionDropdown({
       <Dropdown
         className={classNames(styles.dropdown, dropdownClassName)}
         dropClass={classNames(styles.menu, menuClassName)}
-        clickToggles={false}
-        clickPlaceholderToggles={true}
-        onChange={(_e, open) => open && setKey((x) => x + 1)} // to reset menu to initial state when toggling
+        open={open}
+        onClick={handlePlaceholderClicked}
+        onClickOutside={() => setOpen(false)}
+        onChange={(_e, _open) => _open && setKey((x) => x + 1)} // to reset menu to initial state when toggling
         PlaceholderComponent={({ children, ...other }) => (
-          <div {...other} className={placeholderClassName}>
+          <div {...other} className={placeholderClassName} onClick={handlePlaceholderClicked}>
             {children}
           </div>
         )}
-        placeholder={placeholderComponent}
+        placeholder={PlaceholderComponent}
       >
-        {loading && <LineSkeleton className={styles.loading} count={6} />}
-        {loading || (
-          <VersionMenu
-            className={menuClassName}
-            key={key}
-            tags={tags}
-            snaps={snaps}
-            lanes={lanes}
-            currentVersion={currentVersion}
-            latestVersion={latestVersion}
-            localVersion={localVersion}
-            currentLane={currentLane}
-            overrideVersionHref={overrideVersionHref}
-            showVersionDetails={showVersionDetails}
-          />
-        )}
+        <VersionMenu
+          className={menuClassName}
+          key={key}
+          currentVersion={currentVersion}
+          latestVersion={latestVersion}
+          localVersion={localVersion}
+          overrideVersionHref={overrideVersionHref}
+          showVersionDetails={showVersionDetails}
+          currentLane={currentLane}
+          getActiveTabIndex={getActiveTabIndex}
+          lanes={lanes}
+          useVersions={useComponentVersions}
+          open={open}
+        />
       </Dropdown>
     </div>
   );
 }
 
 type VersionMenuProps = {
-  tags?: DropdownComponentVersion[];
-  snaps?: DropdownComponentVersion[];
-  lanes?: LaneModel[];
   localVersion?: boolean;
   currentVersion?: string;
   latestVersion?: string;
+  useVersions?: UseComponentDropdownVersions;
   currentLane?: LaneModel;
+  lanes?: LaneModel[];
   overrideVersionHref?: (version: string) => string;
   showVersionDetails?: boolean;
+  loading?: boolean;
+  getActiveTabIndex?: GetActiveTabIndex;
+  open?: boolean;
 } & React.HTMLAttributes<HTMLDivElement>;
 
-const VERSION_TAB_NAMES = ['TAG', 'SNAP', 'LANE'] as const;
+export type VersionMenuTab =
+  | {
+      name: 'SNAP';
+      payload: DropdownComponentVersion[];
+    }
+  | {
+      name: 'LANE';
+      payload: LaneModel[];
+    }
+  | {
+      name: 'TAG';
+      payload: DropdownComponentVersion[];
+    };
 
-function VersionMenu({
-  tags,
-  snaps,
-  lanes,
+const defaultActiveTabIndex: GetActiveTabIndex = (currentVersion, tabs = [], tags, snaps) => {
+  if ((snaps || []).some((snap) => snap.version === currentVersion))
+    return tabs.findIndex((tab) => tab.name === 'SNAP');
+  return 0;
+};
+
+const VERSION_TAB_NAMES = ['TAG', 'SNAP', 'LANE'] as const;
+function _VersionMenu({
   currentVersion,
   localVersion,
   latestVersion,
-  currentLane,
   overrideVersionHref,
   showVersionDetails,
+  useVersions,
+  currentLane,
+  lanes,
+  getActiveTabIndex = defaultActiveTabIndex,
+  loading: loadingFromProps,
+  open,
   ...rest
 }: VersionMenuProps) {
-  const tabs = VERSION_TAB_NAMES.map((name) => {
-    switch (name) {
-      case 'SNAP':
-        return { name, payload: snaps || [] };
-      case 'LANE':
-        return { name, payload: lanes || [] };
-      default:
-        return { name, payload: tags || [] };
-    }
-  }).filter((tab) => tab.payload.length > 0);
-
-  const getActiveTabIndex = () => {
-    if (currentLane?.components.some((c) => c.version === currentVersion))
-      return tabs.findIndex((tab) => tab.name === 'LANE');
-    if ((snaps || []).some((snap) => snap.version === currentVersion))
-      return tabs.findIndex((tab) => tab.name === 'SNAP');
-    return 0;
-  };
+  const { snaps, tags, loading: loadingVersions } = useVersions?.() || {};
+  const loading = loadingFromProps || loadingVersions;
+
+  const tabs = React.useMemo(
+    () =>
+      VERSION_TAB_NAMES.map((name) => {
+        switch (name) {
+          case 'SNAP':
+            return { name, payload: snaps || [] };
+          case 'LANE':
+            return { name, payload: lanes || [] };
+          default:
+            return { name, payload: tags || [] };
+        }
+      }).filter((tab) => tab.payload.length > 0),
+    [snaps?.length, tags?.length, lanes?.length, loading]
+  );
+
+  const [activeTabIndex, setActiveTab] = React.useState<number | undefined>(
+    getActiveTabIndex(currentVersion, tabs, tags, snaps, currentLane)
+  );
+
+  const activeTab = React.useMemo(
+    () => (activeTabIndex !== undefined ? tabs[activeTabIndex] : undefined),
+    [activeTabIndex, tabs]
+  );
 
-  const [activeTabIndex, setActiveTab] = useState<number>(getActiveTabIndex());
+  React.useEffect(() => {
+    if (!currentLane) return;
+    if (tabs.length === 0) return;
+    const _activeTabIndex = getActiveTabIndex(currentVersion, tabs, tags, snaps, currentLane);
+    if (_activeTabIndex !== activeTabIndex) setActiveTab(_activeTabIndex);
+  }, [currentLane, tabs.length, tags?.length, snaps?.length, currentVersion, loading]);
 
   const multipleTabs = tabs.length > 1;
   const message = multipleTabs
     ? 'Switch to view tags, snaps, or lanes'
-    : `Switch between ${tabs[0].name.toLocaleLowerCase()}s`;
+    : `Switch between ${tabs[0]?.name.toLocaleLowerCase()}s`;
+
+  const showTab = activeTabIndex !== undefined && tabs[activeTabIndex]?.payload.length > 0;
+
+  const _rowRenderer = React.useCallback(
+    function VersionRowRenderer({ index }) {
+      const { name, payload = [] } = activeTab || {};
+      const item = payload[index];
+      if (!item) return null;
+      if (name === 'LANE') {
+        const lane = item as LaneModel;
+        return <LaneInfo key={lane.id.toString()} currentLane={currentLane} {...lane}></LaneInfo>;
+      }
+      const version = item as DropdownComponentVersion;
+      return (
+        <VersionInfo
+          key={version.version}
+          currentVersion={currentVersion}
+          latestVersion={latestVersion}
+          overrideVersionHref={overrideVersionHref}
+          showDetails={showVersionDetails}
+          {...version}
+        ></VersionInfo>
+      );
+    },
+    [activeTab, currentVersion, latestVersion, showVersionDetails, currentLane?.id.toString(), showTab]
+  );
+
+  const rowRenderer = React.useMemo(
+    () => (showTab && activeTab ? _rowRenderer : () => null),
+    [showTab, activeTab, _rowRenderer]
+  );
+
+  const ActiveTab = React.useMemo(() => {
+    return activeTab?.payload.map((payload, index) => {
+      return rowRenderer({ index });
+    });
+  }, [activeTab]);
 
   return (
-    <div {...rest}>
+    <div {...rest} className={classNames(styles.versionMenuContainer, !open && styles.hide)}>
       <div className={styles.top}>
-        <div className={classNames(styles.titleContainer, styles.title)}>{message}</div>
-        {localVersion && (
+        {loading && <LineSkeleton count={6} className={styles.loader} />}
+        {!loading && <div className={classNames(styles.titleContainer, styles.title)}>{message}</div>}
+        {!loading && localVersion && (
           <MenuLinkItem
             href={'?'}
             active={currentVersion === LOCAL_VERSION}
@@ -190,23 +319,7 @@ function VersionMenu({
             );
           })}
       </div>
-      <div className={styles.versionContainer}>
-        {tabs[activeTabIndex].name === 'LANE' &&
-          tabs[activeTabIndex].payload.map((payload) => (
-            <LaneInfo key={payload.id} currentLane={currentLane} {...payload}></LaneInfo>
-          ))}
-        {tabs[activeTabIndex].name !== 'LANE' &&
-          tabs[activeTabIndex].payload.map((payload) => (
-            <VersionInfo
-              key={payload.version}
-              currentVersion={currentVersion}
-              latestVersion={latestVersion}
-              overrideVersionHref={overrideVersionHref}
-              showDetails={showVersionDetails}
-              {...payload}
-            ></VersionInfo>
-          ))}
-      </div>
+      <div className={styles.versionContainerRoot}>{ActiveTab}</div>
     </div>
   );
 }

package/version-info/version-info.module.scss

@@ -4,41 +4,47 @@
   align-items: center;
   height: 40px;
   padding: 0 16px;
+  line-height: 24px;
 }
+
 .versionTimestamp {
   min-width: fit-content;
   margin-right: 2px;
   text-align: right;
 }
+
 .versionUserAvatar {
+  flex: none;
   padding: 0px 8px;
 }
+
 .laneIcon {
   padding: 0px 4px;
 }
+
 .version {
   max-width: 70%;
   display: flex;
   flex-direction: row;
-  align-content: space-between;
   align-items: center;
+  justify-content: flex-start;
+  overflow: hidden;
 }
+
 .versionName {
   padding: 0px 8px;
-  &.tag {
-    min-width: fit-content;
-  }
-  &.snap {
-    min-width: 20%;
-  }
+  flex-grow: 1;
+  min-width: fit-content;
 }
 
-.commitMessage,
-.emptyMessage {
-  min-width: 50%;
+.commitMessage {
+  flex-grow: 1;
   padding: 0px 8px;
 }
+
 .emptyMessage {
   font-style: italic;
   color: var(--bit-text-color-light, #6c707c);
+  padding: 0px 8px;
+  font-size: (var-bit-p-xs, 14px);
 }

package/version-info/version-info.tsx

@@ -16,28 +16,37 @@ export type VersionInfoProps = DropdownComponentVersion & {
   showDetails?: boolean;
 };
 
-export function VersionInfo({
-  version,
-  currentVersion,
-  latestVersion,
-  date,
-  username,
-  email,
-  overrideVersionHref,
-  showDetails,
-  message,
-  tag,
-}: VersionInfoProps) {
+export const VersionInfo = React.memo(React.forwardRef<HTMLDivElement, VersionInfoProps>(_VersionInfo));
+function _VersionInfo(
+  {
+    version,
+    currentVersion,
+    latestVersion,
+    date,
+    username,
+    displayName,
+    email,
+    overrideVersionHref,
+    showDetails,
+    message,
+    tag,
+    profileImage,
+  }: VersionInfoProps,
+  ref?: React.ForwardedRef<HTMLDivElement>
+) {
   const isCurrent = version === currentVersion;
   const author = useMemo(() => {
     return {
-      displayName: username,
+      displayName: displayName ?? '',
       email,
+      name: username ?? '',
+      profileImage,
     };
-  }, [version]);
+  }, [displayName, email, username, profileImage]);
 
   const timestamp = useMemo(() => (date ? new Date(parseInt(date)).toString() : new Date().toString()), [date]);
   const currentVersionRef = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     if (isCurrent) {
       currentVersionRef.current?.scrollIntoView({ block: 'nearest' });
@@ -46,16 +55,20 @@ export function VersionInfo({
 
   const href = overrideVersionHref ? overrideVersionHref(version) : `?version=${version}`;
 
+  const formattedVersion = useMemo(() => {
+    return tag ? version : version.slice(0, 6);
+  }, [tag, version]);
+
+  const isLatest = version === latestVersion;
+
   return (
-    <div ref={currentVersionRef}>
+    <div ref={ref || currentVersionRef}>
       <MenuLinkItem active={isCurrent} href={href} className={styles.versionRow}>
         <div className={styles.version}>
           <UserAvatar size={24} account={author} className={styles.versionUserAvatar} showTooltip={true} />
-          <Ellipsis className={classNames(styles.versionName, tag && styles.tag, !tag && styles.snap)}>
-            {version}
-          </Ellipsis>
-          {version === latestVersion && <VersionLabel className={styles.label} status="latest" />}
-          {showDetails && commitMessage(message)}
+          <Ellipsis className={classNames(styles.versionName)}>{formattedVersion}</Ellipsis>
+          {isLatest && <VersionLabel status="latest" />}
+          <CommitMessage message={message} showDetails={showDetails} />
         </div>
         <Ellipsis className={styles.versionTimestamp}>
           <TimeAgo date={timestamp} />
@@ -65,7 +78,8 @@ export function VersionInfo({
   );
 }
 
-function commitMessage(message?: string) {
+function CommitMessage({ message, showDetails }: { message?: string; showDetails?: boolean }) {
+  if (!showDetails) return null;
   if (!message || message === '') return <Ellipsis className={styles.emptyMessage}>No commit message</Ellipsis>;
   return <Ellipsis className={styles.commitMessage}>{message}</Ellipsis>;
 }