fixes(Component UI + Compare): ui fixes

.bitmap

@@ -1365,6 +1365,144 @@
         "mainFile": "index.ts",
         "rootDir": "components/ui/compare/lane-compare-state"
     },
+    "ui/component-compare/blank-state": {
+        "scope": "teambit.component",
+        "version": "0.0.2",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/component-compare/blank-state"
+    },
+    "ui/component-compare/changelog": {
+        "scope": "teambit.component",
+        "version": "0.0.72",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/component-compare/changelog"
+    },
+    "ui/component-compare/compare-aspects/compare-aspect-view": {
+        "scope": "teambit.component",
+        "version": "0.0.8",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/component-compare/compare-aspects/compare-aspect-view"
+    },
+    "ui/component-compare/compare-aspects/compare-aspects": {
+        "scope": "teambit.component",
+        "version": "0.0.49",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/component-compare/compare-aspects/compare-aspects"
+    },
+    "ui/component-compare/compare-aspects/context": {
+        "scope": "teambit.component",
+        "version": "0.0.6",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/component-compare/compare-aspects/context"
+    },
+    "ui/component-compare/compare-aspects/hooks/use-compare-aspects": {
+        "scope": "teambit.component",
+        "version": "0.0.22",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/component-compare/compare-aspects/hooks/use-compare-aspects"
+    },
+    "ui/component-compare/compare-aspects/models/component-compare-aspects-model": {
+        "scope": "teambit.component",
+        "version": "0.0.5",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/component-compare/compare-aspects/models/component-compare-aspects-model"
+    },
+    "ui/component-compare/component-compare": {
+        "scope": "teambit.component",
+        "version": "0.0.72",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/component-compare/component-compare"
+    },
+    "ui/component-compare/context": {
+        "scope": "teambit.component",
+        "version": "0.0.22",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/component-compare/context"
+    },
+    "ui/component-compare/hooks/use-component-compare": {
+        "scope": "teambit.component",
+        "version": "0.0.20",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/component-compare/hooks/use-component-compare"
+    },
+    "ui/component-compare/hooks/use-component-compare-url": {
+        "scope": "teambit.component",
+        "version": "0.0.3",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/component-compare/hooks/use-component-compare-url"
+    },
+    "ui/component-compare/layouts/compare-split-layout-preset": {
+        "scope": "teambit.component",
+        "version": "0.0.3",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/component-compare/layouts/compare-split-layout-preset"
+    },
+    "ui/component-compare/models/component-compare-change-type": {
+        "scope": "teambit.component",
+        "version": "0.0.1",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/component-compare/models/component-compare-change-type"
+    },
+    "ui/component-compare/models/component-compare-hooks": {
+        "scope": "teambit.component",
+        "version": "0.0.4",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/component-compare/models/component-compare-hooks"
+    },
+    "ui/component-compare/models/component-compare-model": {
+        "scope": "teambit.component",
+        "version": "0.0.18",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/component-compare/models/component-compare-model"
+    },
+    "ui/component-compare/models/component-compare-props": {
+        "scope": "teambit.component",
+        "version": "0.0.7",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/component-compare/models/component-compare-props"
+    },
+    "ui/component-compare/models/component-compare-state": {
+        "scope": "teambit.component",
+        "version": "0.0.2",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/component-compare/models/component-compare-state"
+    },
+    "ui/component-compare/status-resolver": {
+        "scope": "teambit.component",
+        "version": "0.0.4",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/component-compare/status-resolver"
+    },
+    "ui/component-compare/utils/group-by-version": {
+        "scope": "teambit.component",
+        "version": "0.0.2",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/component-compare/utils/group-by-version"
+    },
+    "ui/component-compare/utils/lazy-loading": {
+        "scope": "teambit.component",
+        "version": "0.0.1",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/component-compare/utils/lazy-loading"
+    },
+    "ui/component-compare/utils/sort-logs": {
+        "scope": "teambit.component",
+        "version": "0.0.2",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/component-compare/utils/sort-logs"
+    },
+    "ui/component-compare/utils/sort-tabs": {
+        "scope": "teambit.component",
+        "version": "0.0.7",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/component-compare/utils/sort-tabs"
+    },
+    "ui/component-compare/version-picker": {
+        "scope": "teambit.component",
+        "version": "0.0.72",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/component-compare/version-picker"
+    },
     "ui/component-deprecated": {
         "scope": "teambit.component",
         "version": "0.0.34",

components/ui/compare/lane-compare/lane-compare.tsx

@@ -429,6 +429,7 @@ export function LaneCompare({
                 },
                 customUseComponent,
                 Loader: ComponentCompareLoader,
+                isFullScreen,
               };
 
               // eslint-disable-next-line react/prop-types

components/ui/component-compare/blank-state/blank-state.tsx

@@ -0,0 +1,15 @@
+import React, { HTMLAttributes } from 'react';
+import { EmptyBox } from '@teambit/design.ui.empty-box';
+
+export type ComponentCompareBlankStateProps = {} & HTMLAttributes<HTMLDivElement>;
+
+export function ComponentCompareBlankState({ className }: ComponentCompareBlankStateProps) {
+  return (
+    <EmptyBox
+      className={className}
+      title="This component doesn't have multiple versions or snaps to compare."
+      linkText="Learn more about tagging and snapping components"
+      link={`https://bit.dev/docs/getting-started/collaborate/snap-component-changes`}
+    />
+  );
+}

components/ui/component-compare/blank-state/index.ts

@@ -0,0 +1 @@
+export { ComponentCompareBlankState, ComponentCompareBlankStateProps } from './blank-state';

components/ui/component-compare/changelog/component-compare-changelog.module.scss

@@ -0,0 +1,7 @@
+.changeLogPage {
+  display: flex;
+  padding: 16px;
+  flex-direction: column;
+  overflow-y: auto;
+  box-sizing: border-box;
+}

components/ui/component-compare/changelog/component-compare-changelog.tsx

@@ -0,0 +1,81 @@
+import React, { HTMLAttributes, useMemo, useContext } from 'react';
+import { LegacyComponentLog } from '@teambit/legacy-component-log';
+import { VersionBlock } from '@teambit/component.ui.version-block';
+import { ComponentContext } from '@teambit/component';
+import classNames from 'classnames';
+import { useComponentCompare } from '@teambit/component.ui.component-compare.context';
+import { sortByDateDsc } from '@teambit/component.ui.component-compare.utils.sort-logs';
+
+import styles from './component-compare-changelog.module.scss';
+
+export type ComponentCompareChangelog = {} & HTMLAttributes<HTMLDivElement>;
+
+const orderByDateDsc: (
+  logA?: LegacyComponentLog,
+  logB?: LegacyComponentLog
+) => [LegacyComponentLog | undefined, LegacyComponentLog | undefined] = (logA, logB) => {
+  const { date: dateStrB } = logB || {};
+  const { date: dateStrA } = logA || {};
+
+  const dateA = dateStrA ? new Date(parseInt(dateStrA)) : new Date();
+  const dateB = dateStrB ? new Date(parseInt(dateStrB)) : new Date();
+
+  if (dateA <= dateB) return [logB, logA];
+  return [logA, logB];
+};
+
+const getLogsBetweenVersions: (
+  allLogs: LegacyComponentLog[],
+  baseVersion?: LegacyComponentLog,
+  compareVersion?: LegacyComponentLog
+) => LegacyComponentLog[] = (allLogs, baseVersion, compareVersion) => {
+  const [startingVersion, endingVersion] = orderByDateDsc(baseVersion, compareVersion);
+  const { startingVersionIndex, endingVersionIndex } = allLogs.reduce((accum, next, index) => {
+    if (next.hash === startingVersion?.hash) {
+      accum = { ...accum, startingVersionIndex: index };
+    }
+    if (next.hash === endingVersion?.hash) {
+      accum = { ...accum, endingVersionIndex: index };
+    }
+    return accum;
+  }, {} as { startingVersionIndex: number; endingVersionIndex: number });
+
+  return allLogs.filter((_, index) => index >= startingVersionIndex && index <= endingVersionIndex);
+};
+
+export function ComponentCompareChangelog({ className }: ComponentCompareChangelog) {
+  const component = useContext(ComponentContext);
+  const componentCompareContext = useComponentCompare();
+  const { base, compare, logsByVersion } = componentCompareContext || {};
+
+  const allLogs = useMemo(
+    () => (compare?.model.logs || []).slice().sort(sortByDateDsc),
+    [compare?.model.id.toString()]
+  );
+
+  const baseVersionInfo = base?.model.version ? logsByVersion?.get(base?.model.version) : undefined;
+  const compareVersionInfo = compare?.model.version ? logsByVersion?.get(compare?.model.version) : undefined;
+
+  const logs = useMemo(
+    () => getLogsBetweenVersions(allLogs, baseVersionInfo, compareVersionInfo),
+    [baseVersionInfo?.hash, compareVersionInfo?.hash]
+  );
+
+  return (
+    <div className={classNames(styles.changeLogPage, className)}>
+      {logs.map((snap, index) => {
+        const isLatest = component.latest === snap.tag || component.latest === snap.hash;
+        const isCurrent = component.version === snap.tag || component.version === snap.hash;
+        return (
+          <VersionBlock
+            isCurrent={isCurrent}
+            isLatest={isLatest}
+            key={`comp-compare-changelog-${index}`}
+            componentId={component.id.fullName}
+            snap={snap}
+          />
+        );
+      })}
+    </div>
+  );
+}

components/ui/component-compare/changelog/index.ts

@@ -0,0 +1 @@
+export { ComponentCompareChangelog } from './component-compare-changelog';

components/ui/component-compare/compare-aspects/compare-aspect-view/compare-aspect-view.module.scss

@@ -0,0 +1,50 @@
+/**
+  * Monaco container is not flex so providing it a fixed calculated height
+  * so it can fill up the remaining space correctly instead of overflowing
+  *  diff editor headers: h4 (24px) + padding (8px * 2) = 56px
+  */
+$editor-padding: 56px;
+
+.componentCompareAspectViewContainer {
+  width: 100%;
+  height: 100%;
+}
+.componentCompareAspectDiffEditorContainer {
+  padding: 0px 8px;
+  display: flex;
+  flex-direction: column;
+  height: calc(100% - $editor-padding);
+}
+
+.name {
+  display: flex;
+  align-items: baseline;
+  padding: 8px;
+}
+
+.componentCompareAspectConfigDiff,
+.componentCompareAspectCalculatedDiff {
+  display: flex;
+  flex: 1;
+  padding: 0px 8px;
+  height: 100%;
+  flex-direction: column;
+
+  > section {
+    overflow: hidden;
+    border-radius: 8px;
+  }
+}
+
+.loader {
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  height: 100%;
+  width: 100%;
+  color: var(--on-surface-neutral-low-color, #282828);
+  background-image: linear-gradient(to right, currentColor 0%, #2b2b2b 30%, #2b2b2b 50%, currentColor 100%);
+  > div {
+    background-image: linear-gradient(to right, currentColor 0%, #2b2b2b 30%, #2b2b2b 50%, currentColor 100%);
+  }
+}