@teambit/component.ui.component-compare.component-compare 0.0.20 → 0.0.22

package/component-compare.module.scss

@@ -29,8 +29,8 @@
 
 .navigation {
   display: flex;
-  list-style: none;
   min-height: 48px;
+  align-items: center;
 
   @media screen and (max-width: 768px) {
     padding-left: 6px;
@@ -44,8 +44,84 @@
 }
 
 .loader {
+  padding: 16px 24px;
+  color: var(--bit-bg-dent, #f6f6f6);
+}
+
+.tabLoader {
+  color: var(--bit-bg-dent, #f6f6f6);
+}
+
+.compareLoader {
   display: flex;
-  height: 100%;
-  width: 100%;
-  margin: auto;
+  padding-top: 16px;
+}
+
+.compareSidebarLoader {
+  width: 30%;
+}
+
+.compareViewLoader {
+  width: 70%;
+  padding-right: 16px;
+}
+
+.activeNav {
+  > div {
+    color: var(--bit-accent-color, #6c5ce7);
+    border-radius: 5px;
+    background-color: var(--bit-accent-bg, #edebfc);
+  }
+
+  &:after {
+    // unset default selection styles
+    height: 0 !important;
+  }
+}
+
+.loadingNav {
+  // > div {
+  //   color: var(--bit-accent-color, #6c5ce7);
+  //   border-radius: 5px;
+  //   background-color: var(--bit-accent-bg, #edebfc);
+  // }
+
+  &:after {
+    // unset default selection styles
+    height: 0 !important;
+  }
+}
+
+.navItem {
+  position: relative;
+  color: var(--bit-text-color-light, #707279);
+
+  &.none {
+    > div {
+      opacity: 65%;
+    }
+  }
+}
+
+.compareMenuTab {
+  position: relative;
+}
+
+.indicator {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  border-radius: 100%;
+  padding: 4px;
+  box-sizing: border-box;
+
+  &.hasChanged {
+    background-color: #ff8b00;
+  }
+
+  &.new {
+    // @todo - review styles
+    display: none;
+    background-color: var(--bit-accent-success-color, #37b26c);
+  }
 }

package/component-compare.tsx

@@ -1,20 +1,26 @@
-import React, { useContext, useMemo } from 'react';
+import React, { useContext, useMemo, HTMLAttributes } from 'react';
 import classnames from 'classnames';
 import { LegacyComponentLog } from '@teambit/legacy-component-log';
-import { ComponentContext, TopBarNav, useComponent } from '@teambit/component';
+import { CollapsibleMenuNav, ComponentContext, ComponentID, NavPlugin, useComponent } from '@teambit/component';
 import { ComponentCompareContext } from '@teambit/component.ui.component-compare.context';
+import { useComponentCompareQuery } from '@teambit/component.ui.component-compare.hooks.use-component-compare';
+import {
+  FileCompareResult,
+  FieldCompareResult,
+} from '@teambit/component.ui.component-compare.models.component-compare-model';
 import { useCompareQueryParam } from '@teambit/component.ui.component-compare.hooks.use-component-compare-url';
 import { ComponentCompareVersionPicker } from '@teambit/component.ui.component-compare.version-picker';
 import { ComponentCompareBlankState } from '@teambit/component.ui.component-compare.blank-state';
 import { ComponentCompareHooks } from '@teambit/component.ui.component-compare.models.component-compare-hooks';
-import { RoundLoader } from '@teambit/design.ui.round-loader';
 import { useLocation } from '@teambit/base-react.navigation.link';
 import { SlotRouter } from '@teambit/ui-foundation.ui.react-router.slot-router';
-import { ComponentCompareProps } from '@teambit/component.ui.component-compare.models.component-compare-props';
+import { ComponentCompareProps, TabItem } from '@teambit/component.ui.component-compare.models.component-compare-props';
 import { groupByVersion } from '@teambit/component.ui.component-compare.utils.group-by-version';
 import { sortTabs } from '@teambit/component.ui.component-compare.utils.sort-tabs';
 import { sortByDateDsc } from '@teambit/component.ui.component-compare.utils.sort-logs';
 import { extractLazyLoadedData } from '@teambit/component.ui.component-compare.utils.lazy-loading';
+import { BlockSkeleton, WordSkeleton } from '@teambit/base-ui.loaders.skeleton';
+import { ChangeType } from '@teambit/component.ui.component-compare.models.component-compare-change-type';
 
 import styles from './component-compare.module.scss';
 
@@ -40,13 +46,14 @@ export function ComponentCompare(props: ComponentCompareProps) {
     tabs,
     className,
     hooks,
+    changes: changesFromProps,
     customUseComponent,
+    Loader = CompareLoader,
     ...rest
   } = props;
   const baseVersion = useCompareQueryParam('baseVersion');
   const component = useContext(ComponentContext);
   const location = useLocation();
-
   const isWorkspace = host === 'teambit.workspace/workspace';
   const allVersionInfo = useMemo(() => component.logs?.slice().sort(sortByDateDsc) || [], [component.id.toString()]);
   const isNew = allVersionInfo.length === 0;
@@ -77,10 +84,38 @@ export function ComponentCompare(props: ComponentCompareProps) {
 
   const isEmpty = !loading && !compareIsLocalChanges && !compare && !base;
 
+  const compCompareId = `${base?.id.toString()}-${compare?.id.toString()}`;
+
   const logsByVersion = useMemo(() => {
     return (compare?.logs || []).slice().reduce(groupByVersion, new Map<string, LegacyComponentLog>());
   }, [compare?.id.toString()]);
 
+  const { loading: compCompareLoading, componentCompareData } = useComponentCompareQuery(
+    base?.id.toString(),
+    compare?.id.toString()
+  );
+
+  const fileCompareDataByName = useMemo(() => {
+    if (loading || compCompareLoading) return undefined;
+    if (!compCompareLoading && !componentCompareData) return null;
+
+    const _fileCompareDataByName = new Map<string, FileCompareResult>();
+    (componentCompareData?.code || []).forEach((codeCompareData) => {
+      _fileCompareDataByName.set(codeCompareData.fileName, codeCompareData);
+    });
+    return _fileCompareDataByName;
+  }, [compCompareLoading, loading, compCompareId]);
+
+  const fieldCompareDataByName = useMemo(() => {
+    if (loading || compCompareLoading) return undefined;
+    if (!compCompareLoading && !componentCompareData) return null;
+    const _fieldCompareDataByName = new Map<string, FieldCompareResult>();
+    (componentCompareData?.aspects || []).forEach((aspectCompareData) => {
+      _fieldCompareDataByName.set(aspectCompareData.fieldName, aspectCompareData);
+    });
+    return _fieldCompareDataByName;
+  }, [compCompareLoading, loading, compCompareId]);
+
   const componentCompareModel = {
     compare: compare && {
       model: compare,
@@ -93,18 +128,19 @@ export function ComponentCompare(props: ComponentCompareProps) {
     logsByVersion,
     state,
     hooks,
+    fieldCompareDataByName,
+    fileCompareDataByName,
   };
 
+  const changes =
+    changesFromProps || deriveChangeType(baseId, compare?.id, fileCompareDataByName, fieldCompareDataByName);
+
   return (
     <ComponentCompareContext.Provider value={componentCompareModel}>
       <div className={classnames(styles.componentCompareContainer, className)} {...rest}>
-        {loading && (
-          <div className={styles.loader}>
-            <RoundLoader />
-          </div>
-        )}
+        {loading && <Loader className={classnames(styles.loader)} />}
         {isEmpty && <ComponentCompareBlankState />}
-        {!isEmpty && <RenderCompareScreen {...props} />}
+        {!loading && !isEmpty && <RenderCompareScreen key={compCompareId} {...props} changes={changes} />}
       </div>
     </ComponentCompareContext.Provider>
   );
@@ -112,12 +148,13 @@ export function ComponentCompare(props: ComponentCompareProps) {
 
 function RenderCompareScreen(props: ComponentCompareProps) {
   const { routes, state } = props;
+  const showVersionPicker = state?.versionPicker?.element !== null;
 
   return (
     <>
-      <div className={styles.top}>
-        {(!state?.versionPicker && <ComponentCompareVersionPicker />) || state?.versionPicker?.element}
-      </div>
+      {showVersionPicker && (
+        <div className={styles.top}>{state?.versionPicker?.element || <ComponentCompareVersionPicker />}</div>
+      )}
       <div className={styles.bottom}>
         <CompareMenuNav {...props} />
         {(extractLazyLoadedData(routes) || []).length > 0 && (
@@ -129,29 +166,55 @@ function RenderCompareScreen(props: ComponentCompareProps) {
   );
 }
 
-function CompareMenuNav({ tabs, state, hooks }: ComponentCompareProps) {
-  const sortedTabs = (extractLazyLoadedData(tabs) || []).sort(sortTabs);
-
+function CompareMenuNav({ tabs, state, hooks, changes: changed }: ComponentCompareProps) {
   const activeTab = state?.tabs?.id;
   const isControlled = state?.tabs?.controlled;
+  const _tabs = extractLazyLoadedData(tabs) || [];
+
+  const extractedTabs: [string, NavPlugin & TabItem][] = useMemo(
+    () =>
+      _tabs.sort(sortTabs).map((tab, index) => {
+        const isActive = !state ? undefined : !!activeTab && !!tab?.id && activeTab === tab.id;
+        const changeTypeCss = deriveChangeTypeCssForNav(tab, changed);
+        const loading = changed === undefined;
+        const key = `${tab.id}-tab-${changeTypeCss}`;
+        return [
+          tab.id || `tab-${index}`,
+          {
+            ...tab,
+            props: {
+              ...(tab.props || {}),
+              key,
+              displayName: (!loading && tab.displayName) || undefined,
+              active: isActive,
+              onClick: onNavClicked({ id: tab.id, hooks }),
+              href: (!isControlled && tab.props?.href) || undefined,
+              activeClassName: (!loading && styles.activeNav) || styles.loadingNav,
+              className: styles.navItem,
+              children: (
+                <CompareMenuTab key={key} loading={loading} changeTypeCss={changeTypeCss} changed={changed}>
+                  {tab.props?.children}
+                </CompareMenuTab>
+              ),
+            },
+          },
+        ];
+      }),
+    [_tabs.length, activeTab, changed?.length]
+  );
+
+  const sortedTabs = useMemo(
+    () => extractedTabs.filter(([, tab]) => !tab.widget),
+    [extractedTabs.length, activeTab, changed?.length]
+  );
+  const sortedWidgets = useMemo(
+    () => extractedTabs.filter(([, tab]) => tab.widget),
+    [extractedTabs.length, activeTab, changed?.length]
+  );
 
   return (
     <div className={styles.navContainer}>
-      <nav className={styles.navigation}>
-        {sortedTabs.map((tabItem, index) => {
-          const isActive = !state ? undefined : !!activeTab && !!tabItem.id && activeTab === tabItem.id;
-
-          return (
-            <TopBarNav
-              {...(tabItem.props || {})}
-              key={`compare-menu-nav-${index}-${tabItem.id}`}
-              active={isActive}
-              onClick={onNavClicked({ id: tabItem.id, hooks })}
-              href={(!isControlled && tabItem.props?.href) || undefined}
-            />
-          );
-        })}
-      </nav>
+      <CollapsibleMenuNav navPlugins={sortedTabs} widgetPlugins={sortedWidgets} />
     </div>
   );
 }
@@ -160,3 +223,92 @@ function onNavClicked({ hooks, id }: { hooks?: ComponentCompareHooks; id?: strin
   if (!hooks?.tabs?.onClick) return undefined;
   return (e) => hooks?.tabs?.onClick?.(id, e);
 }
+
+function CompareLoader({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={className} {...rest}>
+      <BlockSkeleton className={styles.navLoader} lines={3} />
+      <div className={styles.compareLoader}>
+        <div className={styles.compareViewLoader}>
+          <BlockSkeleton lines={30} />
+        </div>
+        <div className={styles.compareSidebarLoader}>
+          <BlockSkeleton lines={30} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function TabLoader() {
+  return <WordSkeleton className={styles.tabLoader} length={5} />;
+}
+
+function deriveChangeType(
+  baseId?: ComponentID,
+  compareId?: ComponentID,
+  fileCompareDataByName?: Map<string, FileCompareResult> | null,
+  fieldCompareDataByName?: Map<string, FieldCompareResult> | null
+): ChangeType[] | undefined | null {
+  if (!baseId && !compareId) return null;
+  if (!baseId?.version) return [ChangeType.NEW];
+
+  if (fileCompareDataByName === null || fieldCompareDataByName === null) return null;
+  if (fileCompareDataByName === undefined || fieldCompareDataByName === undefined) return undefined;
+
+  if (
+    fieldCompareDataByName.size === 0 &&
+    (fileCompareDataByName.size === 0 || [...fileCompareDataByName.values()].every((f) => f.status === 'UNCHANGED'))
+  ) {
+    return [ChangeType.NONE];
+  }
+
+  const changed: ChangeType[] = [];
+  const DEPS_FIELD = ['dependencies', 'devDependencies', 'extensionDependencies'];
+
+  if (fileCompareDataByName.size > 0 && [...fileCompareDataByName.values()].some((f) => f.status !== 'UNCHANGED')) {
+    changed.push(ChangeType.SOURCE_CODE);
+  }
+
+  if (fieldCompareDataByName.size > 0) {
+    changed.push(ChangeType.ASPECTS);
+  }
+
+  if ([...fieldCompareDataByName.values()].some((field) => DEPS_FIELD.includes(field.fieldName))) {
+    changed.push(ChangeType.DEPENDENCY);
+  }
+
+  return changed;
+}
+function deriveChangeTypeCssForNav(tab: TabItem, changed: ChangeType[] | null | undefined): string | null {
+  if (!changed || !tab.changeType) return null;
+  const hasChanged = changed.some((change) => tab.changeType === change);
+  return hasChanged ? styles.hasChanged : null;
+}
+
+function CompareMenuTab({
+  children,
+  changed,
+  changeTypeCss,
+  loading,
+  className,
+  ...rest
+}: HTMLAttributes<HTMLDivElement> & {
+  changeTypeCss?: string | null;
+  loading?: boolean;
+  changed?: ChangeType[] | null;
+}) {
+  const hasChanged = useMemo(
+    () => changed?.some((change) => change !== ChangeType.NONE && change !== ChangeType.NEW),
+    [changeTypeCss]
+  );
+
+  if (loading) return <TabLoader />;
+
+  return (
+    <div {...rest} className={classnames(styles.compareMenuTab, className)}>
+      {changeTypeCss && hasChanged && <div className={classnames(styles.indicator, changeTypeCss)}></div>}
+      <div className={classnames(styles.menuTab)}>{children}</div>
+    </div>
+  );
+}

package/dist/component-compare.js

@@ -42,16 +42,18 @@ const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const component_1 = require("@teambit/component");
 const component_ui_component_compare_context_1 = require("@teambit/component.ui.component-compare.context");
+const component_ui_component_compare_hooks_use_component_compare_1 = require("@teambit/component.ui.component-compare.hooks.use-component-compare");
 const component_ui_component_compare_hooks_use_component_compare_url_1 = require("@teambit/component.ui.component-compare.hooks.use-component-compare-url");
 const component_ui_component_compare_version_picker_1 = require("@teambit/component.ui.component-compare.version-picker");
 const component_ui_component_compare_blank_state_1 = require("@teambit/component.ui.component-compare.blank-state");
-const design_ui_round_loader_1 = require("@teambit/design.ui.round-loader");
 const base_react_navigation_link_1 = require("@teambit/base-react.navigation.link");
 const ui_foundation_ui_react_router_slot_router_1 = require("@teambit/ui-foundation.ui.react-router.slot-router");
 const component_ui_component_compare_utils_group_by_version_1 = require("@teambit/component.ui.component-compare.utils.group-by-version");
 const component_ui_component_compare_utils_sort_tabs_1 = require("@teambit/component.ui.component-compare.utils.sort-tabs");
 const component_ui_component_compare_utils_sort_logs_1 = require("@teambit/component.ui.component-compare.utils.sort-logs");
 const component_ui_component_compare_utils_lazy_loading_1 = require("@teambit/component.ui.component-compare.utils.lazy-loading");
+const base_ui_loaders_skeleton_1 = require("@teambit/base-ui.loaders.skeleton");
+const component_ui_component_compare_models_component_compare_change_type_1 = require("@teambit/component.ui.component-compare.models.component-compare-change-type");
 const component_compare_module_scss_1 = __importDefault(require("./component-compare.module.scss"));
 const findPrevVersionFromCurrent = (compareVersion) => (_, index, logs) => {
     if (compareVersion === 'workspace' || logs.length === 1)
@@ -66,7 +68,7 @@ function ComponentCompare(props) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     routes, state, 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    tabs, className, hooks, customUseComponent } = props, rest = __rest(props, ["host", "baseId", "compareId", "routes", "state", "tabs", "className", "hooks", "customUseComponent"]);
+    tabs, className, hooks, changes: changesFromProps, customUseComponent, Loader = CompareLoader } = props, rest = __rest(props, ["host", "baseId", "compareId", "routes", "state", "tabs", "className", "hooks", "changes", "customUseComponent", "Loader"]);
     const baseVersion = (0, component_ui_component_compare_hooks_use_component_compare_url_1.useCompareQueryParam)('baseVersion');
     const component = (0, react_1.useContext)(component_1.ComponentContext);
     const location = (0, base_react_navigation_link_1.useLocation)();
@@ -91,9 +93,33 @@ function ComponentCompare(props) {
     const loading = loadingBase || loadingCompare;
     const compare = _compareId ? compareComponent : component;
     const isEmpty = !loading && !compareIsLocalChanges && !compare && !base;
+    const compCompareId = `${base === null || base === void 0 ? void 0 : base.id.toString()}-${compare === null || compare === void 0 ? void 0 : compare.id.toString()}`;
     const logsByVersion = (0, react_1.useMemo)(() => {
         return ((compare === null || compare === void 0 ? void 0 : compare.logs) || []).slice().reduce(component_ui_component_compare_utils_group_by_version_1.groupByVersion, new Map());
     }, [compare === null || compare === void 0 ? void 0 : compare.id.toString()]);
+    const { loading: compCompareLoading, componentCompareData } = (0, component_ui_component_compare_hooks_use_component_compare_1.useComponentCompareQuery)(base === null || base === void 0 ? void 0 : base.id.toString(), compare === null || compare === void 0 ? void 0 : compare.id.toString());
+    const fileCompareDataByName = (0, react_1.useMemo)(() => {
+        if (loading || compCompareLoading)
+            return undefined;
+        if (!compCompareLoading && !componentCompareData)
+            return null;
+        const _fileCompareDataByName = new Map();
+        ((componentCompareData === null || componentCompareData === void 0 ? void 0 : componentCompareData.code) || []).forEach((codeCompareData) => {
+            _fileCompareDataByName.set(codeCompareData.fileName, codeCompareData);
+        });
+        return _fileCompareDataByName;
+    }, [compCompareLoading, loading, compCompareId]);
+    const fieldCompareDataByName = (0, react_1.useMemo)(() => {
+        if (loading || compCompareLoading)
+            return undefined;
+        if (!compCompareLoading && !componentCompareData)
+            return null;
+        const _fieldCompareDataByName = new Map();
+        ((componentCompareData === null || componentCompareData === void 0 ? void 0 : componentCompareData.aspects) || []).forEach((aspectCompareData) => {
+            _fieldCompareDataByName.set(aspectCompareData.fieldName, aspectCompareData);
+        });
+        return _fieldCompareDataByName;
+    }, [compCompareLoading, loading, compCompareId]);
     const componentCompareModel = {
         compare: compare && {
             model: compare,
@@ -106,36 +132,48 @@ function ComponentCompare(props) {
         logsByVersion,
         state,
         hooks,
+        fieldCompareDataByName,
+        fileCompareDataByName,
     };
+    const changes = changesFromProps || deriveChangeType(baseId, compare === null || compare === void 0 ? void 0 : compare.id, fileCompareDataByName, fieldCompareDataByName);
     return (react_1.default.createElement(component_ui_component_compare_context_1.ComponentCompareContext.Provider, { value: componentCompareModel },
         react_1.default.createElement("div", Object.assign({ className: (0, classnames_1.default)(component_compare_module_scss_1.default.componentCompareContainer, className) }, rest),
-            loading && (react_1.default.createElement("div", { className: component_compare_module_scss_1.default.loader },
-                react_1.default.createElement(design_ui_round_loader_1.RoundLoader, null))),
+            loading && react_1.default.createElement(Loader, { className: (0, classnames_1.default)(component_compare_module_scss_1.default.loader) }),
             isEmpty && react_1.default.createElement(component_ui_component_compare_blank_state_1.ComponentCompareBlankState, null),
-            !isEmpty && react_1.default.createElement(RenderCompareScreen, Object.assign({}, props)))));
+            !loading && !isEmpty && react_1.default.createElement(RenderCompareScreen, Object.assign({ key: compCompareId }, props, { changes: changes })))));
 }
 exports.ComponentCompare = ComponentCompare;
 function RenderCompareScreen(props) {
-    var _a, _b;
+    var _a, _b, _c;
     const { routes, state } = props;
+    const showVersionPicker = ((_a = state === null || state === void 0 ? void 0 : state.versionPicker) === null || _a === void 0 ? void 0 : _a.element) !== null;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: component_compare_module_scss_1.default.top }, (!(state === null || state === void 0 ? void 0 : state.versionPicker) && react_1.default.createElement(component_ui_component_compare_version_picker_1.ComponentCompareVersionPicker, null)) || ((_a = state === null || state === void 0 ? void 0 : state.versionPicker) === null || _a === void 0 ? void 0 : _a.element)),
+        showVersionPicker && (react_1.default.createElement("div", { className: component_compare_module_scss_1.default.top }, ((_b = state === null || state === void 0 ? void 0 : state.versionPicker) === null || _b === void 0 ? void 0 : _b.element) || react_1.default.createElement(component_ui_component_compare_version_picker_1.ComponentCompareVersionPicker, null))),
         react_1.default.createElement("div", { className: component_compare_module_scss_1.default.bottom },
             react_1.default.createElement(CompareMenuNav, Object.assign({}, props)),
-            ((0, component_ui_component_compare_utils_lazy_loading_1.extractLazyLoadedData)(routes) || []).length > 0 && (react_1.default.createElement(ui_foundation_ui_react_router_slot_router_1.SlotRouter, { routes: (0, component_ui_component_compare_utils_lazy_loading_1.extractLazyLoadedData)(routes) || [] })), (_b = state === null || state === void 0 ? void 0 : state.tabs) === null || _b === void 0 ? void 0 :
-            _b.element)));
+            ((0, component_ui_component_compare_utils_lazy_loading_1.extractLazyLoadedData)(routes) || []).length > 0 && (react_1.default.createElement(ui_foundation_ui_react_router_slot_router_1.SlotRouter, { routes: (0, component_ui_component_compare_utils_lazy_loading_1.extractLazyLoadedData)(routes) || [] })), (_c = state === null || state === void 0 ? void 0 : state.tabs) === null || _c === void 0 ? void 0 :
+            _c.element)));
 }
-function CompareMenuNav({ tabs, state, hooks }) {
+function CompareMenuNav({ tabs, state, hooks, changes: changed }) {
     var _a, _b;
-    const sortedTabs = ((0, component_ui_component_compare_utils_lazy_loading_1.extractLazyLoadedData)(tabs) || []).sort(component_ui_component_compare_utils_sort_tabs_1.sortTabs);
     const activeTab = (_a = state === null || state === void 0 ? void 0 : state.tabs) === null || _a === void 0 ? void 0 : _a.id;
     const isControlled = (_b = state === null || state === void 0 ? void 0 : state.tabs) === null || _b === void 0 ? void 0 : _b.controlled;
+    const _tabs = (0, component_ui_component_compare_utils_lazy_loading_1.extractLazyLoadedData)(tabs) || [];
+    const extractedTabs = (0, react_1.useMemo)(() => _tabs.sort(component_ui_component_compare_utils_sort_tabs_1.sortTabs).map((tab, index) => {
+        var _a, _b;
+        const isActive = !state ? undefined : !!activeTab && !!(tab === null || tab === void 0 ? void 0 : tab.id) && activeTab === tab.id;
+        const changeTypeCss = deriveChangeTypeCssForNav(tab, changed);
+        const loading = changed === undefined;
+        const key = `${tab.id}-tab-${changeTypeCss}`;
+        return [
+            tab.id || `tab-${index}`,
+            Object.assign(Object.assign({}, tab), { props: Object.assign(Object.assign({}, (tab.props || {})), { key, displayName: (!loading && tab.displayName) || undefined, active: isActive, onClick: onNavClicked({ id: tab.id, hooks }), href: (!isControlled && ((_a = tab.props) === null || _a === void 0 ? void 0 : _a.href)) || undefined, activeClassName: (!loading && component_compare_module_scss_1.default.activeNav) || component_compare_module_scss_1.default.loadingNav, className: component_compare_module_scss_1.default.navItem, children: (react_1.default.createElement(CompareMenuTab, { key: key, loading: loading, changeTypeCss: changeTypeCss, changed: changed }, (_b = tab.props) === null || _b === void 0 ? void 0 : _b.children)) }) }),
+        ];
+    }), [_tabs.length, activeTab, changed === null || changed === void 0 ? void 0 : changed.length]);
+    const sortedTabs = (0, react_1.useMemo)(() => extractedTabs.filter(([, tab]) => !tab.widget), [extractedTabs.length, activeTab, changed === null || changed === void 0 ? void 0 : changed.length]);
+    const sortedWidgets = (0, react_1.useMemo)(() => extractedTabs.filter(([, tab]) => tab.widget), [extractedTabs.length, activeTab, changed === null || changed === void 0 ? void 0 : changed.length]);
     return (react_1.default.createElement("div", { className: component_compare_module_scss_1.default.navContainer },
-        react_1.default.createElement("nav", { className: component_compare_module_scss_1.default.navigation }, sortedTabs.map((tabItem, index) => {
-            var _a;
-            const isActive = !state ? undefined : !!activeTab && !!tabItem.id && activeTab === tabItem.id;
-            return (react_1.default.createElement(component_1.TopBarNav, Object.assign({}, (tabItem.props || {}), { key: `compare-menu-nav-${index}-${tabItem.id}`, active: isActive, onClick: onNavClicked({ id: tabItem.id, hooks }), href: (!isControlled && ((_a = tabItem.props) === null || _a === void 0 ? void 0 : _a.href)) || undefined })));
-        }))));
+        react_1.default.createElement(component_1.CollapsibleMenuNav, { navPlugins: sortedTabs, widgetPlugins: sortedWidgets })));
 }
 function onNavClicked({ hooks, id }) {
     var _a;
@@ -143,4 +181,58 @@ function onNavClicked({ hooks, id }) {
         return undefined;
     return (e) => { var _a, _b; return (_b = (_a = hooks === null || hooks === void 0 ? void 0 : hooks.tabs) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, id, e); };
 }
+function CompareLoader(_a) {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (react_1.default.createElement("div", Object.assign({ className: className }, rest),
+        react_1.default.createElement(base_ui_loaders_skeleton_1.BlockSkeleton, { className: component_compare_module_scss_1.default.navLoader, lines: 3 }),
+        react_1.default.createElement("div", { className: component_compare_module_scss_1.default.compareLoader },
+            react_1.default.createElement("div", { className: component_compare_module_scss_1.default.compareViewLoader },
+                react_1.default.createElement(base_ui_loaders_skeleton_1.BlockSkeleton, { lines: 30 })),
+            react_1.default.createElement("div", { className: component_compare_module_scss_1.default.compareSidebarLoader },
+                react_1.default.createElement(base_ui_loaders_skeleton_1.BlockSkeleton, { lines: 30 })))));
+}
+function TabLoader() {
+    return react_1.default.createElement(base_ui_loaders_skeleton_1.WordSkeleton, { className: component_compare_module_scss_1.default.tabLoader, length: 5 });
+}
+function deriveChangeType(baseId, compareId, fileCompareDataByName, fieldCompareDataByName) {
+    if (!baseId && !compareId)
+        return null;
+    if (!(baseId === null || baseId === void 0 ? void 0 : baseId.version))
+        return [component_ui_component_compare_models_component_compare_change_type_1.ChangeType.NEW];
+    if (fileCompareDataByName === null || fieldCompareDataByName === null)
+        return null;
+    if (fileCompareDataByName === undefined || fieldCompareDataByName === undefined)
+        return undefined;
+    if (fieldCompareDataByName.size === 0 &&
+        (fileCompareDataByName.size === 0 || [...fileCompareDataByName.values()].every((f) => f.status === 'UNCHANGED'))) {
+        return [component_ui_component_compare_models_component_compare_change_type_1.ChangeType.NONE];
+    }
+    const changed = [];
+    const DEPS_FIELD = ['dependencies', 'devDependencies', 'extensionDependencies'];
+    if (fileCompareDataByName.size > 0 && [...fileCompareDataByName.values()].some((f) => f.status !== 'UNCHANGED')) {
+        changed.push(component_ui_component_compare_models_component_compare_change_type_1.ChangeType.SOURCE_CODE);
+    }
+    if (fieldCompareDataByName.size > 0) {
+        changed.push(component_ui_component_compare_models_component_compare_change_type_1.ChangeType.ASPECTS);
+    }
+    if ([...fieldCompareDataByName.values()].some((field) => DEPS_FIELD.includes(field.fieldName))) {
+        changed.push(component_ui_component_compare_models_component_compare_change_type_1.ChangeType.DEPENDENCY);
+    }
+    return changed;
+}
+function deriveChangeTypeCssForNav(tab, changed) {
+    if (!changed || !tab.changeType)
+        return null;
+    const hasChanged = changed.some((change) => tab.changeType === change);
+    return hasChanged ? component_compare_module_scss_1.default.hasChanged : null;
+}
+function CompareMenuTab(_a) {
+    var { children, changed, changeTypeCss, loading, className } = _a, rest = __rest(_a, ["children", "changed", "changeTypeCss", "loading", "className"]);
+    const hasChanged = (0, react_1.useMemo)(() => changed === null || changed === void 0 ? void 0 : changed.some((change) => change !== component_ui_component_compare_models_component_compare_change_type_1.ChangeType.NONE && change !== component_ui_component_compare_models_component_compare_change_type_1.ChangeType.NEW), [changeTypeCss]);
+    if (loading)
+        return react_1.default.createElement(TabLoader, null);
+    return (react_1.default.createElement("div", Object.assign({}, rest, { className: (0, classnames_1.default)(component_compare_module_scss_1.default.compareMenuTab, className) }),
+        changeTypeCss && hasChanged && react_1.default.createElement("div", { className: (0, classnames_1.default)(component_compare_module_scss_1.default.indicator, changeTypeCss) }),
+        react_1.default.createElement("div", { className: (0, classnames_1.default)(component_compare_module_scss_1.default.menuTab) }, children)));
+}
 //# sourceMappingURL=component-compare.js.map

package/dist/component-compare.js.map

@@ -1 +1 @@
-{"version":3,"file":"component-compare.js","sourceRoot":"","sources":["../component-compare.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"component-compare.js","sourceRoot":"","sources":["../component-compare.tsx"],"names":[],"mappings":"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"}

package/dist/component-compare.module.scss

@@ -29,8 +29,8 @@
 
 .navigation {
   display: flex;
-  list-style: none;
   min-height: 48px;
+  align-items: center;
 
   @media screen and (max-width: 768px) {
     padding-left: 6px;
@@ -44,8 +44,84 @@
 }
 
 .loader {
+  padding: 16px 24px;
+  color: var(--bit-bg-dent, #f6f6f6);
+}
+
+.tabLoader {
+  color: var(--bit-bg-dent, #f6f6f6);
+}
+
+.compareLoader {
   display: flex;
-  height: 100%;
-  width: 100%;
-  margin: auto;
+  padding-top: 16px;
+}
+
+.compareSidebarLoader {
+  width: 30%;
+}
+
+.compareViewLoader {
+  width: 70%;
+  padding-right: 16px;
+}
+
+.activeNav {
+  > div {
+    color: var(--bit-accent-color, #6c5ce7);
+    border-radius: 5px;
+    background-color: var(--bit-accent-bg, #edebfc);
+  }
+
+  &:after {
+    // unset default selection styles
+    height: 0 !important;
+  }
+}
+
+.loadingNav {
+  // > div {
+  //   color: var(--bit-accent-color, #6c5ce7);
+  //   border-radius: 5px;
+  //   background-color: var(--bit-accent-bg, #edebfc);
+  // }
+
+  &:after {
+    // unset default selection styles
+    height: 0 !important;
+  }
+}
+
+.navItem {
+  position: relative;
+  color: var(--bit-text-color-light, #707279);
+
+  &.none {
+    > div {
+      opacity: 65%;
+    }
+  }
+}
+
+.compareMenuTab {
+  position: relative;
+}
+
+.indicator {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  border-radius: 100%;
+  padding: 4px;
+  box-sizing: border-box;
+
+  &.hasChanged {
+    background-color: #ff8b00;
+  }
+
+  &.new {
+    // @todo - review styles
+    display: none;
+    background-color: var(--bit-accent-success-color, #37b26c);
+  }
 }

package/package.json

@@ -1,28 +1,31 @@
 {
   "name": "@teambit/component.ui.component-compare.component-compare",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "homepage": "https://bit.dev/teambit/component/ui/component-compare/component-compare",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "ui/component-compare/component-compare",
-    "version": "0.0.20"
+    "version": "0.0.22"
   },
   "dependencies": {
     "classnames": "2.2.6",
     "core-js": "^3.0.0",
     "@teambit/base-react.navigation.link": "2.0.27",
+    "@teambit/base-ui.loaders.skeleton": "1.0.1",
     "@teambit/component.ui.component-compare.blank-state": "0.0.1",
-    "@teambit/component.ui.component-compare.context": "0.0.5",
+    "@teambit/component.ui.component-compare.context": "0.0.6",
     "@teambit/component.ui.component-compare.hooks.use-component-compare-url": "0.0.2",
-    "@teambit/component.ui.component-compare.models.component-compare-hooks": "0.0.2",
-    "@teambit/component.ui.component-compare.models.component-compare-props": "0.0.2",
+    "@teambit/component.ui.component-compare.hooks.use-component-compare": "0.0.4",
+    "@teambit/component.ui.component-compare.models.component-compare-change-type": "0.0.1",
+    "@teambit/component.ui.component-compare.models.component-compare-hooks": "0.0.3",
+    "@teambit/component.ui.component-compare.models.component-compare-model": "0.0.3",
+    "@teambit/component.ui.component-compare.models.component-compare-props": "0.0.3",
     "@teambit/component.ui.component-compare.utils.group-by-version": "0.0.2",
     "@teambit/component.ui.component-compare.utils.lazy-loading": "0.0.1",
     "@teambit/component.ui.component-compare.utils.sort-logs": "0.0.2",
-    "@teambit/component.ui.component-compare.utils.sort-tabs": "0.0.2",
-    "@teambit/component.ui.component-compare.version-picker": "0.0.20",
-    "@teambit/design.ui.round-loader": "0.0.355",
+    "@teambit/component.ui.component-compare.utils.sort-tabs": "0.0.3",
+    "@teambit/component.ui.component-compare.version-picker": "0.0.22",
     "@teambit/legacy-component-log": "0.0.399",
     "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.501"
   },