@teambit/component 0.0.1078 → 0.0.1080

package/ui/menu/menu.tsx

@@ -1,25 +1,23 @@
+import React, { useMemo } from 'react';
 import { Routes, Route } from 'react-router-dom';
+import classnames from 'classnames';
+import { compact, flatten, groupBy, isFunction } from 'lodash';
+import * as semver from 'semver';
+import { DropdownComponentVersion, GetActiveTabIndex, VersionDropdown } from '@teambit/component.ui.version-dropdown';
 import { MainDropdown, MenuItemSlot } from '@teambit/ui-foundation.ui.main-dropdown';
-import { VersionDropdown } from '@teambit/component.ui.version-dropdown';
-import { FullLoader } from '@teambit/ui-foundation.ui.full-loader';
 import type { ConsumeMethod } from '@teambit/ui-foundation.ui.use-box.menu';
 import { useLocation } from '@teambit/base-react.navigation.link';
-import { flatten, groupBy, compact, isFunction } from 'lodash';
-import classnames from 'classnames';
-import React, { useMemo } from 'react';
 import { UseBoxDropdown } from '@teambit/ui-foundation.ui.use-box.dropdown';
-import { useLanes } from '@teambit/lanes.hooks.use-lanes';
-import { LaneModel } from '@teambit/lanes.ui.models.lanes-model';
+import { useLanes as defaultUseLanes } from '@teambit/lanes.hooks.use-lanes';
+import { LanesModel } from '@teambit/lanes.ui.models.lanes-model';
 import { Menu as ConsumeMethodsMenu } from '@teambit/ui-foundation.ui.use-box.menu';
 import { LegacyComponentLog } from '@teambit/legacy-component-log';
-import type { ComponentModel } from '../component-model';
-import { useComponent as useComponentQuery, UseComponentType } from '../use-component';
+import { useComponent as useComponentQuery, UseComponentType, Filters } from '../use-component';
 import { CollapsibleMenuNav } from './menu-nav';
-import styles from './menu.module.scss';
-import { OrderedNavigationSlot, ConsumeMethodSlot } from './nav-plugin';
+import { OrderedNavigationSlot, ConsumeMethodSlot, ConsumePluginProps } from './nav-plugin';
 import { useIdFromLocation } from '../use-component-from-location';
 import { ComponentID } from '../..';
-import { Filters } from '../use-component-query';
+import styles from './menu.module.scss';
 
 export type MenuProps = {
   className?: string;
@@ -54,9 +52,14 @@ export type MenuProps = {
 
   useComponent?: UseComponentType;
 
-  path?: string;
-
   useComponentFilters?: () => Filters;
+
+  useLanes?: () => {
+    loading?: boolean;
+    lanesModel?: LanesModel;
+  };
+
+  path?: string;
 };
 function getComponentIdStr(componentIdStr?: string | (() => string | undefined)): string | undefined {
   if (isFunction(componentIdStr)) return componentIdStr();
@@ -83,22 +86,27 @@ export function ComponentMenu({
   const _componentIdStr = getComponentIdStr(componentIdStr);
   const componentId = _componentIdStr ? ComponentID.fromString(_componentIdStr) : undefined;
   const resolvedComponentIdStr = path || idFromLocation;
-
-  const useComponentOptions = {
-    logFilters: useComponentFilters?.(),
-    customUseComponent: useComponent,
-  };
-
-  const { component } = useComponentQuery(host, componentId?.toString() || idFromLocation, useComponentOptions);
   const mainMenuItems = useMemo(() => groupBy(flatten(menuItemSlot.values()), 'category'), [menuItemSlot]);
-
-  if (!component) return <FullLoader />;
+  const componentFilters = useComponentFilters?.() || {};
+  const useComponentVersions = defaultLoadVersions(
+    host,
+    componentId?.toString() || idFromLocation,
+    componentFilters,
+    useComponent
+  );
 
   const RightSide = (
     <div className={styles.rightSide}>
       {RightNode || (
         <>
-          <VersionRelatedDropdowns component={component} consumeMethods={consumeMethodSlot} host={host} />
+          <VersionRelatedDropdowns
+            host={host}
+            consumeMethods={consumeMethodSlot}
+            componentId={componentId?.toString() || idFromLocation}
+            useComponent={useComponentVersions}
+            componentFilters={componentFilters}
+            // loading={loading}
+          />
           <MainDropdown className={styles.hideOnMobile} menuItems={mainMenuItems} />
         </>
       )}
@@ -122,91 +130,211 @@ export function ComponentMenu({
   );
 }
 
-export function VersionRelatedDropdowns({
-  component,
-  consumeMethods,
-  className,
-  host,
-}: {
-  component: ComponentModel;
+export type VersionRelatedDropdownsProps = {
+  componentId?: string;
   consumeMethods?: ConsumeMethodSlot;
+  componentFilters?: Filters;
+  useComponent?: UseComponentVersions;
   className?: string;
+  loading?: boolean;
   host: string;
-}) {
+  useLanes?: () => {
+    loading?: boolean;
+    lanesModel?: LanesModel;
+  };
+  dropdownOptions?: {
+    showVersionDetails?: boolean;
+    getActiveTabIndex?: GetActiveTabIndex;
+  };
+};
+export type UseComponentVersionsProps = {
+  skip?: boolean;
+  id?: string;
+  initialLoad?: boolean;
+};
+export type UseComponentVersionProps = {
+  skip?: boolean;
+  version?: string;
+};
+export type UseComponentVersions = (props?: UseComponentVersionsProps) => UseComponentVersionsResult;
+export type UseComponentVersion = (props?: UseComponentVersionProps) => DropdownComponentVersion | undefined;
+export type UseComponentVersionsResult = {
+  tags?: DropdownComponentVersion[];
+  snaps?: DropdownComponentVersion[];
+  id?: ComponentID;
+  packageName?: string;
+  latest?: string;
+  currentVersion?: string;
+  loading?: boolean;
+};
+
+export function defaultLoadVersions(
+  host: string,
+  componentId?: string,
+  componentFilters: Filters = {},
+  useComponent?: UseComponentType,
+  loadingFromProps?: boolean
+): UseComponentVersions {
+  return React.useCallback(
+    (_props) => {
+      const { skip, initialLoad } = _props || {};
+      const fetchOptions = {
+        logFilters: {
+          ...componentFilters,
+          log: {
+            ...componentFilters.log,
+            limit: initialLoad ? 3 : undefined,
+          },
+        },
+        skip: loadingFromProps || skip,
+        customUseComponent: useComponent,
+      };
+      const {
+        component,
+        loading: loadingComponent,
+        componentLogs = {},
+      } = useComponentQuery(host, componentId, fetchOptions);
+      const logs = componentLogs?.logs;
+      const loading = React.useMemo(
+        () => loadingComponent || loadingFromProps || componentLogs.loading,
+        [loadingComponent, loadingFromProps, componentLogs.loading]
+      );
+
+      const snaps = useMemo(() => {
+        return (logs || []).filter((log) => !log.tag).map((snap) => ({ ...snap, version: snap.hash }));
+      }, [logs]);
+
+      const tags = useMemo(() => {
+        const tagLookup = new Map<string, LegacyComponentLog>();
+        (logs || [])
+          .filter((log) => log.tag)
+          .forEach((tag) => {
+            tagLookup.set(tag?.tag as string, tag);
+          });
+        return compact(
+          (component?.tags?.toArray() || []).reverse().map((tag) => tagLookup.get(tag.version.version))
+        ).map((tag) => ({ ...tag, version: tag.tag as string }));
+      }, [logs]);
+
+      return {
+        loading,
+        id: component?.id,
+        packageName: component?.packageName,
+        latestVersion: component?.latest,
+        currentVersion: component?.version,
+        snaps,
+        tags,
+        buildStatus: component?.buildStatus,
+      };
+    },
+    [componentId, loadingFromProps, componentFilters]
+  );
+}
+
+export const defaultLoadCurrentVersion: (props: VersionRelatedDropdownsProps) => UseComponentVersion = (props) => {
+  return (_props) => {
+    const { skip, version: _version } = _props || {};
+    const { snaps, tags, currentVersion, loading } = props.useComponent?.({ skip, id: props.componentId }) ?? {};
+    const version = _version ?? currentVersion;
+    const isTag = React.useMemo(() => semver.valid(version), [loading, version]);
+    if (isTag) {
+      return React.useMemo(() => tags?.find((tag) => tag.tag === version), [loading, tags?.length, version]);
+    }
+    return React.useMemo(() => snaps?.find((snap) => snap.version === version), [loading, snaps?.length, version]);
+  };
+};
+
+export function VersionRelatedDropdowns(props: VersionRelatedDropdownsProps) {
+  const updatedPropsWithDefaults = {
+    ...props,
+    useLanes: props.useLanes ?? defaultUseLanes,
+    dropdownOptions: {
+      ...props.dropdownOptions,
+      showVersionDetails: props?.dropdownOptions?.showVersionDetails ?? true,
+    },
+  };
+
+  const loadVersion = defaultLoadCurrentVersion(updatedPropsWithDefaults);
+
+  const { useLanes, consumeMethods, className, dropdownOptions, host } = updatedPropsWithDefaults;
+  const {
+    loading,
+    id,
+    tags,
+    snaps,
+    latest,
+    packageName,
+    currentVersion: _currentVersion,
+  } = props.useComponent?.({ initialLoad: true }) || {};
   const location = useLocation();
   const { lanesModel } = useLanes();
+  const lanes = id ? lanesModel?.getLanesByComponentId(id)?.filter((lane) => !lane.id.isDefault()) || [] : [];
   const viewedLane =
     lanesModel?.viewedLane?.id && !lanesModel?.viewedLane?.id.isDefault() ? lanesModel.viewedLane : undefined;
 
-  const { logs } = component;
   const isWorkspace = host === 'teambit.workspace/workspace';
 
-  const snaps = useMemo(() => {
-    return (logs || []).filter((log) => !log.tag).map((snap) => ({ ...snap, version: snap.hash }));
-  }, [logs]);
-
-  const tags = useMemo(() => {
-    const tagLookup = new Map<string, LegacyComponentLog>();
-    (logs || [])
-      .filter((log) => log.tag)
-      .forEach((tag) => {
-        tagLookup.set(tag?.tag as string, tag);
-      });
-    return compact(
-      component.tags
-        ?.toArray()
-        .reverse()
-        .map((tag) => tagLookup.get(tag.version.version))
-    ).map((tag) => ({ ...tag, version: tag.tag as string }));
-  }, [logs]);
-
-  const isNew = snaps.length === 0 && tags.length === 0;
-
-  const lanes = lanesModel?.getLanesByComponentId(component.id)?.filter((lane) => !lane.id.isDefault()) || [];
+  const isNew = tags?.length === 0 && snaps?.length === 0;
+
   const localVersion = isWorkspace && !isNew && (!viewedLane || lanesModel?.isViewingCurrentLane());
 
   const currentVersion =
-    isWorkspace && !isNew && !location?.search.includes('version') ? 'workspace' : component.version;
+    isWorkspace && !isNew && !location?.search.includes('version') ? 'workspace' : _currentVersion ?? '';
+
+  const consumeMethodProps: ConsumePluginProps | undefined = React.useMemo(() => {
+    return id
+      ? {
+          id,
+          packageName: packageName ?? '',
+          latest,
+          options: { viewedLane, disableInstall: !packageName },
+        }
+      : undefined;
+  }, [id, packageName, latest, viewedLane]);
+
+  const methods = useConsumeMethods(consumeMethods, consumeMethodProps);
+  const hasMethods = methods?.length > 0;
 
-  const methods = useConsumeMethods(component, consumeMethods, viewedLane);
   return (
     <>
-      {consumeMethods && tags.length > 0 && (
+      {consumeMethods && id && hasMethods && (
         <UseBoxDropdown
           position="bottom-end"
           className={classnames(styles.useBox, styles.hideOnMobile)}
-          Menu={<ConsumeMethodsMenu methods={methods} componentName={component.id.name} />}
+          Menu={<ConsumeMethodsMenu methods={methods} componentName={id.name} />}
         />
       )}
       <VersionDropdown
-        tags={tags}
-        snaps={snaps}
         lanes={lanes}
+        loading={loading}
+        useComponentVersions={props.useComponent}
+        hasMoreVersions={!isNew}
+        useCurrentVersionLog={loadVersion}
         localVersion={localVersion}
         currentVersion={currentVersion}
-        latestVersion={component.latest}
+        latestVersion={latest}
         currentLane={viewedLane}
         className={className}
         menuClassName={styles.componentVersionMenu}
+        getActiveTabIndex={dropdownOptions?.getActiveTabIndex}
+        showVersionDetails={dropdownOptions?.showVersionDetails}
       />
     </>
   );
 }
 
 function useConsumeMethods(
-  componentModel?: ComponentModel,
   consumeMethods?: ConsumeMethodSlot,
-  currentLane?: LaneModel
+  consumePluginProps?: ConsumePluginProps
 ): ConsumeMethod[] {
-  // if (!consumeMethods || !componentModel) return [];
   return useMemo(
     () =>
       flatten(consumeMethods?.values())
         .map((method) => {
-          if (!componentModel) return undefined;
-          return method?.(componentModel, { currentLane });
+          if (!consumePluginProps) return undefined;
+          return method?.(consumePluginProps);
         })
         .filter((x) => !!x && x.Component && x.Title) as ConsumeMethod[],
-    [consumeMethods, componentModel, currentLane]
+    [consumeMethods, consumePluginProps]
   );
 }

package/ui/menu/nav-plugin.tsx

@@ -2,7 +2,7 @@ import { SlotRegistry } from '@teambit/harmony';
 import type { LinkProps } from '@teambit/base-react.navigation.link';
 import type { ConsumeMethod } from '@teambit/ui-foundation.ui.use-box.menu';
 import { LaneModel } from '@teambit/lanes.ui.models.lanes-model';
-import { ComponentModel } from '../../ui';
+import { ComponentID, ComponentModel } from '../..';
 
 export type NavPluginProps = {
   displayName?: string;
@@ -16,12 +16,20 @@ export type NavPlugin = {
 
 export type OrderedNavigationSlot = SlotRegistry<NavPlugin>;
 export type ConsumePluginOptions = {
-  currentLane?: LaneModel;
+  viewedLane?: LaneModel;
+  hide?: boolean;
+  disableInstall?: boolean;
 };
 
-export type ConsumePlugin = (
-  componentModel: ComponentModel,
-  options?: ConsumePluginOptions
-) => ConsumeMethod | undefined;
+export type ConsumePluginProps = {
+  id: ComponentID;
+  packageName: string;
+  latest?: string;
+  // @deprecated - pass id, packageName and latest instead via props
+  componentModel?: ComponentModel;
+  options?: ConsumePluginOptions;
+};
+
+export type ConsumePlugin = (props: ConsumePluginProps) => ConsumeMethod | undefined;
 
 export type ConsumeMethodSlot = SlotRegistry<ConsumePlugin[]>;

package/ui/use-component-logs.ts

@@ -0,0 +1,65 @@
+import { LegacyComponentLog } from '@teambit/legacy-component-log';
+import { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';
+import { ComponentLogsResult, Filters } from './use-component.model';
+import { GET_COMPONENT_WITH_LOGS } from './use-component.fragments';
+import { ComponentError } from './component-error';
+import { getOffsetValue } from './use-component.utils';
+
+export function useComponentLogs(
+  componentId: string,
+  host: string,
+  filters?: Filters,
+  skipFromProps?: boolean
+): ComponentLogsResult {
+  const { variables, skip } = useComponentLogsInit(componentId, host, filters, skipFromProps);
+
+  const { data, error, loading } = useDataQuery(GET_COMPONENT_WITH_LOGS, {
+    variables,
+    skip,
+    errorPolicy: 'all',
+  });
+
+  const rawComponent = data?.getHost?.get;
+  const rawCompLogs: Array<LegacyComponentLog> = rawComponent?.logs;
+
+  const componentError =
+    error && !data
+      ? new ComponentError(500, error.message)
+      : (!rawComponent && !loading && new ComponentError(404)) || undefined;
+
+  return {
+    loading,
+    error: componentError,
+    componentLogs: {
+      logs: rawCompLogs,
+      loading,
+    },
+  };
+}
+
+export function useComponentLogsInit(componentId: string, host: string, filters?: Filters, skip?: boolean) {
+  const { log } = filters || {};
+  const {
+    head: logHead,
+    offset: logOffset,
+    sort: logSort,
+    limit: logLimit,
+    type: logType,
+    takeHeadFromComponent: logTakeHeadFromComponent,
+  } = log || {};
+  const variables = {
+    id: componentId,
+    extensionId: host,
+    logOffset: getOffsetValue(logOffset, logLimit),
+    logLimit,
+    logType,
+    logHead,
+    logSort,
+    logTakeHeadFromComponent,
+  };
+  return {
+    logOffset,
+    variables,
+    skip,
+  };
+}

package/ui/use-component-query.ts

@@ -1,168 +1,42 @@
 import { useMemo, useEffect, useRef } from 'react';
-import { gql } from '@apollo/client';
 import { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';
 import { ComponentID, ComponentIdObj } from '@teambit/component-id';
 import { ComponentDescriptor } from '@teambit/component-descriptor';
-
 import { ComponentModel } from './component-model';
+import { ComponentQueryResult, Filters } from './use-component.model';
+import {
+  GET_COMPONENT,
+  SUB_COMPONENT_CHANGED,
+  SUB_COMPONENT_REMOVED,
+  SUB_SUBSCRIPTION_ADDED,
+} from './use-component.fragments';
+import { useComponentLogs } from './use-component-logs';
 import { ComponentError } from './component-error';
 
-export const componentIdFields = gql`
-  fragment componentIdFields on ComponentID {
-    name
-    version
-    scope
-  }
-`;
-
-export const componentOverviewFields = gql`
-  fragment componentOverviewFields on Component {
-    id {
-      ...componentIdFields
-    }
-    aspects(include: ["teambit.preview/preview", "teambit.envs/envs"]) {
-      # 'id' property in gql refers to a *global* identifier and used for caching.
-      # this makes aspect data cache under the same key, even when they are under different components.
-      # renaming the property fixes that.
-      id
-      data
-    }
-    elementsUrl
-    description
-    deprecation {
-      isDeprecate
-      newId
-    }
-    labels
-    displayName
-    server {
-      env
-      url
-      host
-      basePath
-    }
-    buildStatus
-    env {
-      id
-      icon
-    }
-    size {
-      compressedTotal
-    }
-    preview {
-      includesEnvTemplate
-      legacyHeader
-      isScaling
-      skipIncludes
-    }
-    compositions {
-      identifier
-      displayName
-    }
-  }
-  ${componentIdFields}
-`;
-
-export const componentFields = gql`
-  fragment componentFields on Component {
-    id {
-      ...componentIdFields
-    }
-    ...componentOverviewFields
-    packageName
-    latest
-    compositions {
-      identifier
-      displayName
-    }
-    tags {
-      version
-    }
-    logs(type: $logType, offset: $logOffset, limit: $logLimit, head: $logHead, sort: $logSort) {
-      id
-      message
-      username
-      email
-      date
-      hash
-      tag
-    }
-  }
-  ${componentIdFields}
-  ${componentOverviewFields}
-`;
-
-const GET_COMPONENT = gql`
-  query Component(
-    $id: String!
-    $extensionId: String!
-    $logType: String
-    $logOffset: Int
-    $logLimit: Int
-    $logHead: String
-    $logSort: String
-  ) {
-    getHost(id: $extensionId) {
-      id # used for GQL caching
-      get(id: $id) {
-        ...componentFields
-      }
-    }
-  }
-  ${componentFields}
-`;
-
-const SUB_SUBSCRIPTION_ADDED = gql`
-  subscription OnComponentAdded($logType: String, $logOffset: Int, $logLimit: Int, $logHead: String, $logSort: String) {
-    componentAdded {
-      component {
-        ...componentFields
-      }
-    }
-  }
-  ${componentFields}
-`;
-
-const SUB_COMPONENT_CHANGED = gql`
-  subscription OnComponentChanged(
-    $logType: String
-    $logOffset: Int
-    $logLimit: Int
-    $logHead: String
-    $logSort: String
-  ) {
-    componentChanged {
-      component {
-        ...componentFields
-      }
-    }
-  }
-  ${componentFields}
-`;
-
-const SUB_COMPONENT_REMOVED = gql`
-  subscription OnComponentRemoved {
-    componentRemoved {
-      componentIds {
-        ...componentIdFields
-      }
-    }
-  }
-  ${componentIdFields}
-`;
-export type Filters = {
-  log?: { logType?: string; logOffset?: number; logLimit?: number; logHead?: string; logSort?: string };
-};
 /** provides data to component ui page, making sure both variables and return value are safely typed and memoized */
-export function useComponentQuery(componentId: string, host: string, filters?: Filters, skip?: boolean) {
+export function useComponentQuery(
+  componentId: string,
+  host: string,
+  filters?: Filters,
+  skip?: boolean
+): ComponentQueryResult {
   const idRef = useRef(componentId);
   idRef.current = componentId;
-  const { data, error, loading, subscribeToMore, ...rest } = useDataQuery(GET_COMPONENT, {
-    variables: { id: componentId, extensionId: host, ...(filters?.log || {}) },
+  const variables = {
+    id: componentId,
+    extensionId: host,
+  };
+
+  const { data, error, loading, subscribeToMore } = useDataQuery(GET_COMPONENT, {
+    variables,
     skip,
     errorPolicy: 'all',
   });
 
+  const { loading: loadingLogs, componentLogs: { logs } = {} } = useComponentLogs(componentId, host, filters, skip);
+
+  const rawComponent = data?.getHost?.get;
+
   useEffect(() => {
     // @TODO @Kutner fix subscription for scope
     if (host !== 'teambit.workspace/workspace') {
@@ -247,8 +121,26 @@ export function useComponentQuery(componentId: string, host: string, filters?: F
     };
   }, []);
 
-  const rawComponent = data?.getHost?.get;
-  return useMemo(() => {
+  const idDepKey = rawComponent?.id
+    ? `${rawComponent?.id?.scope}/${rawComponent?.id?.name}@${rawComponent?.id?.version}}`
+    : undefined;
+
+  const id: ComponentID | undefined = useMemo(
+    () => (rawComponent ? ComponentID.fromObject(rawComponent.id) : undefined),
+    [idDepKey]
+  );
+
+  const componentError =
+    error && !data
+      ? new ComponentError(500, error.message)
+      : (!rawComponent && !loading && new ComponentError(404)) || undefined;
+
+  const component = useMemo(
+    () => (rawComponent ? ComponentModel.from({ ...rawComponent, host, logs }) : undefined),
+    [id?.toString(), logs]
+  );
+
+  const componentDescriptor = useMemo(() => {
     const aspectList = {
       entries: rawComponent?.aspects.map((aspectObject) => {
         return {
@@ -258,15 +150,20 @@ export function useComponentQuery(componentId: string, host: string, filters?: F
         };
       }),
     };
-    const id = rawComponent && ComponentID.fromObject(rawComponent.id);
-    const componentError =
-      error && !data ? new ComponentError(500, error.message) : !rawComponent && !loading && new ComponentError(404);
+
+    return id ? ComponentDescriptor.fromObject({ id: id.toString(), aspectList }) : undefined;
+  }, [id?.toString()]);
+
+  return useMemo(() => {
     return {
-      componentDescriptor: id ? ComponentDescriptor.fromObject({ id: id.toString(), aspectList }) : undefined,
-      component: rawComponent ? ComponentModel.from({ ...rawComponent, host }) : undefined,
+      componentDescriptor,
+      component,
+      componentLogs: {
+        loading: loadingLogs,
+        logs,
+      },
       error: componentError || undefined,
       loading,
-      ...rest,
     };
-  }, [rawComponent, host, error]);
+  }, [host, component, componentDescriptor, componentError]);
 }