| b69ab31 | | | 1 | /** |
| b69ab31 | | | 2 | * Copyright (c) Meta Platforms, Inc. and affiliates. |
| b69ab31 | | | 3 | * |
| b69ab31 | | | 4 | * This source code is licensed under the MIT license found in the |
| b69ab31 | | | 5 | * LICENSE file in the root directory of this source tree. |
| b69ab31 | | | 6 | */ |
| b69ab31 | | | 7 | |
| b69ab31 | | | 8 | import type {RenderGlyphResult} from './RenderDag'; |
| b69ab31 | | | 9 | import type {DagCommitInfo} from './dag/dag'; |
| b69ab31 | | | 10 | import type {ExtendedGraphRow} from './dag/render'; |
| b69ab31 | | | 11 | import type {Hash} from './types'; |
| b69ab31 | | | 12 | |
| b69ab31 | | | 13 | import {Button} from 'isl-components/Button'; |
| b69ab31 | | | 14 | import {ErrorNotice} from 'isl-components/ErrorNotice'; |
| b69ab31 | | | 15 | import {ErrorShortMessages} from 'isl-server/src/constants'; |
| b69ab31 | | | 16 | import {atom, useAtomValue} from 'jotai'; |
| b69ab31 | | | 17 | import {Commit, InlineProgressSpan} from './Commit'; |
| b69ab31 | | | 18 | import {Center, LargeSpinner} from './ComponentUtils'; |
| b69ab31 | | | 19 | import {FetchingAdditionalCommitsRow} from './FetchAdditionalCommitsButton'; |
| b69ab31 | | | 20 | import {isHighlightedCommit} from './HighlightedCommits'; |
| b69ab31 | | | 21 | import {RegularGlyph, RenderDag, YouAreHereGlyph} from './RenderDag'; |
| b69ab31 | | | 22 | import {StackActions} from './StackActions'; |
| b69ab31 | | | 23 | import {YOU_ARE_HERE_VIRTUAL_COMMIT} from './dag/virtualCommit'; |
| b69ab31 | | | 24 | import {T, t} from './i18n'; |
| b69ab31 | | | 25 | import {atomFamilyWeak, localStorageBackedAtom} from './jotaiUtils'; |
| b69ab31 | | | 26 | import {CreateEmptyInitialCommitOperation} from './operations/CreateEmptyInitialCommitOperation'; |
| b69ab31 | | | 27 | import {inlineProgressByHash, useRunOperation} from './operationsState'; |
| b69ab31 | | | 28 | import {dagWithPreviews, treeWithPreviews, useMarkOperationsCompleted} from './previews'; |
| b69ab31 | | | 29 | import {hideIrrelevantCwdStacks, isIrrelevantToCwd, repoRelativeCwd} from './repositoryData'; |
| b69ab31 | | | 30 | import {isNarrowCommitTree} from './responsive'; |
| b69ab31 | | | 31 | import { |
| b69ab31 | | | 32 | selectedCommits, |
| b69ab31 | | | 33 | useArrowKeysToChangeSelection, |
| b69ab31 | | | 34 | useBackspaceToHideSelected, |
| b69ab31 | | | 35 | useCommitCallbacks, |
| b69ab31 | | | 36 | useShortcutToRebaseSelected, |
| b69ab31 | | | 37 | } from './selection'; |
| b69ab31 | | | 38 | import {commitFetchError, latestUncommittedChangesData} from './serverAPIState'; |
| b69ab31 | | | 39 | import {MaybeEditStackModal} from './stackEdit/ui/EditStackModal'; |
| b69ab31 | | | 40 | |
| b69ab31 | | | 41 | import './CommitTreeList.css'; |
| b69ab31 | | | 42 | |
| b69ab31 | | | 43 | type DagCommitListProps = { |
| b69ab31 | | | 44 | isNarrow: boolean; |
| b69ab31 | | | 45 | }; |
| b69ab31 | | | 46 | |
| b69ab31 | | | 47 | const dagWithYouAreHere = atom(get => { |
| b69ab31 | | | 48 | let dag = get(dagWithPreviews); |
| b69ab31 | | | 49 | // Insert a virtual "You are here" as a child of ".". |
| b69ab31 | | | 50 | const dot = dag.resolve('.'); |
| b69ab31 | | | 51 | if (dot != null) { |
| b69ab31 | | | 52 | dag = dag.add([YOU_ARE_HERE_VIRTUAL_COMMIT.set('parents', [dot.hash])]); |
| b69ab31 | | | 53 | } |
| b69ab31 | | | 54 | return dag; |
| b69ab31 | | | 55 | }); |
| b69ab31 | | | 56 | |
| b69ab31 | | | 57 | export const condenseObsoleteStacks = localStorageBackedAtom<boolean | null>( |
| b69ab31 | | | 58 | 'isl.condense-obsolete-stacks', |
| b69ab31 | | | 59 | true, |
| b69ab31 | | | 60 | ); |
| b69ab31 | | | 61 | |
| b69ab31 | | | 62 | const renderSubsetUnionSelection = atom(get => { |
| b69ab31 | | | 63 | const dag = get(dagWithYouAreHere); |
| b69ab31 | | | 64 | const condense = get(condenseObsoleteStacks); |
| b69ab31 | | | 65 | let subset = dag.subsetForRendering(undefined, /* condenseObsoleteStacks */ condense !== false); |
| b69ab31 | | | 66 | // If selectedCommits includes commits unknown to dag (ex. in tests), ignore them to avoid errors. |
| b69ab31 | | | 67 | const selection = dag.present(get(selectedCommits)); |
| b69ab31 | | | 68 | |
| b69ab31 | | | 69 | const hideIrrelevant = get(hideIrrelevantCwdStacks); |
| b69ab31 | | | 70 | if (hideIrrelevant) { |
| b69ab31 | | | 71 | const cwd = get(repoRelativeCwd); |
| b69ab31 | | | 72 | subset = dag.filter(commit => commit.isDot || !isIrrelevantToCwd(commit, cwd), subset); |
| b69ab31 | | | 73 | } |
| b69ab31 | | | 74 | |
| b69ab31 | | | 75 | return subset.union(selection); |
| b69ab31 | | | 76 | }); |
| b69ab31 | | | 77 | |
| b69ab31 | | | 78 | function DagCommitList(props: DagCommitListProps) { |
| b69ab31 | | | 79 | const {isNarrow} = props; |
| b69ab31 | | | 80 | |
| b69ab31 | | | 81 | const dag = useAtomValue(dagWithYouAreHere); |
| b69ab31 | | | 82 | const subset = useAtomValue(renderSubsetUnionSelection); |
| b69ab31 | | | 83 | |
| b69ab31 | | | 84 | return ( |
| b69ab31 | | | 85 | <RenderDag |
| b69ab31 | | | 86 | dag={dag} |
| b69ab31 | | | 87 | subset={subset} |
| b69ab31 | | | 88 | className={'commit-tree-root ' + (isNarrow ? ' commit-tree-narrow' : '')} |
| b69ab31 | | | 89 | data-testid="commit-tree-root" |
| b69ab31 | | | 90 | renderCommit={renderCommit} |
| b69ab31 | | | 91 | renderCommitExtras={renderCommitExtras} |
| b69ab31 | | | 92 | renderGlyph={renderGlyph} |
| b69ab31 | | | 93 | useExtraCommitRowProps={useExtraCommitRowProps} |
| b69ab31 | | | 94 | /> |
| b69ab31 | | | 95 | ); |
| b69ab31 | | | 96 | } |
| b69ab31 | | | 97 | |
| b69ab31 | | | 98 | function renderCommit(info: DagCommitInfo) { |
| b69ab31 | | | 99 | return <DagCommitBody info={info} />; |
| b69ab31 | | | 100 | } |
| b69ab31 | | | 101 | |
| b69ab31 | | | 102 | function renderCommitExtras(info: DagCommitInfo, row: ExtendedGraphRow) { |
| b69ab31 | | | 103 | if (row.termLine != null && (info.parents.length > 0 || (info.ancestors?.size ?? 0) > 0)) { |
| b69ab31 | | | 104 | // Root (no parents) in the displayed DAG, but not root in the full DAG. |
| b69ab31 | | | 105 | return <MaybeFetchingAdditionalCommitsRow hash={info.hash} />; |
| b69ab31 | | | 106 | } else if (info.phase === 'draft') { |
| b69ab31 | | | 107 | // Draft but parents are not drafts. Likely a stack root. Show stack buttons. |
| b69ab31 | | | 108 | return <MaybeStackActions hash={info.hash} />; |
| b69ab31 | | | 109 | } |
| b69ab31 | | | 110 | return null; |
| b69ab31 | | | 111 | } |
| b69ab31 | | | 112 | |
| b69ab31 | | | 113 | function renderGlyph(info: DagCommitInfo): RenderGlyphResult { |
| b69ab31 | | | 114 | if (info.isYouAreHere) { |
| b69ab31 | | | 115 | return ['replace-tile', <YouAreHereGlyphWithProgress info={info} />]; |
| b69ab31 | | | 116 | } else { |
| b69ab31 | | | 117 | return ['inside-tile', <HighlightedGlyph info={info} />]; |
| b69ab31 | | | 118 | } |
| b69ab31 | | | 119 | } |
| b69ab31 | | | 120 | |
| b69ab31 | | | 121 | function useExtraCommitRowProps(info: DagCommitInfo): React.HTMLAttributes<HTMLDivElement> | void { |
| b69ab31 | | | 122 | const {isSelected, onClickToSelect, onDoubleClickToShowDrawer} = useCommitCallbacks(info); |
| b69ab31 | | | 123 | |
| b69ab31 | | | 124 | return { |
| b69ab31 | | | 125 | onClick: onClickToSelect, |
| b69ab31 | | | 126 | onDoubleClick: onDoubleClickToShowDrawer, |
| b69ab31 | | | 127 | className: isSelected ? 'commit-row-selected' : '', |
| b69ab31 | | | 128 | }; |
| b69ab31 | | | 129 | } |
| b69ab31 | | | 130 | |
| b69ab31 | | | 131 | function YouAreHereGlyphWithProgress({info}: {info: DagCommitInfo}) { |
| b69ab31 | | | 132 | const inlineProgress = useAtomValue(inlineProgressByHash(info.hash)); |
| b69ab31 | | | 133 | return ( |
| b69ab31 | | | 134 | <YouAreHereGlyph info={info}> |
| b69ab31 | | | 135 | {inlineProgress && <InlineProgressSpan message={inlineProgress} />} |
| b69ab31 | | | 136 | </YouAreHereGlyph> |
| b69ab31 | | | 137 | ); |
| b69ab31 | | | 138 | } |
| b69ab31 | | | 139 | |
| b69ab31 | | | 140 | const dagHasChildren = atomFamilyWeak((key: string) => { |
| b69ab31 | | | 141 | return atom(get => { |
| b69ab31 | | | 142 | const dag = get(dagWithPreviews); |
| b69ab31 | | | 143 | return dag.children(key).size > 0; |
| b69ab31 | | | 144 | }); |
| b69ab31 | | | 145 | }); |
| b69ab31 | | | 146 | |
| b69ab31 | | | 147 | function DagCommitBody({info}: {info: DagCommitInfo}) { |
| b69ab31 | | | 148 | const hasChildren = useAtomValue(dagHasChildren(info.hash)); |
| b69ab31 | | | 149 | return ( |
| b69ab31 | | | 150 | <Commit |
| b69ab31 | | | 151 | commit={info} |
| b69ab31 | | | 152 | key={info.hash} |
| b69ab31 | | | 153 | previewType={info.previewType} |
| b69ab31 | | | 154 | hasChildren={hasChildren} |
| b69ab31 | | | 155 | /> |
| b69ab31 | | | 156 | ); |
| b69ab31 | | | 157 | } |
| b69ab31 | | | 158 | |
| b69ab31 | | | 159 | const dagHasParents = atomFamilyWeak((key: string) => { |
| b69ab31 | | | 160 | return atom(get => { |
| b69ab31 | | | 161 | const dag = get(dagWithPreviews); |
| b69ab31 | | | 162 | return dag.parents(key).size > 0; |
| b69ab31 | | | 163 | }); |
| b69ab31 | | | 164 | }); |
| b69ab31 | | | 165 | |
| b69ab31 | | | 166 | const dagIsDraftStackRoot = atomFamilyWeak((key: string) => { |
| b69ab31 | | | 167 | return atom(get => { |
| b69ab31 | | | 168 | const dag = get(dagWithPreviews); |
| b69ab31 | | | 169 | return dag.draft(dag.parents(key)).size === 0; |
| b69ab31 | | | 170 | }); |
| b69ab31 | | | 171 | }); |
| b69ab31 | | | 172 | |
| b69ab31 | | | 173 | function MaybeFetchingAdditionalCommitsRow({hash}: {hash: Hash}) { |
| b69ab31 | | | 174 | const hasParents = useAtomValue(dagHasParents(hash)); |
| b69ab31 | | | 175 | return hasParents ? null : <FetchingAdditionalCommitsRow />; |
| b69ab31 | | | 176 | } |
| b69ab31 | | | 177 | |
| b69ab31 | | | 178 | function MaybeStackActions({hash}: {hash: Hash}) { |
| b69ab31 | | | 179 | const isDraftStackRoot = useAtomValue(dagIsDraftStackRoot(hash)); |
| b69ab31 | | | 180 | return isDraftStackRoot ? <StackActions hash={hash} /> : null; |
| b69ab31 | | | 181 | } |
| b69ab31 | | | 182 | |
| b69ab31 | | | 183 | function HighlightedGlyph({info}: {info: DagCommitInfo}) { |
| b69ab31 | | | 184 | const highlighted = useAtomValue(isHighlightedCommit(info.hash)); |
| b69ab31 | | | 185 | |
| b69ab31 | | | 186 | const highlightCircle = highlighted ? ( |
| b69ab31 | | | 187 | <circle cx={0} cy={0} r={8} fill="transparent" stroke="var(--focus-border)" strokeWidth={4} /> |
| b69ab31 | | | 188 | ) : null; |
| b69ab31 | | | 189 | |
| b69ab31 | | | 190 | return ( |
| b69ab31 | | | 191 | <> |
| b69ab31 | | | 192 | {highlightCircle} |
| b69ab31 | | | 193 | <RegularGlyph info={info} /> |
| b69ab31 | | | 194 | </> |
| b69ab31 | | | 195 | ); |
| b69ab31 | | | 196 | } |
| b69ab31 | | | 197 | |
| b69ab31 | | | 198 | export function CommitTreeList() { |
| b69ab31 | | | 199 | // Make sure we trigger subscription to changes to uncommitted changes *before* we have a tree to render, |
| b69ab31 | | | 200 | // so we don't miss the first returned uncommitted changes message. |
| b69ab31 | | | 201 | // TODO: This is a little ugly, is there a better way to tell recoil to start the subscription immediately? |
| b69ab31 | | | 202 | // Or should we queue/cache messages? |
| b69ab31 | | | 203 | useAtomValue(latestUncommittedChangesData); |
| b69ab31 | | | 204 | useMarkOperationsCompleted(); |
| b69ab31 | | | 205 | |
| b69ab31 | | | 206 | useArrowKeysToChangeSelection(); |
| b69ab31 | | | 207 | useBackspaceToHideSelected(); |
| b69ab31 | | | 208 | useShortcutToRebaseSelected(); |
| b69ab31 | | | 209 | |
| b69ab31 | | | 210 | const isNarrow = useAtomValue(isNarrowCommitTree); |
| b69ab31 | | | 211 | |
| b69ab31 | | | 212 | const {trees} = useAtomValue(treeWithPreviews); |
| b69ab31 | | | 213 | const fetchError = useAtomValue(commitFetchError); |
| b69ab31 | | | 214 | return fetchError == null && trees.length === 0 ? ( |
| b69ab31 | | | 215 | <Center> |
| b69ab31 | | | 216 | <LargeSpinner /> |
| b69ab31 | | | 217 | </Center> |
| b69ab31 | | | 218 | ) : ( |
| b69ab31 | | | 219 | <> |
| b69ab31 | | | 220 | {fetchError ? <CommitFetchError error={fetchError} /> : null} |
| b69ab31 | | | 221 | <DagCommitList isNarrow={isNarrow} /> |
| b69ab31 | | | 222 | <MaybeEditStackModal /> |
| b69ab31 | | | 223 | </> |
| b69ab31 | | | 224 | ); |
| b69ab31 | | | 225 | } |
| b69ab31 | | | 226 | |
| b69ab31 | | | 227 | function CommitFetchError({error}: {error: Error}) { |
| b69ab31 | | | 228 | const runOperation = useRunOperation(); |
| b69ab31 | | | 229 | if (error.message === ErrorShortMessages.NoCommitsFetched) { |
| b69ab31 | | | 230 | return ( |
| b69ab31 | | | 231 | <ErrorNotice |
| b69ab31 | | | 232 | title={t('No commits found')} |
| b69ab31 | | | 233 | description={t('If this is a new repository, try adding an initial commit first.')} |
| b69ab31 | | | 234 | error={error} |
| b69ab31 | | | 235 | buttons={[ |
| b69ab31 | | | 236 | <Button |
| b69ab31 | | | 237 | onClick={() => { |
| b69ab31 | | | 238 | runOperation(new CreateEmptyInitialCommitOperation()); |
| b69ab31 | | | 239 | }}> |
| b69ab31 | | | 240 | <T>Create empty initial commit</T> |
| b69ab31 | | | 241 | </Button>, |
| b69ab31 | | | 242 | ]} |
| b69ab31 | | | 243 | /> |
| b69ab31 | | | 244 | ); |
| b69ab31 | | | 245 | } |
| b69ab31 | | | 246 | return <ErrorNotice title={t('Failed to fetch commits')} error={error} />; |
| b69ab31 | | | 247 | } |