From 1474c7fec6ff2bfa8a58f1d0d4f897ff75982d0b Mon Sep 17 00:00:00 2001 From: Luv Kapur Date: Mon, 6 Feb 2023 19:15:21 -0500 Subject: [PATCH 1/9] expose snap distance via gql --- scopes/lanes/lanes/lanes.graphql.ts | 7 +++++++ scopes/lanes/lanes/lanes.main.runtime.ts | 21 ++++++++++++++++++++- 2 files changed, 27 insertions(+), 1 deletion(-) diff --git a/scopes/lanes/lanes/lanes.graphql.ts b/scopes/lanes/lanes/lanes.graphql.ts index 6c4f2af78ed2..b3d37a7372f7 100644 --- a/scopes/lanes/lanes/lanes.graphql.ts +++ b/scopes/lanes/lanes/lanes.graphql.ts @@ -13,6 +13,12 @@ export function lanesSchema(lanesMainRuntime: LanesMain): Schema { diffOutput: String } + type SnapDistance { + onSource: [String!]! + onTarget: [String!]! + common: String + } + type FieldsDiff { fieldName: String! diffOutput: String @@ -60,6 +66,7 @@ export function lanesSchema(lanesMainRuntime: LanesMain): Schema { """ changes: [String!] upToDate: Boolean + snapsDistance: SnapDistance } type LaneDiffStatus { diff --git a/scopes/lanes/lanes/lanes.main.runtime.ts b/scopes/lanes/lanes/lanes.main.runtime.ts index e52b2b1918c5..6aa158db76ed 100644 --- a/scopes/lanes/lanes/lanes.main.runtime.ts +++ b/scopes/lanes/lanes/lanes.main.runtime.ts @@ -52,6 +52,12 @@ import { LanesDeleteRoute } from './lanes.delete.route'; export { Lane }; +export type SnapsDistanceObj = { + onSource: string[]; + onTarget: string[]; + common?: string; +}; + export type LaneResults = { lanes: LaneData[]; currentLane?: string | null; @@ -82,6 +88,7 @@ export type LaneComponentDiffStatus = { changeType?: ChangeType; changes?: ChangeType[]; upToDate?: boolean; + snapsDistance?: SnapsDistanceObj; }; export type LaneDiffStatusOptions = { @@ -695,7 +702,19 @@ export class LanesMain { const changes = !options?.skipChanges ? await getChanges() : undefined; const changeType = changes ? changes[0] : undefined; - return { componentId, changeType, changes, sourceHead, targetHead, upToDate: snapsDistance?.isUpToDate() }; + return { + componentId, + changeType, + changes, + sourceHead, + targetHead, + upToDate: snapsDistance?.isUpToDate(), + snapsDistance: { + onSource: snapsDistance?.snapsOnSourceOnly.map((s) => s.hash) ?? [], + onTarget: snapsDistance?.snapsOnTargetOnly.map((s) => s.hash) ?? [], + common: snapsDistance?.commonSnapBeforeDiverge?.hash, + }, + }; } async addLaneReadme(readmeComponentIdStr: string, laneName?: string): Promise<{ result: boolean; message?: string }> { From ce0f13bfbd268d98e2ef5a4734d9adfc85b64c10 Mon Sep 17 00:00:00 2001 From: Luv Kapur Date: Mon, 6 Feb 2023 21:26:15 -0500 Subject: [PATCH 2/9] lane compare page --- scopes/lanes/lanes/lanes.ui.runtime.tsx | 9 ++- .../lane-compare-page.module.scss | 25 ++++++++ .../lane-compare-page/lane-compare-page.tsx | 58 ++++++++++++++++--- .../ui/compare/lane-compare/lane-compare.tsx | 12 ++-- .../lane-selector/lane-grouped-menu-item.tsx | 32 ++++++++-- .../inputs/lane-selector/lane-menu-item.tsx | 20 ++++++- .../lane-selector/lane-selector.module.scss | 4 +- .../ui/inputs/lane-selector/lane-selector.tsx | 33 +++++++++-- .../lane-switcher/lane-switcher.module.scss | 3 +- 9 files changed, 163 insertions(+), 33 deletions(-) diff --git a/scopes/lanes/lanes/lanes.ui.runtime.tsx b/scopes/lanes/lanes/lanes.ui.runtime.tsx index ef5812cf10b0..0737b11abaa1 100644 --- a/scopes/lanes/lanes/lanes.ui.runtime.tsx +++ b/scopes/lanes/lanes/lanes.ui.runtime.tsx @@ -80,7 +80,7 @@ export class LanesUI { - {/* */} + } /> } /> @@ -211,10 +211,13 @@ export class LanesUI { { props: { href: '~compare', - children: 'Lane Compare', + children: 'Compare', }, order: 2, - hide: () => true, + hide: () => { + const { lanesModel } = useLanes(); + return !lanesModel?.viewedLane || lanesModel.viewedLane.id.isDefault(); + }, }, ]); } diff --git a/scopes/lanes/ui/compare/lane-compare-page/lane-compare-page.module.scss b/scopes/lanes/ui/compare/lane-compare-page/lane-compare-page.module.scss index 77d3731dbf89..5a42862f958c 100644 --- a/scopes/lanes/ui/compare/lane-compare-page/lane-compare-page.module.scss +++ b/scopes/lanes/ui/compare/lane-compare-page/lane-compare-page.module.scss @@ -8,4 +8,29 @@ .top { display: flex; padding: 32px; + align-items: center; + width: 60%; + + > div { + display: flex; + } +} + +.compareLane { + padding: 8px; + background: var(--surface-neutral-focus-color); + border-radius: 6px; + margin: 0px 2px; + width: fit-content; +} + +.baseSelectorContainer { + padding: 0px 4px; + flex: 2; + width: 100%; + min-width: 100px; + max-width: 200px; + > div:first-of-type { + width: 100%; + } } diff --git a/scopes/lanes/ui/compare/lane-compare-page/lane-compare-page.tsx b/scopes/lanes/ui/compare/lane-compare-page/lane-compare-page.tsx index b7223d487aee..c6c2e62e27a8 100644 --- a/scopes/lanes/ui/compare/lane-compare-page/lane-compare-page.tsx +++ b/scopes/lanes/ui/compare/lane-compare-page/lane-compare-page.tsx @@ -1,27 +1,69 @@ -import React, { HTMLAttributes } from 'react'; +import React, { HTMLAttributes, useState, useEffect, useMemo } from 'react'; import { LaneCompareProps } from '@teambit/lanes'; import { useLanes } from '@teambit/lanes.hooks.use-lanes'; +import { LaneSelector } from '@teambit/lanes.ui.inputs.lane-selector'; +import { LaneModel } from '@teambit/lanes.ui.models.lanes-model'; +import { LaneId } from '@teambit/lane-id'; +import { LaneIcon } from '@teambit/lanes.ui.icons.lane-icon'; import styles from './lane-compare-page.module.scss'; export type LaneComparePageProps = { getLaneCompare: (props: LaneCompareProps) => React.ReactNode; + groupByScope?: boolean; } & HTMLAttributes; -export function LaneComparePage({ getLaneCompare, ...rest }: LaneComparePageProps) { +export function LaneComparePage({ getLaneCompare, groupByScope, ...rest }: LaneComparePageProps) { const { lanesModel } = useLanes(); + const [base, setBase] = useState(); + const defaultLane = lanesModel?.getDefaultLane(); + const compare = lanesModel?.viewedLane; - if (!lanesModel) return null; + useEffect(() => { + if (!base && defaultLane) { + setBase(defaultLane); + } + }, [defaultLane]); + + const LaneCompareComponent = useMemo(() => { + return getLaneCompare({ base, compare }); + }, [base?.id.toString(), compare?.id.toString()]); - const base = lanesModel.lanes[0]; - const compare = lanesModel.lanes[1]; + const lanes: Array = useMemo(() => { + const mainLaneId = defaultLane?.id; + const nonMainLaneIds = lanesModel?.getNonMainLanes().map((lane) => lane.id) || []; + const allLanes = (mainLaneId && [mainLaneId, ...nonMainLaneIds]) || nonMainLaneIds; + return allLanes.filter((l) => l.toString() !== compare?.id.toString()); + }, [defaultLane?.id?.toString(), lanesModel?.lanes.length]); - const LaneCompareComponent = getLaneCompare({ base, compare }); + if (!lanesModel) return null; + if (!lanesModel.viewedLane) return null; + if (lanesModel.viewedLane?.id.isDefault()) return null; + if (!base) return null; return (
-
{`Comparing Lane ${compare?.id.toString()} with ${base?.id.toString()}`}
- {LaneCompareComponent} +
+
Compare
+
+ + {compare?.id.name} +
+
with
+
+ ''} + onLaneSelected={(laneId) => { + setBase(lanesModel?.lanes.find((l) => l.id.toString() === laneId.toString())); + }} + /> +
+
+
{LaneCompareComponent}
); } diff --git a/scopes/lanes/ui/compare/lane-compare/lane-compare.tsx b/scopes/lanes/ui/compare/lane-compare/lane-compare.tsx index 1115d168c58f..9efed7a151e5 100644 --- a/scopes/lanes/ui/compare/lane-compare/lane-compare.tsx +++ b/scopes/lanes/ui/compare/lane-compare/lane-compare.tsx @@ -93,7 +93,7 @@ export function LaneCompare({ componentDiff.componentId.changeVersion(componentDiff.sourceHead), ])) || [], - [loadingLaneDiff] + [loadingLaneDiff, base.id.toString(), compare.id.toString()] ); const defaultState = useCallback(() => { @@ -140,7 +140,7 @@ export function LaneCompare({ ) ); } - }, [allComponents.length]); + }, [loadingLaneDiff, allComponents.length, base.id.toString(), compare.id.toString()]); const [openDrawerList, onToggleDrawer] = useState([]); @@ -191,7 +191,7 @@ export function LaneCompare({ accum.set(next.componentId.toStringWithoutVersion(), next); return accum; }, new Map()); - }, [loadingLaneDiff]); + }, [base.id.toString(), compare.id.toString(), loadingLaneDiff]); const groupedComponents = useMemo(() => { if (laneComponentDiffByCompId.size === 0) return null; @@ -211,12 +211,12 @@ export function LaneCompare({ accum.set(changeType, existing.concat([[baseId, compareId]])); return accum; }, new Map>()); - }, [base.id.toString(), compare.id.toString(), laneComponentDiffByCompId.size]); + }, [base.id.toString(), compare.id.toString(), laneComponentDiffByCompId.size, loadingLaneDiff, laneDiff]); const Loading = useMemo(() => { if (!loadingLaneDiff) return null; return ; - }, [loadingLaneDiff]); + }, [base.id.toString(), compare.id.toString(), loadingLaneDiff]); const ComponentCompares = useMemo(() => { if (!groupedComponents?.size) return []; @@ -273,7 +273,7 @@ export function LaneCompare({ ); }); - }, [base.id.toString(), compare.id.toString(), openDrawerList.length, groupedComponents?.size]); + }, [base.id.toString(), compare.id.toString(), openDrawerList.length, groupedComponents?.size, laneDiff]); return (
diff --git a/scopes/lanes/ui/inputs/lane-selector/lane-grouped-menu-item.tsx b/scopes/lanes/ui/inputs/lane-selector/lane-grouped-menu-item.tsx index 5e0c6b4fe8ab..235988fadfb2 100644 --- a/scopes/lanes/ui/inputs/lane-selector/lane-grouped-menu-item.tsx +++ b/scopes/lanes/ui/inputs/lane-selector/lane-grouped-menu-item.tsx @@ -9,14 +9,32 @@ export type LaneGroupedMenuItemProps = { selected?: LaneId; current: LaneId[]; scope: string; + getHref?: (laneId: LaneId) => string; + onLaneSelected?: (laneId: LaneId) => void; } & HTMLAttributes; -export function LaneGroupedMenuItem({ selected, current, className, scope, ...rest }: LaneGroupedMenuItemProps) { +export function LaneGroupedMenuItem({ + selected, + current, + className, + scope, + getHref, + onLaneSelected, + ...rest +}: LaneGroupedMenuItemProps) { if (current.length === 0) return null; - if (current[0].isDefault()) { + if (current.length === 1 && current[0].isDefault()) { const defaultLane = current[0] as LaneId; - return ; + return ( + + ); } const onClickStopPropagation = (e) => e.stopPropagation(); @@ -27,7 +45,13 @@ export function LaneGroupedMenuItem({ selected, current, className, scope, ...re {scope}
{current.map((lane) => ( - + ))} ); diff --git a/scopes/lanes/ui/inputs/lane-selector/lane-menu-item.tsx b/scopes/lanes/ui/inputs/lane-selector/lane-menu-item.tsx index 395212062415..344865daac4d 100644 --- a/scopes/lanes/ui/inputs/lane-selector/lane-menu-item.tsx +++ b/scopes/lanes/ui/inputs/lane-selector/lane-menu-item.tsx @@ -9,9 +9,18 @@ import styles from './lane-menu-item.module.scss'; export type LaneMenuItemProps = { selected?: LaneId; current: LaneId; + getHref?: (laneId: LaneId) => string; + onLaneSelected?: (laneId: LaneId) => void; } & HTMLAttributes; -export function LaneMenuItem({ selected, current, className, ...rest }: LaneMenuItemProps) { +export function LaneMenuItem({ + selected, + current, + className, + onLaneSelected, + getHref = LanesModel.getLaneUrl, + ...rest +}: LaneMenuItemProps) { const isCurrent = selected?.toString() === current.toString(); const currentVersionRef = useRef(null); @@ -21,11 +30,16 @@ export function LaneMenuItem({ selected, current, className, ...rest }: LaneMenu } }, [isCurrent]); - const href = LanesModel.getLaneUrl(current); + const href = getHref(current); return (
- + onLaneSelected(current))} + >
{current.name}
{current.isDefault() && ( diff --git a/scopes/lanes/ui/inputs/lane-selector/lane-selector.module.scss b/scopes/lanes/ui/inputs/lane-selector/lane-selector.module.scss index 247ce54c750c..e4e02023f4fc 100644 --- a/scopes/lanes/ui/inputs/lane-selector/lane-selector.module.scss +++ b/scopes/lanes/ui/inputs/lane-selector/lane-selector.module.scss @@ -5,8 +5,6 @@ // (this is bizarre, the tree has no position absolute) z-index: $nav-z-index; border-radius: 8px; - // override dropdown default width: 100% - width: calc(100% - 40px) !important; &.disabled { > div { @@ -28,7 +26,7 @@ } .menu { - width: calc(100% - 24px); + width: 100%; border-radius: 8px; padding: 0; padding-top: 8px; diff --git a/scopes/lanes/ui/inputs/lane-selector/lane-selector.tsx b/scopes/lanes/ui/inputs/lane-selector/lane-selector.tsx index 3929152be10a..5d1913ee75bf 100644 --- a/scopes/lanes/ui/inputs/lane-selector/lane-selector.tsx +++ b/scopes/lanes/ui/inputs/lane-selector/lane-selector.tsx @@ -15,17 +15,27 @@ export type LaneSelectorProps = { lanes: Array; selectedLaneId?: LaneId; groupByScope?: boolean; + getHref?: (laneId: LaneId) => string; + onLaneSelected?: (laneId: LaneId) => void; } & HTMLAttributes; type LaneDropdownItems = Array | Array<[scope: string, lanes: LaneId[]]>; -export function LaneSelector({ className, lanes, selectedLaneId, groupByScope = true, ...rest }: LaneSelectorProps) { +export function LaneSelector({ + className, + lanes, + selectedLaneId, + groupByScope = true, + getHref, + onLaneSelected, + ...rest +}: LaneSelectorProps) { const [filteredLanes, setFilteredLanes] = useState(lanes); const [focus, setFocus] = useState(false); useEffect(() => { setFilteredLanes(lanes); - }, [lanes]); + }, [lanes.length]); const multipleLanes = lanes.length > 1; const laneDropdownItems: LaneDropdownItems = groupByScope @@ -51,7 +61,7 @@ export function LaneSelector({ className, lanes, selectedLaneId, groupByScope = {...rest} open={!multipleLanes ? false : undefined} dropClass={styles.menu} - elevation='none' + elevation="none" onChange={multipleLanes ? onDropdownToggled : undefined} // @ts-ignore - mismatch between @types/react placeholder={ @@ -68,12 +78,25 @@ export function LaneSelector({ className, lanes, selectedLaneId, groupByScope = {multipleLanes && groupByScope && (laneDropdownItems as Array<[scope: string, lanes: LaneId[]]>).map(([scope, lanesByScope]) => ( - + ))} {multipleLanes && !groupByScope && (laneDropdownItems as LaneId[]).map((lane) => ( - + ))} ); diff --git a/scopes/lanes/ui/navigation/lane-switcher/lane-switcher.module.scss b/scopes/lanes/ui/navigation/lane-switcher/lane-switcher.module.scss index 89b71d3afa47..a4aa5d7043fa 100644 --- a/scopes/lanes/ui/navigation/lane-switcher/lane-switcher.module.scss +++ b/scopes/lanes/ui/navigation/lane-switcher/lane-switcher.module.scss @@ -22,6 +22,7 @@ .laneSelector { flex: 1; - width: 100%; padding-right: 8px; + // override dropdown default width: 100% + width: calc(100% - 40px) !important; } From f8ac13cea229e12e9131feb70037035f1f4e5734 Mon Sep 17 00:00:00 2001 From: Luv Kapur Date: Tue, 7 Feb 2023 10:00:53 -0500 Subject: [PATCH 3/9] fix lane diff when source is main --- scopes/lanes/lanes/lanes.main.runtime.ts | 18 ++++++++++-------- scopes/lanes/lanes/lanes.ui.runtime.tsx | 4 ++-- .../lane-compare-page.module.scss | 16 ++++++++++++++-- .../lane-compare-page/lane-compare-page.tsx | 16 +++++++++------- 4 files changed, 35 insertions(+), 19 deletions(-) diff --git a/scopes/lanes/lanes/lanes.main.runtime.ts b/scopes/lanes/lanes/lanes.main.runtime.ts index 6aa158db76ed..4ca1725c67f5 100644 --- a/scopes/lanes/lanes/lanes.main.runtime.ts +++ b/scopes/lanes/lanes/lanes.main.runtime.ts @@ -616,21 +616,23 @@ export class LanesMain { targetLaneId?: LaneId, options?: LaneDiffStatusOptions ): Promise { - const sourceLane = await this.loadLane(sourceLaneId); - if (!sourceLane) throw new Error(`unable to find ${sourceLaneId.toString()} in the scope`); + const sourceLaneComponents = sourceLaneId.isDefault() + ? (await this.getLaneDataOfDefaultLane())?.components.map((main) => ({ id: main.id, head: Ref.from(main.head) })) + : (await this.loadLane(sourceLaneId))?.components; + const targetLane = targetLaneId ? await this.loadLane(targetLaneId) : undefined; const targetLaneIds = targetLane?.toBitIds(); const host = this.componentAspect.getHost(); const diffProps = compact( await Promise.all( - sourceLane.components.map(async (comp) => { - const componentId = await host.resolveComponentId(comp.id); - const sourceVersionObj = (await this.scope.legacyScope.objects.load(comp.head)) as Version; - if (sourceVersionObj.isRemoved()) { + (sourceLaneComponents || []).map(async ({ id, head }) => { + const componentId = await host.resolveComponentId(id); + const sourceVersionObj = (await this.scope.legacyScope.objects.load(head)) as Version; + if (sourceVersionObj?.isRemoved()) { return null; } const headOnTargetLane = targetLaneIds - ? targetLaneIds.searchWithoutVersion(comp.id)?.version + ? targetLaneIds.searchWithoutVersion(id)?.version : await this.getHeadOnMain(componentId); if (headOnTargetLane) { @@ -640,7 +642,7 @@ export class LanesMain { } } - const sourceHead = comp.head.toString(); + const sourceHead = head.toString(); const targetHead = headOnTargetLane; return { componentId, sourceHead, targetHead }; diff --git a/scopes/lanes/lanes/lanes.ui.runtime.tsx b/scopes/lanes/lanes/lanes.ui.runtime.tsx index 0737b11abaa1..ce7255eb6a15 100644 --- a/scopes/lanes/lanes/lanes.ui.runtime.tsx +++ b/scopes/lanes/lanes/lanes.ui.runtime.tsx @@ -155,7 +155,7 @@ export class LanesUI { } getLanesComparePage() { - return ; + return ; } getMenuRoutes() { @@ -216,7 +216,7 @@ export class LanesUI { order: 2, hide: () => { const { lanesModel } = useLanes(); - return !lanesModel?.viewedLane || lanesModel.viewedLane.id.isDefault(); + return !lanesModel?.viewedLane; }, }, ]); diff --git a/scopes/lanes/ui/compare/lane-compare-page/lane-compare-page.module.scss b/scopes/lanes/ui/compare/lane-compare-page/lane-compare-page.module.scss index 5a42862f958c..efa6dd9b797a 100644 --- a/scopes/lanes/ui/compare/lane-compare-page/lane-compare-page.module.scss +++ b/scopes/lanes/ui/compare/lane-compare-page/lane-compare-page.module.scss @@ -7,7 +7,8 @@ } .top { display: flex; - padding: 32px; + padding: 24px; + padding-bottom: 8px; align-items: center; width: 60%; @@ -20,8 +21,13 @@ padding: 8px; background: var(--surface-neutral-focus-color); border-radius: 6px; - margin: 0px 2px; + margin: 0px 4px; width: fit-content; + // same height as the lane selector + height: 34px; + box-sizing: border-box; + font-size: var(--bit-p-xs, 14px); + align-items: center; } .baseSelectorContainer { @@ -34,3 +40,9 @@ width: 100%; } } + +.laneIcon { + padding-right: 4px; + height: 16px; + font-size: var(--bit-p-sm, 16px); +} diff --git a/scopes/lanes/ui/compare/lane-compare-page/lane-compare-page.tsx b/scopes/lanes/ui/compare/lane-compare-page/lane-compare-page.tsx index c6c2e62e27a8..cc9f50f24532 100644 --- a/scopes/lanes/ui/compare/lane-compare-page/lane-compare-page.tsx +++ b/scopes/lanes/ui/compare/lane-compare-page/lane-compare-page.tsx @@ -18,12 +18,15 @@ export function LaneComparePage({ getLaneCompare, groupByScope, ...rest }: LaneC const [base, setBase] = useState(); const defaultLane = lanesModel?.getDefaultLane(); const compare = lanesModel?.viewedLane; - + const nonMainLanes = lanesModel?.getNonMainLanes(); useEffect(() => { - if (!base && defaultLane) { + if (!base && !compare?.id.isDefault() && defaultLane) { setBase(defaultLane); } - }, [defaultLane]); + if (!base && compare?.id.isDefault() && (nonMainLanes?.length ?? 0) > 0) { + setBase(nonMainLanes?.[0]); + } + }, [defaultLane, compare?.id.toString(), nonMainLanes?.length]); const LaneCompareComponent = useMemo(() => { return getLaneCompare({ base, compare }); @@ -31,14 +34,13 @@ export function LaneComparePage({ getLaneCompare, groupByScope, ...rest }: LaneC const lanes: Array = useMemo(() => { const mainLaneId = defaultLane?.id; - const nonMainLaneIds = lanesModel?.getNonMainLanes().map((lane) => lane.id) || []; + const nonMainLaneIds = nonMainLanes?.map((lane) => lane.id) || []; const allLanes = (mainLaneId && [mainLaneId, ...nonMainLaneIds]) || nonMainLaneIds; return allLanes.filter((l) => l.toString() !== compare?.id.toString()); - }, [defaultLane?.id?.toString(), lanesModel?.lanes.length]); + }, [base?.id.toString(), compare?.id.toString(), lanesModel?.lanes.length]); if (!lanesModel) return null; if (!lanesModel.viewedLane) return null; - if (lanesModel.viewedLane?.id.isDefault()) return null; if (!base) return null; return ( @@ -46,7 +48,7 @@ export function LaneComparePage({ getLaneCompare, groupByScope, ...rest }: LaneC
Compare
- + {compare?.id.name}
with
From 6106c7dd5e1dba0dee4ea93b1a19b46330671573 Mon Sep 17 00:00:00 2001 From: Luv Kapur Date: Tue, 7 Feb 2023 10:03:37 -0500 Subject: [PATCH 4/9] hide compare route when scope only has main --- scopes/lanes/lanes/lanes.ui.runtime.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scopes/lanes/lanes/lanes.ui.runtime.tsx b/scopes/lanes/lanes/lanes.ui.runtime.tsx index ce7255eb6a15..5ef3166b8ec0 100644 --- a/scopes/lanes/lanes/lanes.ui.runtime.tsx +++ b/scopes/lanes/lanes/lanes.ui.runtime.tsx @@ -216,7 +216,7 @@ export class LanesUI { order: 2, hide: () => { const { lanesModel } = useLanes(); - return !lanesModel?.viewedLane; + return !lanesModel?.viewedLane || lanesModel?.lanes.length < 2; }, }, ]); From c3e86f7b0647f5c56e9b756eb9d4f3fd5dcf0fcd Mon Sep 17 00:00:00 2001 From: Luv Kapur Date: Tue, 7 Feb 2023 10:52:45 -0500 Subject: [PATCH 5/9] style fixes --- .../compare/lane-compare-page/lane-compare-page.module.scss | 1 - .../lanes/ui/compare/lane-compare-page/lane-compare-page.tsx | 2 +- scopes/lanes/ui/compare/lane-compare/lane-compare.module.scss | 4 +--- 3 files changed, 2 insertions(+), 5 deletions(-) diff --git a/scopes/lanes/ui/compare/lane-compare-page/lane-compare-page.module.scss b/scopes/lanes/ui/compare/lane-compare-page/lane-compare-page.module.scss index 3dc92c945eb5..c3eabb30ea57 100644 --- a/scopes/lanes/ui/compare/lane-compare-page/lane-compare-page.module.scss +++ b/scopes/lanes/ui/compare/lane-compare-page/lane-compare-page.module.scss @@ -32,7 +32,6 @@ .baseSelectorContainer { padding: 0px 4px; - flex: 2; width: 100%; min-width: 100px; max-width: 200px; diff --git a/scopes/lanes/ui/compare/lane-compare-page/lane-compare-page.tsx b/scopes/lanes/ui/compare/lane-compare-page/lane-compare-page.tsx index cc9f50f24532..6dd3794aec89 100644 --- a/scopes/lanes/ui/compare/lane-compare-page/lane-compare-page.tsx +++ b/scopes/lanes/ui/compare/lane-compare-page/lane-compare-page.tsx @@ -65,7 +65,7 @@ export function LaneComparePage({ getLaneCompare, groupByScope, ...rest }: LaneC />
-
{LaneCompareComponent}
+ {LaneCompareComponent} ); } diff --git a/scopes/lanes/ui/compare/lane-compare/lane-compare.module.scss b/scopes/lanes/ui/compare/lane-compare/lane-compare.module.scss index c8e71bca25cd..1b861738af22 100644 --- a/scopes/lanes/ui/compare/lane-compare/lane-compare.module.scss +++ b/scopes/lanes/ui/compare/lane-compare/lane-compare.module.scss @@ -1,5 +1,3 @@ -@import '~@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss'; - .rootLaneCompare { position: relative; height: 100%; @@ -42,7 +40,7 @@ top: 0; left: 0; background-color: var(--background-color); - z-index: $modal-z-index; + z-index: 1; padding: 0; } From bdbbb81f5bbcf7a926e31a0868a9b8b3c7d66b81 Mon Sep 17 00:00:00 2001 From: Luv Kapur Date: Tue, 7 Feb 2023 10:55:36 -0500 Subject: [PATCH 6/9] sync with origin master --- src/logger/pino-logger.ts | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/logger/pino-logger.ts b/src/logger/pino-logger.ts index ee20519992ce..01f285527872 100644 --- a/src/logger/pino-logger.ts +++ b/src/logger/pino-logger.ts @@ -1,5 +1,5 @@ import prettifier from 'pino-pretty'; -import type { PrettyOptions } from 'pino-pretty'; +import type {PrettyOptions} from 'pino-pretty'; import pino, { Logger as PinoLogger, LoggerOptions } from 'pino'; import { DEBUG_LOG } from '../constants'; @@ -91,11 +91,11 @@ export function getPinoLoggerWithWorkers( const pinoConsoleOpts = { ...loggerOptions, - transport: transportConsole, + transport: transportConsole // transport: jsonFormat - // ? { targets: [{...transportFile, level: logLevel}, {...transportConsole, level: logLevel}] } - // ? { targets: [transportFile, transportConsole] } - // : transportConsole, + // ? { targets: [{...transportFile, level: logLevel}, {...transportConsole, level: logLevel}] } + // ? { targets: [transportFile, transportConsole] } + // : transportConsole, }; const pinoLogger = pino(pinoFileOpts); @@ -104,6 +104,8 @@ export function getPinoLoggerWithWorkers( return { pinoLogger, pinoLoggerConsole }; } + + export function getPinoLoggerWithoutWorkers( jsonFormat: string, loggerOptions: LoggerOptions, @@ -135,6 +137,7 @@ export function getPinoLoggerWithoutWorkers( const consoleStream = jsonFormat ? destConsole : prettyConsoleStream; + const pinoLogger = pino(loggerOptions, fileStream); const pinoLoggerConsole = pino(loggerOptions, consoleStream); From db2c4ad4756edf18db92513b459eb7618b1f6148 Mon Sep 17 00:00:00 2001 From: Luv Kapur Date: Tue, 7 Feb 2023 10:57:53 -0500 Subject: [PATCH 7/9] style fixes --- .../compare/lane-compare-page/lane-compare-page.module.scss | 6 +++++- .../ui/compare/lane-compare-page/lane-compare-page.tsx | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/scopes/lanes/ui/compare/lane-compare-page/lane-compare-page.module.scss b/scopes/lanes/ui/compare/lane-compare-page/lane-compare-page.module.scss index c3eabb30ea57..e60f0b7030f1 100644 --- a/scopes/lanes/ui/compare/lane-compare-page/lane-compare-page.module.scss +++ b/scopes/lanes/ui/compare/lane-compare-page/lane-compare-page.module.scss @@ -3,7 +3,6 @@ flex-direction: column; height: 100%; width: 100%; - // overflow: scroll; } .top { display: flex; @@ -17,6 +16,11 @@ } } +.bottom { + display: flex; + overflow: scroll; +} + .compareLane { padding: 8px; background: var(--surface-neutral-focus-color); diff --git a/scopes/lanes/ui/compare/lane-compare-page/lane-compare-page.tsx b/scopes/lanes/ui/compare/lane-compare-page/lane-compare-page.tsx index 6dd3794aec89..251d2439099f 100644 --- a/scopes/lanes/ui/compare/lane-compare-page/lane-compare-page.tsx +++ b/scopes/lanes/ui/compare/lane-compare-page/lane-compare-page.tsx @@ -65,7 +65,7 @@ export function LaneComparePage({ getLaneCompare, groupByScope, ...rest }: LaneC /> - {LaneCompareComponent} +
{LaneCompareComponent}
); } From 07658b95e9f66de8de5096033cb88066c3c02906 Mon Sep 17 00:00:00 2001 From: Luv Kapur Date: Tue, 7 Feb 2023 11:06:22 -0500 Subject: [PATCH 8/9] reset fullScreen and openDrawerList when compare ids change --- .../ui/compare/lane-compare/lane-compare.tsx | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/scopes/lanes/ui/compare/lane-compare/lane-compare.tsx b/scopes/lanes/ui/compare/lane-compare/lane-compare.tsx index 10b96ead61d7..a4dbc408d934 100644 --- a/scopes/lanes/ui/compare/lane-compare/lane-compare.tsx +++ b/scopes/lanes/ui/compare/lane-compare/lane-compare.tsx @@ -118,7 +118,7 @@ export function LaneCompare({ return value; }, []); - const [state, setState] = useState( + const [laneCompareState, setLaneCompareState] = useState( new Map( allComponents.map(([_base, _compare]) => { const key = computeStateKey(_base, _compare); @@ -128,9 +128,12 @@ export function LaneCompare({ ) ); + const [openDrawerList, setOpenDrawerList] = useState([]); + const [fullScreenDrawerKey, setFullScreen] = useState(undefined); + useEffect(() => { if (allComponents.length > 0) { - setState( + setLaneCompareState( new Map( allComponents.map(([_base, _compare]) => { const key = computeStateKey(_base, _compare); @@ -139,22 +142,21 @@ export function LaneCompare({ }) ) ); + setFullScreen(undefined); + setOpenDrawerList([]); } }, [loadingLaneDiff, allComponents.length, base.id.toString(), compare.id.toString()]); - const [openDrawerList, onToggleDrawer] = useState([]); - const [fullScreenDrawerKey, setFullScreen] = useState(undefined); - const handleDrawerToggle = (id: string) => { const isDrawerOpen = openDrawerList.includes(id); if (isDrawerOpen) { - onToggleDrawer((list) => list.filter((drawer) => drawer !== id)); + setOpenDrawerList((list) => list.filter((drawer) => drawer !== id)); if (id === fullScreenDrawerKey) { setFullScreen(undefined); } return; } - onToggleDrawer((list) => list.concat(id)); + setOpenDrawerList((list) => list.concat(id)); }; const onFullScreenClicked = useCallback( @@ -162,7 +164,7 @@ export function LaneCompare({ e.stopPropagation(); setFullScreen((fullScreenState) => { if (fullScreenState === key) return undefined; - onToggleDrawer((drawers) => { + setOpenDrawerList((drawers) => { if (!drawers.includes(key)) return [...drawers, key]; return drawers; }); @@ -177,7 +179,7 @@ export function LaneCompare({ const _tabs = extractLazyLoadedData(tabs); const onClicked = (prop: ComponentCompareStateKey) => (id) => - setState((value) => { + setLaneCompareState((value) => { let existingState = value.get(key); const propState = existingState?.[prop]; if (propState) { @@ -292,7 +294,7 @@ export function LaneCompare({ compareId, changes, className: classnames(styles.componentCompareContainer, isFullScreen && styles.fullScreen), - state: state.get(compKey), + state: laneCompareState.get(compKey), hooks: hooks(baseId, compareId), customUseComponent, Loader: ComponentCompareLoader, From 7e61f27136e36a45ff78915cafe025e303a9b15a Mon Sep 17 00:00:00 2001 From: Luv Kapur Date: Tue, 7 Feb 2023 12:10:55 -0500 Subject: [PATCH 9/9] diffStatus - compare with last common snap, identify unrelated --- scopes/lanes/lanes/lanes.graphql.ts | 1 + scopes/lanes/lanes/lanes.main.runtime.ts | 38 ++++++++++++++----- .../use-lane-diff-status.ts | 2 + 3 files changed, 32 insertions(+), 9 deletions(-) diff --git a/scopes/lanes/lanes/lanes.graphql.ts b/scopes/lanes/lanes/lanes.graphql.ts index b3d37a7372f7..650e25bc900b 100644 --- a/scopes/lanes/lanes/lanes.graphql.ts +++ b/scopes/lanes/lanes/lanes.graphql.ts @@ -67,6 +67,7 @@ export function lanesSchema(lanesMainRuntime: LanesMain): Schema { changes: [String!] upToDate: Boolean snapsDistance: SnapDistance + unrelated: Boolean } type LaneDiffStatus { diff --git a/scopes/lanes/lanes/lanes.main.runtime.ts b/scopes/lanes/lanes/lanes.main.runtime.ts index 4ca1725c67f5..8218c39f6d19 100644 --- a/scopes/lanes/lanes/lanes.main.runtime.ts +++ b/scopes/lanes/lanes/lanes.main.runtime.ts @@ -29,6 +29,7 @@ import ComponentWriterAspect, { ComponentWriterMain } from '@teambit/component-w import { SnapsDistance } from '@teambit/legacy/dist/scope/component-ops/snaps-distance'; import { MergingMain, MergingAspect } from '@teambit/merging'; import { ChangeType } from '@teambit/lanes.entities.lane-diff'; +import { NoCommonSnap } from '@teambit/legacy/dist/scope/exceptions/no-common-snap'; import { LanesAspect } from './lanes.aspect'; import { LaneCmd, @@ -89,11 +90,11 @@ export type LaneComponentDiffStatus = { changes?: ChangeType[]; upToDate?: boolean; snapsDistance?: SnapsDistanceObj; + unrelated?: boolean; }; export type LaneDiffStatusOptions = { skipChanges?: boolean; - skipUpToDate?: boolean; }; export type LaneDiffStatus = { @@ -423,7 +424,12 @@ export class LanesMain { * @param targetHead head on the target lane. leave empty if the target is main * @returns */ - async getSnapsDistance(componentId: ComponentID, sourceHead?: string, targetHead?: string): Promise { + async getSnapsDistance( + componentId: ComponentID, + sourceHead?: string, + targetHead?: string, + throws?: boolean + ): Promise { if (!sourceHead && !targetHead) throw new Error(`getDivergeData got sourceHead and targetHead empty. at least one of them should be populated`); const modelComponent = await this.scope.legacyScope.getModelComponent(componentId._legacy); @@ -432,6 +438,7 @@ export class LanesMain { repo: this.scope.legacyScope.objects, sourceHead: sourceHead ? Ref.from(sourceHead) : modelComponent.head || null, targetHead: targetHead ? Ref.from(targetHead) : modelComponent.head || null, + throws, }); } @@ -666,16 +673,29 @@ export class LanesMain { sourceHead: string, targetHead?: string, options?: LaneDiffStatusOptions - ) { - const snapsDistance = !options?.skipUpToDate - ? await this.getSnapsDistance(componentId, sourceHead, targetHead) - : undefined; + ): Promise { + const snapsDistance = await this.getSnapsDistance(componentId, sourceHead, targetHead, false); + + if (snapsDistance?.err) { + const noCommonSnap = snapsDistance.err instanceof NoCommonSnap; + + return { + componentId, + sourceHead, + targetHead, + upToDate: snapsDistance?.isUpToDate(), + unrelated: noCommonSnap || undefined, + changes: [], + }; + } + + const commonSnap = snapsDistance?.commonSnapBeforeDiverge; const getChanges = async (): Promise => { - if (!targetHead) return [ChangeType.NEW]; + if (!commonSnap) return [ChangeType.NEW]; const compare = await this.componentCompare.compare( - componentId.changeVersion(targetHead).toString(), + componentId.changeVersion(commonSnap.hash).toString(), componentId.changeVersion(sourceHead).toString() ); @@ -709,7 +729,7 @@ export class LanesMain { changeType, changes, sourceHead, - targetHead, + targetHead: commonSnap?.hash, upToDate: snapsDistance?.isUpToDate(), snapsDistance: { onSource: snapsDistance?.snapsOnSourceOnly.map((s) => s.hash) ?? [], diff --git a/scopes/lanes/ui/compare/lane-compare-hooks/use-lane-diff-status/use-lane-diff-status.ts b/scopes/lanes/ui/compare/lane-compare-hooks/use-lane-diff-status/use-lane-diff-status.ts index 4f343bf69475..1139b4c70f85 100644 --- a/scopes/lanes/ui/compare/lane-compare-hooks/use-lane-diff-status/use-lane-diff-status.ts +++ b/scopes/lanes/ui/compare/lane-compare-hooks/use-lane-diff-status/use-lane-diff-status.ts @@ -46,6 +46,7 @@ export const QUERY_LANE_DIFF_STATUS = gql` targetHead changes upToDate + unrelated } } } @@ -80,6 +81,7 @@ export const useLaneDiffStatus: UseLaneDiffStatus = ({ baseId, compareId, option targetLane: LaneId.from(data.lanes.diffStatus.target.name, data.lanes.diffStatus.target.scope).toString(), diff: data.lanes.diffStatus.componentsStatus.map((c) => ({ ...c, + changes: c.changes || [], componentId: ComponentID.fromObject(c.componentId).toString(), })), };