mirror of
https://github.com/mountain-loop/yaak.git
synced 2026-03-21 08:59:07 +01:00
Refactor desktop app into separate client and proxy apps
This commit is contained in:
Gregory Schier
43
apps/yaak-client/components/git/BranchSelectionDialog.tsx
Normal file
43
apps/yaak-client/components/git/BranchSelectionDialog.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
import { useState } from 'react';
|
||||
import { Button } from '../core/Button';
|
||||
import { Select } from '../core/Select';
|
||||
import { HStack, VStack } from '../core/Stacks';
|
||||
|
||||
interface Props {
|
||||
branches: string[];
|
||||
onCancel: () => void;
|
||||
onSelect: (branch: string) => void;
|
||||
selectText: string;
|
||||
}
|
||||
|
||||
export function BranchSelectionDialog({ branches, onCancel, onSelect, selectText }: Props) {
|
||||
const [branch, setBranch] = useState<string>('__NONE__');
|
||||
return (
|
||||
<VStack
|
||||
className="mb-4"
|
||||
as="form"
|
||||
space={4}
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
onSelect(branch);
|
||||
}}
|
||||
>
|
||||
<Select
|
||||
name="branch"
|
||||
hideLabel
|
||||
label="Branch"
|
||||
value={branch}
|
||||
options={branches.map((b) => ({ label: b, value: b }))}
|
||||
onChange={setBranch}
|
||||
/>
|
||||
<HStack space={2} justifyContent="end">
|
||||
<Button onClick={onCancel} variant="border" color="secondary">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" color="primary">
|
||||
{selectText}
|
||||
</Button>
|
||||
</HStack>
|
||||
</VStack>
|
||||
);
|
||||
}
|
||||
487
apps/yaak-client/components/git/GitCommitDialog.tsx
Normal file
487
apps/yaak-client/components/git/GitCommitDialog.tsx
Normal file
@@ -0,0 +1,487 @@
|
||||
import { useCachedNode } from '@dnd-kit/core/dist/hooks/utilities';
|
||||
import type { GitStatusEntry } from '@yaakapp-internal/git';
|
||||
import { useGit } from '@yaakapp-internal/git';
|
||||
import type {
|
||||
Environment,
|
||||
Folder,
|
||||
GrpcRequest,
|
||||
HttpRequest,
|
||||
WebsocketRequest,
|
||||
Workspace,
|
||||
} from '@yaakapp-internal/models';
|
||||
import classNames from 'classnames';
|
||||
import { useCallback, useMemo, useState } from 'react';
|
||||
import { modelToYaml } from '../../lib/diffYaml';
|
||||
import { isSubEnvironment } from '../../lib/model_util';
|
||||
import { resolvedModelName } from '../../lib/resolvedModelName';
|
||||
import { showErrorToast } from '../../lib/toast';
|
||||
import { Banner } from '../core/Banner';
|
||||
import { Button } from '../core/Button';
|
||||
import type { CheckboxProps } from '../core/Checkbox';
|
||||
import { Checkbox } from '../core/Checkbox';
|
||||
import { DiffViewer } from '../core/Editor/DiffViewer';
|
||||
import { Icon } from '../core/Icon';
|
||||
import { InlineCode } from '../core/InlineCode';
|
||||
import { Input } from '../core/Input';
|
||||
import { Separator } from '../core/Separator';
|
||||
import { SplitLayout } from '../core/SplitLayout';
|
||||
import { HStack } from '../core/Stacks';
|
||||
import { EmptyStateText } from '../EmptyStateText';
|
||||
import { gitCallbacks } from './callbacks';
|
||||
import { handlePushResult } from './git-util';
|
||||
|
||||
interface Props {
|
||||
syncDir: string;
|
||||
onDone: () => void;
|
||||
workspace: Workspace;
|
||||
}
|
||||
|
||||
interface CommitTreeNode {
|
||||
model: HttpRequest | GrpcRequest | WebsocketRequest | Folder | Environment | Workspace;
|
||||
status: GitStatusEntry;
|
||||
children: CommitTreeNode[];
|
||||
ancestors: CommitTreeNode[];
|
||||
}
|
||||
|
||||
export function GitCommitDialog({ syncDir, onDone, workspace }: Props) {
|
||||
const [{ status }, { commit, commitAndPush, add, unstage }] = useGit(
|
||||
syncDir,
|
||||
gitCallbacks(syncDir),
|
||||
);
|
||||
const [isPushing, setIsPushing] = useState(false);
|
||||
const [commitError, setCommitError] = useState<string | null>(null);
|
||||
const [message, setMessage] = useState<string>('');
|
||||
const [selectedEntry, setSelectedEntry] = useState<GitStatusEntry | null>(null);
|
||||
|
||||
const handleCreateCommit = async () => {
|
||||
setCommitError(null);
|
||||
try {
|
||||
await commit.mutateAsync({ message });
|
||||
onDone();
|
||||
} catch (err) {
|
||||
setCommitError(String(err));
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateCommitAndPush = async () => {
|
||||
setIsPushing(true);
|
||||
try {
|
||||
const r = await commitAndPush.mutateAsync({ message });
|
||||
handlePushResult(r);
|
||||
onDone();
|
||||
} catch (err) {
|
||||
showErrorToast({
|
||||
id: 'git-commit-and-push-error',
|
||||
title: 'Error committing and pushing',
|
||||
message: String(err),
|
||||
});
|
||||
} finally {
|
||||
setIsPushing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const { internalEntries, externalEntries, allEntries } = useMemo(() => {
|
||||
const allEntries = [];
|
||||
const yaakEntries = [];
|
||||
const externalEntries = [];
|
||||
|
||||
for (const entry of status.data?.entries ?? []) {
|
||||
allEntries.push(entry);
|
||||
if (entry.next == null && entry.prev == null) {
|
||||
externalEntries.push(entry);
|
||||
} else {
|
||||
yaakEntries.push(entry);
|
||||
}
|
||||
}
|
||||
return { internalEntries: yaakEntries, externalEntries, allEntries };
|
||||
}, [status.data?.entries]);
|
||||
|
||||
const hasAddedAnything = allEntries.find((e) => e.staged) != null;
|
||||
const hasAnythingToAdd = allEntries.find((e) => e.status !== 'current') != null;
|
||||
|
||||
const tree: CommitTreeNode | null = useMemo(() => {
|
||||
const next = (
|
||||
model: CommitTreeNode['model'],
|
||||
ancestors: CommitTreeNode[],
|
||||
): CommitTreeNode | null => {
|
||||
const statusEntry = internalEntries?.find((s) => s.relaPath.includes(model.id));
|
||||
if (statusEntry == null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const node: CommitTreeNode = {
|
||||
model,
|
||||
status: statusEntry,
|
||||
children: [],
|
||||
ancestors,
|
||||
};
|
||||
|
||||
for (const entry of internalEntries) {
|
||||
const childModel = entry.next ?? entry.prev;
|
||||
|
||||
// Should never happen because we're iterating internalEntries
|
||||
if (childModel == null) continue;
|
||||
|
||||
// TODO: Figure out why not all of these show up
|
||||
if ('folderId' in childModel && childModel.folderId != null) {
|
||||
if (childModel.folderId === model.id) {
|
||||
const c = next(childModel, [...ancestors, node]);
|
||||
if (c != null) node.children.push(c);
|
||||
}
|
||||
} else if ('workspaceId' in childModel && childModel.workspaceId === model.id) {
|
||||
const c = next(childModel, [...ancestors, node]);
|
||||
if (c != null) node.children.push(c);
|
||||
} else {
|
||||
// Do nothing
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
};
|
||||
|
||||
return next(workspace, []);
|
||||
}, [workspace, internalEntries]);
|
||||
|
||||
const checkNode = useCallback(
|
||||
(treeNode: CommitTreeNode) => {
|
||||
const checked = nodeCheckedStatus(treeNode);
|
||||
const newChecked = checked === 'indeterminate' ? true : !checked;
|
||||
setCheckedAndChildren(treeNode, newChecked, unstage.mutate, add.mutate);
|
||||
// TODO: Also ensure parents are added properly
|
||||
},
|
||||
[add.mutate, unstage.mutate],
|
||||
);
|
||||
|
||||
const checkEntry = useCallback(
|
||||
(entry: GitStatusEntry) => {
|
||||
if (entry.staged) unstage.mutate({ relaPaths: [entry.relaPath] });
|
||||
else add.mutate({ relaPaths: [entry.relaPath] });
|
||||
},
|
||||
[add.mutate, unstage.mutate],
|
||||
);
|
||||
|
||||
const handleSelectChild = useCallback(
|
||||
(entry: GitStatusEntry) => {
|
||||
if (entry === selectedEntry) {
|
||||
setSelectedEntry(null);
|
||||
} else {
|
||||
setSelectedEntry(entry);
|
||||
}
|
||||
},
|
||||
[selectedEntry],
|
||||
);
|
||||
|
||||
if (tree == null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!hasAnythingToAdd) {
|
||||
return (
|
||||
<div className="h-full px-6 pb-4">
|
||||
<EmptyStateText>No changes since last commit</EmptyStateText>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full px-2 pb-4">
|
||||
<SplitLayout
|
||||
name="commit-horizontal"
|
||||
layout="horizontal"
|
||||
defaultRatio={0.6}
|
||||
firstSlot={({ style }) => (
|
||||
<div style={style} className="h-full px-4">
|
||||
<SplitLayout
|
||||
name="commit-vertical"
|
||||
layout="vertical"
|
||||
defaultRatio={0.35}
|
||||
firstSlot={({ style: innerStyle }) => (
|
||||
<div
|
||||
style={innerStyle}
|
||||
className="h-full overflow-y-auto pb-3 pr-0.5 transform-cpu"
|
||||
>
|
||||
<TreeNodeChildren
|
||||
node={tree}
|
||||
depth={0}
|
||||
onCheck={checkNode}
|
||||
onSelect={handleSelectChild}
|
||||
selectedPath={selectedEntry?.relaPath ?? null}
|
||||
/>
|
||||
{externalEntries.find((e) => e.status !== 'current') && (
|
||||
<>
|
||||
<Separator className="mt-3 mb-1">External file changes</Separator>
|
||||
{externalEntries.map((entry) => (
|
||||
<ExternalTreeNode
|
||||
key={entry.relaPath + entry.status}
|
||||
entry={entry}
|
||||
onCheck={checkEntry}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
secondSlot={({ style: innerStyle }) => (
|
||||
<div style={innerStyle} className="grid grid-rows-[minmax(0,1fr)_auto] gap-3 pb-2">
|
||||
<Input
|
||||
className="!text-base font-sans rounded-md"
|
||||
placeholder="Commit message..."
|
||||
onChange={setMessage}
|
||||
stateKey={null}
|
||||
label="Commit message"
|
||||
fullHeight
|
||||
multiLine
|
||||
hideLabel
|
||||
/>
|
||||
{commitError && <Banner color="danger">{commitError}</Banner>}
|
||||
<HStack alignItems="center" space={2}>
|
||||
<InlineCode>{status.data?.headRefShorthand}</InlineCode>
|
||||
<HStack space={2} className="ml-auto">
|
||||
<Button
|
||||
color="secondary"
|
||||
size="sm"
|
||||
onClick={handleCreateCommit}
|
||||
disabled={!hasAddedAnything || message.trim().length === 0}
|
||||
isLoading={isPushing}
|
||||
>
|
||||
Commit
|
||||
</Button>
|
||||
<Button
|
||||
color="primary"
|
||||
size="sm"
|
||||
disabled={!hasAddedAnything || message.trim().length === 0}
|
||||
onClick={handleCreateCommitAndPush}
|
||||
isLoading={isPushing}
|
||||
>
|
||||
Commit and Push
|
||||
</Button>
|
||||
</HStack>
|
||||
</HStack>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
secondSlot={({ style }) => (
|
||||
<div style={style} className="h-full px-4 border-l border-l-border-subtle">
|
||||
{selectedEntry ? (
|
||||
<DiffPanel entry={selectedEntry} />
|
||||
) : (
|
||||
<EmptyStateText>Select a change to view diff</EmptyStateText>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TreeNodeChildren({
|
||||
node,
|
||||
depth,
|
||||
onCheck,
|
||||
onSelect,
|
||||
selectedPath,
|
||||
}: {
|
||||
node: CommitTreeNode | null;
|
||||
depth: number;
|
||||
onCheck: (node: CommitTreeNode, checked: boolean) => void;
|
||||
onSelect: (entry: GitStatusEntry) => void;
|
||||
selectedPath: string | null;
|
||||
}) {
|
||||
if (node === null) return null;
|
||||
if (!isNodeRelevant(node)) return null;
|
||||
|
||||
const checked = nodeCheckedStatus(node);
|
||||
const isSelected = selectedPath === node.status.relaPath;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
depth > 0 && 'pl-4 ml-2 border-l border-dashed border-border-subtle relative',
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={classNames(
|
||||
'relative flex gap-1 w-full h-xs items-center',
|
||||
isSelected ? 'text-text' : 'text-text-subtle',
|
||||
)}
|
||||
>
|
||||
{isSelected && (
|
||||
<div className="absolute -left-[100vw] right-0 top-0 bottom-0 bg-surface-active opacity-30 -z-10" />
|
||||
)}
|
||||
<Checkbox
|
||||
checked={checked}
|
||||
title={checked ? 'Unstage change' : 'Stage change'}
|
||||
hideLabel
|
||||
onChange={(checked) => onCheck(node, checked)}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className={classNames('flex-1 min-w-0 flex items-center gap-1 px-1 py-0.5 text-left')}
|
||||
onClick={() => node.status.status !== 'current' && onSelect(node.status)}
|
||||
>
|
||||
{node.model.model !== 'http_request' &&
|
||||
node.model.model !== 'grpc_request' &&
|
||||
node.model.model !== 'websocket_request' ? (
|
||||
<Icon
|
||||
color="secondary"
|
||||
icon={
|
||||
node.model.model === 'folder'
|
||||
? 'folder'
|
||||
: node.model.model === 'environment'
|
||||
? 'variable'
|
||||
: 'house'
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<span aria-hidden className="w-4" />
|
||||
)}
|
||||
<div className="truncate flex-1">{resolvedModelName(node.model)}</div>
|
||||
{node.status.status !== 'current' && (
|
||||
<InlineCode
|
||||
className={classNames(
|
||||
'py-0 bg-transparent w-[6rem] text-center shrink-0',
|
||||
node.status.status === 'modified' && 'text-info',
|
||||
node.status.status === 'untracked' && 'text-success',
|
||||
node.status.status === 'removed' && 'text-danger',
|
||||
)}
|
||||
>
|
||||
{node.status.status}
|
||||
</InlineCode>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{node.children.map((childNode) => {
|
||||
return (
|
||||
<TreeNodeChildren
|
||||
key={childNode.status.relaPath + childNode.status.status + childNode.status.staged}
|
||||
node={childNode}
|
||||
depth={depth + 1}
|
||||
onCheck={onCheck}
|
||||
onSelect={onSelect}
|
||||
selectedPath={selectedPath}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ExternalTreeNode({
|
||||
entry,
|
||||
onCheck,
|
||||
}: {
|
||||
entry: GitStatusEntry;
|
||||
onCheck: (entry: GitStatusEntry) => void;
|
||||
}) {
|
||||
if (entry.status === 'current') {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Checkbox
|
||||
fullWidth
|
||||
className="h-xs w-full hover:bg-surface-highlight rounded px-1 group"
|
||||
checked={entry.staged}
|
||||
onChange={() => onCheck(entry)}
|
||||
title={
|
||||
<div className="grid grid-cols-[auto_minmax(0,1fr)_auto] gap-1 w-full items-center">
|
||||
<Icon color="secondary" icon="file_code" />
|
||||
<div className="truncate">{entry.relaPath}</div>
|
||||
<InlineCode
|
||||
className={classNames(
|
||||
'py-0 ml-auto bg-transparent w-[6rem] text-center',
|
||||
entry.status === 'modified' && 'text-info',
|
||||
entry.status === 'untracked' && 'text-success',
|
||||
entry.status === 'removed' && 'text-danger',
|
||||
)}
|
||||
>
|
||||
{entry.status}
|
||||
</InlineCode>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function nodeCheckedStatus(root: CommitTreeNode): CheckboxProps['checked'] {
|
||||
let numVisited = 0;
|
||||
let numChecked = 0;
|
||||
let numCurrent = 0;
|
||||
|
||||
const visitChildren = (n: CommitTreeNode) => {
|
||||
numVisited += 1;
|
||||
if (n.status.status === 'current') {
|
||||
numCurrent += 1;
|
||||
} else if (n.status.staged) {
|
||||
numChecked += 1;
|
||||
}
|
||||
for (const child of n.children) {
|
||||
visitChildren(child);
|
||||
}
|
||||
};
|
||||
|
||||
visitChildren(root);
|
||||
|
||||
if (numVisited === numChecked + numCurrent) {
|
||||
return true;
|
||||
}
|
||||
if (numChecked === 0) {
|
||||
return false;
|
||||
}
|
||||
return 'indeterminate';
|
||||
}
|
||||
|
||||
function setCheckedAndChildren(
|
||||
node: CommitTreeNode,
|
||||
checked: boolean,
|
||||
unstage: (args: { relaPaths: string[] }) => void,
|
||||
add: (args: { relaPaths: string[] }) => void,
|
||||
) {
|
||||
const toAdd: string[] = [];
|
||||
const toUnstage: string[] = [];
|
||||
|
||||
const next = (node: CommitTreeNode) => {
|
||||
for (const child of node.children) {
|
||||
next(child);
|
||||
}
|
||||
|
||||
if (node.status.status === 'current') {
|
||||
// Nothing required
|
||||
} else if (checked && !node.status.staged) {
|
||||
toAdd.push(node.status.relaPath);
|
||||
} else if (!checked && node.status.staged) {
|
||||
toUnstage.push(node.status.relaPath);
|
||||
}
|
||||
};
|
||||
|
||||
next(node);
|
||||
|
||||
if (toAdd.length > 0) add({ relaPaths: toAdd });
|
||||
if (toUnstage.length > 0) unstage({ relaPaths: toUnstage });
|
||||
}
|
||||
|
||||
function isNodeRelevant(node: CommitTreeNode): boolean {
|
||||
if (node.status.status !== 'current') {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Recursively check children
|
||||
return node.children.some((c) => isNodeRelevant(c));
|
||||
}
|
||||
|
||||
function DiffPanel({ entry }: { entry: GitStatusEntry }) {
|
||||
const prevYaml = modelToYaml(entry.prev);
|
||||
const nextYaml = modelToYaml(entry.next);
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col">
|
||||
<div className="text-sm text-text-subtle mb-2 px-1">
|
||||
{resolvedModelName(entry.next ?? entry.prev)} ({entry.status})
|
||||
</div>
|
||||
<DiffViewer original={prevYaml ?? ''} modified={nextYaml ?? ''} className="flex-1 min-h-0" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
655
apps/yaak-client/components/git/GitDropdown.tsx
Normal file
655
apps/yaak-client/components/git/GitDropdown.tsx
Normal file
@@ -0,0 +1,655 @@
|
||||
import { useGit } from '@yaakapp-internal/git';
|
||||
import type { WorkspaceMeta } from '@yaakapp-internal/models';
|
||||
import classNames from 'classnames';
|
||||
import { useAtomValue } from 'jotai';
|
||||
import type { HTMLAttributes } from 'react';
|
||||
import { forwardRef } from 'react';
|
||||
import { openWorkspaceSettings } from '../../commands/openWorkspaceSettings';
|
||||
import { activeWorkspaceAtom, activeWorkspaceMetaAtom } from '../../hooks/useActiveWorkspace';
|
||||
import { useKeyValue } from '../../hooks/useKeyValue';
|
||||
import { useRandomKey } from '../../hooks/useRandomKey';
|
||||
import { sync } from '../../init/sync';
|
||||
import { showConfirm, showConfirmDelete } from '../../lib/confirm';
|
||||
import { showDialog } from '../../lib/dialog';
|
||||
import { showPrompt } from '../../lib/prompt';
|
||||
import { showErrorToast, showToast } from '../../lib/toast';
|
||||
import { Banner } from '../core/Banner';
|
||||
import type { DropdownItem } from '../core/Dropdown';
|
||||
import { Dropdown } from '../core/Dropdown';
|
||||
import { Icon } from '../core/Icon';
|
||||
import { InlineCode } from '../core/InlineCode';
|
||||
import { gitCallbacks } from './callbacks';
|
||||
import { GitCommitDialog } from './GitCommitDialog';
|
||||
import { GitRemotesDialog } from './GitRemotesDialog';
|
||||
import { handlePullResult, handlePushResult } from './git-util';
|
||||
import { HistoryDialog } from './HistoryDialog';
|
||||
|
||||
export function GitDropdown() {
|
||||
const workspaceMeta = useAtomValue(activeWorkspaceMetaAtom);
|
||||
if (workspaceMeta == null) return null;
|
||||
|
||||
if (workspaceMeta.settingSyncDir == null) {
|
||||
return <SetupSyncDropdown workspaceMeta={workspaceMeta} />;
|
||||
}
|
||||
|
||||
return <SyncDropdownWithSyncDir syncDir={workspaceMeta.settingSyncDir} />;
|
||||
}
|
||||
|
||||
function SyncDropdownWithSyncDir({ syncDir }: { syncDir: string }) {
|
||||
const workspace = useAtomValue(activeWorkspaceAtom);
|
||||
const [refreshKey, regenerateKey] = useRandomKey();
|
||||
const [
|
||||
{ status, log },
|
||||
{
|
||||
createBranch,
|
||||
deleteBranch,
|
||||
deleteRemoteBranch,
|
||||
renameBranch,
|
||||
mergeBranch,
|
||||
push,
|
||||
pull,
|
||||
checkout,
|
||||
resetChanges,
|
||||
init,
|
||||
},
|
||||
] = useGit(syncDir, gitCallbacks(syncDir), refreshKey);
|
||||
|
||||
const localBranches = status.data?.localBranches ?? [];
|
||||
const remoteBranches = status.data?.remoteBranches ?? [];
|
||||
const remoteOnlyBranches = remoteBranches.filter(
|
||||
(b) => !localBranches.includes(b.replace(/^origin\//, '')),
|
||||
);
|
||||
if (workspace == null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const noRepo = status.error?.includes('not found');
|
||||
if (noRepo) {
|
||||
return <SetupGitDropdown workspaceId={workspace.id} initRepo={init.mutate} />;
|
||||
}
|
||||
|
||||
// Still loading
|
||||
if (status.data == null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const currentBranch = status.data.headRefShorthand;
|
||||
const hasChanges = status.data.entries.some((e) => e.status !== 'current');
|
||||
const hasRemotes = (status.data.origins ?? []).length > 0;
|
||||
const { ahead, behind } = status.data;
|
||||
|
||||
const tryCheckout = (branch: string, force: boolean) => {
|
||||
checkout.mutate(
|
||||
{ branch, force },
|
||||
{
|
||||
disableToastError: true,
|
||||
async onError(err) {
|
||||
if (!force) {
|
||||
// Checkout failed so ask user if they want to force it
|
||||
const forceCheckout = await showConfirm({
|
||||
id: 'git-force-checkout',
|
||||
title: 'Conflicts Detected',
|
||||
description:
|
||||
'Your branch has conflicts. Either make a commit or force checkout to discard changes.',
|
||||
confirmText: 'Force Checkout',
|
||||
color: 'warning',
|
||||
});
|
||||
if (forceCheckout) {
|
||||
tryCheckout(branch, true);
|
||||
}
|
||||
} else {
|
||||
// Checkout failed
|
||||
showErrorToast({
|
||||
id: 'git-checkout-error',
|
||||
title: 'Error checking out branch',
|
||||
message: String(err),
|
||||
});
|
||||
}
|
||||
},
|
||||
async onSuccess(branchName) {
|
||||
showToast({
|
||||
id: 'git-checkout-success',
|
||||
message: (
|
||||
<>
|
||||
Switched branch <InlineCode>{branchName}</InlineCode>
|
||||
</>
|
||||
),
|
||||
color: 'success',
|
||||
});
|
||||
await sync({ force: true });
|
||||
},
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
const items: DropdownItem[] = [
|
||||
{
|
||||
label: 'View History...',
|
||||
hidden: (log.data ?? []).length === 0,
|
||||
leftSlot: <Icon icon="history" />,
|
||||
onSelect: async () => {
|
||||
showDialog({
|
||||
id: 'git-history',
|
||||
size: 'md',
|
||||
title: 'Commit History',
|
||||
noPadding: true,
|
||||
render: () => <HistoryDialog log={log.data ?? []} />,
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Manage Remotes...',
|
||||
leftSlot: <Icon icon="hard_drive_download" />,
|
||||
onSelect: () => GitRemotesDialog.show(syncDir),
|
||||
},
|
||||
{ type: 'separator' },
|
||||
{
|
||||
label: 'New Branch...',
|
||||
leftSlot: <Icon icon="git_branch_plus" />,
|
||||
async onSelect() {
|
||||
const name = await showPrompt({
|
||||
id: 'git-branch-name',
|
||||
title: 'Create Branch',
|
||||
label: 'Branch Name',
|
||||
});
|
||||
if (!name) return;
|
||||
|
||||
await createBranch.mutateAsync(
|
||||
{ branch: name },
|
||||
{
|
||||
disableToastError: true,
|
||||
onError: (err) => {
|
||||
showErrorToast({
|
||||
id: 'git-branch-error',
|
||||
title: 'Error creating branch',
|
||||
message: String(err),
|
||||
});
|
||||
},
|
||||
},
|
||||
);
|
||||
tryCheckout(name, false);
|
||||
},
|
||||
},
|
||||
{ type: 'separator' },
|
||||
{
|
||||
label: 'Push',
|
||||
leftSlot: <Icon icon="arrow_up_from_line" />,
|
||||
waitForOnSelect: true,
|
||||
async onSelect() {
|
||||
await push.mutateAsync(undefined, {
|
||||
disableToastError: true,
|
||||
onSuccess: handlePushResult,
|
||||
onError(err) {
|
||||
showErrorToast({
|
||||
id: 'git-push-error',
|
||||
title: 'Error pushing changes',
|
||||
message: String(err),
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Pull',
|
||||
leftSlot: <Icon icon="arrow_down_to_line" />,
|
||||
waitForOnSelect: true,
|
||||
async onSelect() {
|
||||
await pull.mutateAsync(undefined, {
|
||||
disableToastError: true,
|
||||
onSuccess: handlePullResult,
|
||||
onError(err) {
|
||||
showErrorToast({
|
||||
id: 'git-pull-error',
|
||||
title: 'Error pulling changes',
|
||||
message: String(err),
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Commit...',
|
||||
|
||||
leftSlot: <Icon icon="git_commit_vertical" />,
|
||||
onSelect() {
|
||||
showDialog({
|
||||
id: 'commit',
|
||||
title: 'Commit Changes',
|
||||
size: 'full',
|
||||
noPadding: true,
|
||||
render: ({ hide }) => (
|
||||
<GitCommitDialog syncDir={syncDir} onDone={hide} workspace={workspace} />
|
||||
),
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Reset Changes',
|
||||
hidden: !hasChanges,
|
||||
leftSlot: <Icon icon="rotate_ccw" />,
|
||||
color: 'danger',
|
||||
async onSelect() {
|
||||
const confirmed = await showConfirm({
|
||||
id: 'git-reset-changes',
|
||||
title: 'Reset Changes',
|
||||
description: 'This will discard all uncommitted changes. This cannot be undone.',
|
||||
confirmText: 'Reset',
|
||||
color: 'danger',
|
||||
});
|
||||
if (!confirmed) return;
|
||||
|
||||
await resetChanges.mutateAsync(undefined, {
|
||||
disableToastError: true,
|
||||
onSuccess() {
|
||||
showToast({
|
||||
id: 'git-reset-success',
|
||||
message: 'Changes have been reset',
|
||||
color: 'success',
|
||||
});
|
||||
sync({ force: true });
|
||||
},
|
||||
onError(err) {
|
||||
showErrorToast({
|
||||
id: 'git-reset-error',
|
||||
title: 'Error resetting changes',
|
||||
message: String(err),
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
{ type: 'separator', label: 'Branches', hidden: localBranches.length < 1 },
|
||||
...localBranches.map((branch) => {
|
||||
const isCurrent = currentBranch === branch;
|
||||
return {
|
||||
label: branch,
|
||||
leftSlot: <Icon icon={isCurrent ? 'check' : 'empty'} />,
|
||||
submenuOpenOnClick: true,
|
||||
submenu: [
|
||||
{
|
||||
label: 'Checkout',
|
||||
hidden: isCurrent,
|
||||
onSelect: () => tryCheckout(branch, false),
|
||||
},
|
||||
{
|
||||
label: (
|
||||
<>
|
||||
Merge into <InlineCode>{currentBranch}</InlineCode>
|
||||
</>
|
||||
),
|
||||
hidden: isCurrent,
|
||||
async onSelect() {
|
||||
await mergeBranch.mutateAsync(
|
||||
{ branch },
|
||||
{
|
||||
disableToastError: true,
|
||||
onSuccess() {
|
||||
showToast({
|
||||
id: 'git-merged-branch',
|
||||
message: (
|
||||
<>
|
||||
Merged <InlineCode>{branch}</InlineCode> into{' '}
|
||||
<InlineCode>{currentBranch}</InlineCode>
|
||||
</>
|
||||
),
|
||||
});
|
||||
sync({ force: true });
|
||||
},
|
||||
onError(err) {
|
||||
showErrorToast({
|
||||
id: 'git-merged-branch-error',
|
||||
title: 'Error merging branch',
|
||||
message: String(err),
|
||||
});
|
||||
},
|
||||
},
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'New Branch...',
|
||||
async onSelect() {
|
||||
const name = await showPrompt({
|
||||
id: 'git-new-branch-from',
|
||||
title: 'New Branch',
|
||||
description: (
|
||||
<>
|
||||
Create a new branch from <InlineCode>{branch}</InlineCode>
|
||||
</>
|
||||
),
|
||||
label: 'Branch Name',
|
||||
});
|
||||
if (!name) return;
|
||||
|
||||
await createBranch.mutateAsync(
|
||||
{ branch: name, base: branch },
|
||||
{
|
||||
disableToastError: true,
|
||||
onError: (err) => {
|
||||
showErrorToast({
|
||||
id: 'git-branch-error',
|
||||
title: 'Error creating branch',
|
||||
message: String(err),
|
||||
});
|
||||
},
|
||||
},
|
||||
);
|
||||
tryCheckout(name, false);
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Rename...',
|
||||
async onSelect() {
|
||||
const newName = await showPrompt({
|
||||
id: 'git-rename-branch',
|
||||
title: 'Rename Branch',
|
||||
label: 'New Branch Name',
|
||||
defaultValue: branch,
|
||||
});
|
||||
if (!newName || newName === branch) return;
|
||||
|
||||
await renameBranch.mutateAsync(
|
||||
{ oldName: branch, newName },
|
||||
{
|
||||
disableToastError: true,
|
||||
onSuccess() {
|
||||
showToast({
|
||||
id: 'git-rename-branch-success',
|
||||
message: (
|
||||
<>
|
||||
Renamed <InlineCode>{branch}</InlineCode> to{' '}
|
||||
<InlineCode>{newName}</InlineCode>
|
||||
</>
|
||||
),
|
||||
color: 'success',
|
||||
});
|
||||
},
|
||||
onError(err) {
|
||||
showErrorToast({
|
||||
id: 'git-rename-branch-error',
|
||||
title: 'Error renaming branch',
|
||||
message: String(err),
|
||||
});
|
||||
},
|
||||
},
|
||||
);
|
||||
},
|
||||
},
|
||||
{ type: 'separator', hidden: isCurrent },
|
||||
{
|
||||
label: 'Delete',
|
||||
color: 'danger',
|
||||
hidden: isCurrent,
|
||||
onSelect: async () => {
|
||||
const confirmed = await showConfirmDelete({
|
||||
id: 'git-delete-branch',
|
||||
title: 'Delete Branch',
|
||||
description: (
|
||||
<>
|
||||
Permanently delete <InlineCode>{branch}</InlineCode>?
|
||||
</>
|
||||
),
|
||||
});
|
||||
if (!confirmed) {
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await deleteBranch.mutateAsync(
|
||||
{ branch },
|
||||
{
|
||||
disableToastError: true,
|
||||
onError(err) {
|
||||
showErrorToast({
|
||||
id: 'git-delete-branch-error',
|
||||
title: 'Error deleting branch',
|
||||
message: String(err),
|
||||
});
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
if (result.type === 'not_fully_merged') {
|
||||
const confirmed = await showConfirm({
|
||||
id: 'force-branch-delete',
|
||||
title: 'Branch not fully merged',
|
||||
description: (
|
||||
<>
|
||||
<p>
|
||||
Branch <InlineCode>{branch}</InlineCode> is not fully merged.
|
||||
</p>
|
||||
<p>Do you want to delete it anyway?</p>
|
||||
</>
|
||||
),
|
||||
});
|
||||
if (confirmed) {
|
||||
await deleteBranch.mutateAsync(
|
||||
{ branch, force: true },
|
||||
{
|
||||
disableToastError: true,
|
||||
onError(err) {
|
||||
showErrorToast({
|
||||
id: 'git-force-delete-branch-error',
|
||||
title: 'Error force deleting branch',
|
||||
message: String(err),
|
||||
});
|
||||
},
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
} satisfies DropdownItem;
|
||||
}),
|
||||
...remoteOnlyBranches.map((branch) => {
|
||||
const isCurrent = currentBranch === branch;
|
||||
return {
|
||||
label: branch,
|
||||
leftSlot: <Icon icon={isCurrent ? 'check' : 'empty'} />,
|
||||
submenuOpenOnClick: true,
|
||||
submenu: [
|
||||
{
|
||||
label: 'Checkout',
|
||||
hidden: isCurrent,
|
||||
onSelect: () => tryCheckout(branch, false),
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
color: 'danger',
|
||||
async onSelect() {
|
||||
const confirmed = await showConfirmDelete({
|
||||
id: 'git-delete-remote-branch',
|
||||
title: 'Delete Remote Branch',
|
||||
description: (
|
||||
<>
|
||||
Permanently delete <InlineCode>{branch}</InlineCode> from the remote?
|
||||
</>
|
||||
),
|
||||
});
|
||||
if (!confirmed) return;
|
||||
|
||||
await deleteRemoteBranch.mutateAsync(
|
||||
{ branch },
|
||||
{
|
||||
disableToastError: true,
|
||||
onSuccess() {
|
||||
showToast({
|
||||
id: 'git-delete-remote-branch-success',
|
||||
message: (
|
||||
<>
|
||||
Deleted remote branch <InlineCode>{branch}</InlineCode>
|
||||
</>
|
||||
),
|
||||
color: 'success',
|
||||
});
|
||||
},
|
||||
onError(err) {
|
||||
showErrorToast({
|
||||
id: 'git-delete-remote-branch-error',
|
||||
title: 'Error deleting remote branch',
|
||||
message: String(err),
|
||||
});
|
||||
},
|
||||
},
|
||||
);
|
||||
},
|
||||
},
|
||||
],
|
||||
} satisfies DropdownItem;
|
||||
}),
|
||||
];
|
||||
|
||||
return (
|
||||
<Dropdown fullWidth items={items} onOpen={regenerateKey}>
|
||||
<GitMenuButton>
|
||||
<InlineCode className="flex items-center gap-1">
|
||||
<Icon icon="git_branch" size="xs" className="opacity-50" />
|
||||
{currentBranch}
|
||||
</InlineCode>
|
||||
<div className="flex items-center gap-1.5">
|
||||
{ahead > 0 && (
|
||||
<span className="text-xs flex items-center gap-0.5">
|
||||
<span className="text-primary">↗</span>
|
||||
{ahead}
|
||||
</span>
|
||||
)}
|
||||
{behind > 0 && (
|
||||
<span className="text-xs flex items-center gap-0.5">
|
||||
<span className="text-info">↙</span>
|
||||
{behind}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</GitMenuButton>
|
||||
</Dropdown>
|
||||
);
|
||||
}
|
||||
|
||||
const GitMenuButton = forwardRef<HTMLButtonElement, HTMLAttributes<HTMLButtonElement>>(
|
||||
function GitMenuButton({ className, ...props }: HTMLAttributes<HTMLButtonElement>, ref) {
|
||||
return (
|
||||
<button
|
||||
ref={ref}
|
||||
className={classNames(
|
||||
className,
|
||||
'px-3 h-md border-t border-border flex items-center justify-between text-text-subtle outline-none focus-visible:bg-surface-highlight',
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
function SetupSyncDropdown({ workspaceMeta }: { workspaceMeta: WorkspaceMeta }) {
|
||||
const { value: hidden, set: setHidden } = useKeyValue<Record<string, boolean>>({
|
||||
key: 'setup_sync',
|
||||
fallback: {},
|
||||
});
|
||||
|
||||
if (hidden == null || hidden[workspaceMeta.workspaceId]) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const banner = (
|
||||
<Banner color="info">
|
||||
When enabled, workspace data syncs to the chosen folder as text files, ideal for backup and
|
||||
Git collaboration.
|
||||
</Banner>
|
||||
);
|
||||
|
||||
return (
|
||||
<Dropdown
|
||||
fullWidth
|
||||
items={[
|
||||
{
|
||||
type: 'content',
|
||||
label: banner,
|
||||
},
|
||||
{
|
||||
color: 'success',
|
||||
label: 'Open Workspace Settings',
|
||||
leftSlot: <Icon icon="settings" />,
|
||||
onSelect: () => openWorkspaceSettings('data'),
|
||||
},
|
||||
{ type: 'separator' },
|
||||
{
|
||||
label: 'Hide This Message',
|
||||
leftSlot: <Icon icon="eye_closed" />,
|
||||
async onSelect() {
|
||||
const confirmed = await showConfirm({
|
||||
id: 'hide-sync-menu-prompt',
|
||||
title: 'Hide Setup Message',
|
||||
description: 'You can configure filesystem sync or Git it in the workspace settings',
|
||||
});
|
||||
if (confirmed) {
|
||||
await setHidden((prev) => ({ ...prev, [workspaceMeta.workspaceId]: true }));
|
||||
}
|
||||
},
|
||||
},
|
||||
]}
|
||||
>
|
||||
<GitMenuButton>
|
||||
<div className="text-sm text-text-subtle grid grid-cols-[auto_minmax(0,1fr)] items-center gap-2">
|
||||
<Icon icon="wrench" />
|
||||
<div className="truncate">Setup FS Sync or Git</div>
|
||||
</div>
|
||||
</GitMenuButton>
|
||||
</Dropdown>
|
||||
);
|
||||
}
|
||||
|
||||
function SetupGitDropdown({
|
||||
workspaceId,
|
||||
initRepo,
|
||||
}: {
|
||||
workspaceId: string;
|
||||
initRepo: () => void;
|
||||
}) {
|
||||
const { value: hidden, set: setHidden } = useKeyValue<Record<string, boolean>>({
|
||||
key: 'setup_git_repo',
|
||||
fallback: {},
|
||||
});
|
||||
|
||||
if (hidden == null || hidden[workspaceId]) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const banner = <Banner color="info">Initialize local repo to start versioning with Git</Banner>;
|
||||
|
||||
return (
|
||||
<Dropdown
|
||||
fullWidth
|
||||
items={[
|
||||
{ type: 'content', label: banner },
|
||||
{
|
||||
label: 'Initialize Git Repo',
|
||||
leftSlot: <Icon icon="magic_wand" />,
|
||||
onSelect: initRepo,
|
||||
},
|
||||
{ type: 'separator' },
|
||||
{
|
||||
label: 'Hide This Message',
|
||||
leftSlot: <Icon icon="eye_closed" />,
|
||||
async onSelect() {
|
||||
const confirmed = await showConfirm({
|
||||
id: 'hide-git-init-prompt',
|
||||
title: 'Hide Git Setup',
|
||||
description: 'You can initialize a git repo outside of Yaak to bring this back',
|
||||
});
|
||||
if (confirmed) {
|
||||
await setHidden((prev) => ({ ...prev, [workspaceId]: true }));
|
||||
}
|
||||
},
|
||||
},
|
||||
]}
|
||||
>
|
||||
<GitMenuButton>
|
||||
<div className="text-sm text-text-subtle grid grid-cols-[auto_minmax(0,1fr)] items-center gap-2">
|
||||
<Icon icon="folder_git" />
|
||||
<div className="truncate">Setup Git</div>
|
||||
</div>
|
||||
</GitMenuButton>
|
||||
</Dropdown>
|
||||
);
|
||||
}
|
||||
65
apps/yaak-client/components/git/GitRemotesDialog.tsx
Normal file
65
apps/yaak-client/components/git/GitRemotesDialog.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import { useGit } from '@yaakapp-internal/git';
|
||||
import { showDialog } from '../../lib/dialog';
|
||||
import { Button } from '../core/Button';
|
||||
import { IconButton } from '../core/IconButton';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from '../core/Table';
|
||||
import { gitCallbacks } from './callbacks';
|
||||
import { addGitRemote } from './showAddRemoteDialog';
|
||||
|
||||
interface Props {
|
||||
dir: string;
|
||||
onDone: () => void;
|
||||
}
|
||||
|
||||
export function GitRemotesDialog({ dir }: Props) {
|
||||
const [{ remotes }, { rmRemote }] = useGit(dir, gitCallbacks(dir));
|
||||
|
||||
return (
|
||||
<Table scrollable>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableHeaderCell>Name</TableHeaderCell>
|
||||
<TableHeaderCell>URL</TableHeaderCell>
|
||||
<TableHeaderCell>
|
||||
<Button
|
||||
className="text-text-subtle ml-auto"
|
||||
size="2xs"
|
||||
color="primary"
|
||||
title="Add remote"
|
||||
variant="border"
|
||||
onClick={() => addGitRemote(dir)}
|
||||
>
|
||||
Add Remote
|
||||
</Button>
|
||||
</TableHeaderCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{remotes.data?.map((r) => (
|
||||
<TableRow key={r.name + r.url}>
|
||||
<TableCell>{r.name}</TableCell>
|
||||
<TableCell>{r.url}</TableCell>
|
||||
<TableCell>
|
||||
<IconButton
|
||||
size="sm"
|
||||
className="text-text-subtle ml-auto"
|
||||
icon="trash"
|
||||
title="Remove remote"
|
||||
onClick={() => rmRemote.mutate({ name: r.name })}
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
);
|
||||
}
|
||||
|
||||
GitRemotesDialog.show = (dir: string) => {
|
||||
showDialog({
|
||||
id: 'git-remotes',
|
||||
title: 'Manage Remotes',
|
||||
size: 'md',
|
||||
render: ({ hide }) => <GitRemotesDialog onDone={hide} dir={dir} />,
|
||||
});
|
||||
};
|
||||
46
apps/yaak-client/components/git/HistoryDialog.tsx
Normal file
46
apps/yaak-client/components/git/HistoryDialog.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import type { GitCommit } from '@yaakapp-internal/git';
|
||||
import { formatDistanceToNowStrict } from 'date-fns';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeaderCell,
|
||||
TableRow,
|
||||
TruncatedWideTableCell,
|
||||
} from '../core/Table';
|
||||
|
||||
interface Props {
|
||||
log: GitCommit[];
|
||||
}
|
||||
|
||||
export function HistoryDialog({ log }: Props) {
|
||||
return (
|
||||
<div className="pl-5 pr-1 pb-1">
|
||||
<Table scrollable className="px-1">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableHeaderCell>Message</TableHeaderCell>
|
||||
<TableHeaderCell>Author</TableHeaderCell>
|
||||
<TableHeaderCell>When</TableHeaderCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{log.map((l) => (
|
||||
<TableRow key={l.author + (l.message ?? 'n/a') + l.when}>
|
||||
<TruncatedWideTableCell>
|
||||
{l.message || <em className="text-text-subtle">No message</em>}
|
||||
</TruncatedWideTableCell>
|
||||
<TableCell>
|
||||
<span title={`Email: ${l.author.email}`}>{l.author.name || 'Unknown'}</span>
|
||||
</TableCell>
|
||||
<TableCell className="text-text-subtle">
|
||||
<span title={l.when}>{formatDistanceToNowStrict(l.when)} ago</span>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
26
apps/yaak-client/components/git/callbacks.tsx
Normal file
26
apps/yaak-client/components/git/callbacks.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import type { GitCallbacks } from '@yaakapp-internal/git';
|
||||
import { sync } from '../../init/sync';
|
||||
import { promptCredentials } from './credentials';
|
||||
import { promptDivergedStrategy } from './diverged';
|
||||
import { addGitRemote } from './showAddRemoteDialog';
|
||||
import { promptUncommittedChangesStrategy } from './uncommitted';
|
||||
|
||||
export function gitCallbacks(dir: string): GitCallbacks {
|
||||
return {
|
||||
addRemote: async () => {
|
||||
return addGitRemote(dir, 'origin');
|
||||
},
|
||||
promptCredentials: async ({ url, error }) => {
|
||||
const creds = await promptCredentials({ url, error });
|
||||
if (creds == null) throw new Error('Cancelled credentials prompt');
|
||||
return creds;
|
||||
},
|
||||
promptDiverged: async ({ remote, branch }) => {
|
||||
return promptDivergedStrategy({ remote, branch });
|
||||
},
|
||||
promptUncommittedChanges: async () => {
|
||||
return promptUncommittedChangesStrategy();
|
||||
},
|
||||
forceSync: () => sync({ force: true }),
|
||||
};
|
||||
}
|
||||
50
apps/yaak-client/components/git/credentials.tsx
Normal file
50
apps/yaak-client/components/git/credentials.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
import { showPromptForm } from '../../lib/prompt-form';
|
||||
import { Banner } from '../core/Banner';
|
||||
import { InlineCode } from '../core/InlineCode';
|
||||
|
||||
export interface GitCredentials {
|
||||
username: string;
|
||||
password: string;
|
||||
}
|
||||
|
||||
export async function promptCredentials({
|
||||
url: remoteUrl,
|
||||
error,
|
||||
}: {
|
||||
url: string;
|
||||
error: string | null;
|
||||
}): Promise<GitCredentials | null> {
|
||||
const isGitHub = /github\.com/i.test(remoteUrl);
|
||||
const userLabel = isGitHub ? 'GitHub Username' : 'Username';
|
||||
const passLabel = isGitHub ? 'GitHub Personal Access Token' : 'Password / Token';
|
||||
const userDescription = isGitHub ? 'Use your GitHub username (not your email).' : undefined;
|
||||
const passDescription = isGitHub
|
||||
? 'GitHub requires a Personal Access Token (PAT) for write operations over HTTPS. Passwords are not supported.'
|
||||
: 'Enter your password or access token for this Git server.';
|
||||
const r = await showPromptForm({
|
||||
id: 'git-credentials',
|
||||
title: 'Credentials Required',
|
||||
description: error ? (
|
||||
<Banner color="danger">{error}</Banner>
|
||||
) : (
|
||||
<>
|
||||
Enter credentials for <InlineCode>{remoteUrl}</InlineCode>
|
||||
</>
|
||||
),
|
||||
inputs: [
|
||||
{ type: 'text', name: 'username', label: userLabel, description: userDescription },
|
||||
{
|
||||
type: 'text',
|
||||
name: 'password',
|
||||
label: passLabel,
|
||||
description: passDescription,
|
||||
password: true,
|
||||
},
|
||||
],
|
||||
});
|
||||
if (r == null) return null;
|
||||
|
||||
const username = String(r.username || '');
|
||||
const password = String(r.password || '');
|
||||
return { username, password };
|
||||
}
|
||||
102
apps/yaak-client/components/git/diverged.tsx
Normal file
102
apps/yaak-client/components/git/diverged.tsx
Normal file
@@ -0,0 +1,102 @@
|
||||
import type { DivergedStrategy } from '@yaakapp-internal/git';
|
||||
import { useState } from 'react';
|
||||
import { showDialog } from '../../lib/dialog';
|
||||
import { Button } from '../core/Button';
|
||||
import { InlineCode } from '../core/InlineCode';
|
||||
import { RadioCards } from '../core/RadioCards';
|
||||
import { HStack } from '../core/Stacks';
|
||||
|
||||
type Resolution = 'force_reset' | 'merge';
|
||||
|
||||
const resolutionLabel: Record<Resolution, string> = {
|
||||
force_reset: 'Force Pull',
|
||||
merge: 'Merge',
|
||||
};
|
||||
|
||||
interface DivergedDialogProps {
|
||||
remote: string;
|
||||
branch: string;
|
||||
onResult: (strategy: DivergedStrategy) => void;
|
||||
onHide: () => void;
|
||||
}
|
||||
|
||||
function DivergedDialog({ remote, branch, onResult, onHide }: DivergedDialogProps) {
|
||||
const [selected, setSelected] = useState<Resolution | null>(null);
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (selected == null) return;
|
||||
onResult(selected);
|
||||
onHide();
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
onResult('cancel');
|
||||
onHide();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4 mb-4">
|
||||
<p className="text-text-subtle">
|
||||
Your local branch has diverged from{' '}
|
||||
<InlineCode>
|
||||
{remote}/{branch}
|
||||
</InlineCode>. How would you like to resolve this?
|
||||
</p>
|
||||
<RadioCards
|
||||
name="diverged-strategy"
|
||||
value={selected}
|
||||
onChange={setSelected}
|
||||
options={[
|
||||
{
|
||||
value: 'merge',
|
||||
label: 'Merge Commit',
|
||||
description: 'Combining local and remote changes into a single merge commit',
|
||||
},
|
||||
{
|
||||
value: 'force_reset',
|
||||
label: 'Force Pull',
|
||||
description: 'Discard local commits and reset to match the remote branch',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<HStack space={2} justifyContent="start" className="flex-row-reverse">
|
||||
<Button
|
||||
color={selected === 'force_reset' ? 'danger' : 'primary'}
|
||||
disabled={selected == null}
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
{selected != null ? resolutionLabel[selected] : 'Select an option'}
|
||||
</Button>
|
||||
<Button variant="border" onClick={handleCancel}>
|
||||
Cancel
|
||||
</Button>
|
||||
</HStack>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export async function promptDivergedStrategy({
|
||||
remote,
|
||||
branch,
|
||||
}: {
|
||||
remote: string;
|
||||
branch: string;
|
||||
}): Promise<DivergedStrategy> {
|
||||
return new Promise((resolve) => {
|
||||
showDialog({
|
||||
id: 'git-diverged',
|
||||
title: 'Branches Diverged',
|
||||
hideX: true,
|
||||
size: 'sm',
|
||||
disableBackdropClose: true,
|
||||
onClose: () => resolve('cancel'),
|
||||
render: ({ hide }) =>
|
||||
DivergedDialog({
|
||||
remote,
|
||||
branch,
|
||||
onHide: hide,
|
||||
onResult: resolve,
|
||||
}),
|
||||
});
|
||||
});
|
||||
}
|
||||
36
apps/yaak-client/components/git/git-util.ts
Normal file
36
apps/yaak-client/components/git/git-util.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
import type { PullResult, PushResult } from '@yaakapp-internal/git';
|
||||
import { showToast } from '../../lib/toast';
|
||||
|
||||
export function handlePushResult(r: PushResult) {
|
||||
switch (r.type) {
|
||||
case 'needs_credentials':
|
||||
showToast({ id: 'push-error', message: 'Credentials not found', color: 'danger' });
|
||||
break;
|
||||
case 'success':
|
||||
showToast({ id: 'push-success', message: r.message, color: 'success' });
|
||||
break;
|
||||
case 'up_to_date':
|
||||
showToast({ id: 'push-nothing', message: 'Already up-to-date', color: 'info' });
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
export function handlePullResult(r: PullResult) {
|
||||
switch (r.type) {
|
||||
case 'needs_credentials':
|
||||
showToast({ id: 'pull-error', message: 'Credentials not found', color: 'danger' });
|
||||
break;
|
||||
case 'success':
|
||||
showToast({ id: 'pull-success', message: r.message, color: 'success' });
|
||||
break;
|
||||
case 'up_to_date':
|
||||
showToast({ id: 'pull-nothing', message: 'Already up-to-date', color: 'info' });
|
||||
break;
|
||||
case 'diverged':
|
||||
// Handled by mutation callback before reaching here
|
||||
break;
|
||||
case 'uncommitted_changes':
|
||||
// Handled by mutation callback before reaching here
|
||||
break;
|
||||
}
|
||||
}
|
||||
20
apps/yaak-client/components/git/showAddRemoteDialog.tsx
Normal file
20
apps/yaak-client/components/git/showAddRemoteDialog.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import type { GitRemote } from '@yaakapp-internal/git';
|
||||
import { gitMutations } from '@yaakapp-internal/git';
|
||||
import { showPromptForm } from '../../lib/prompt-form';
|
||||
import { gitCallbacks } from './callbacks';
|
||||
|
||||
export async function addGitRemote(dir: string, defaultName?: string): Promise<GitRemote> {
|
||||
const r = await showPromptForm({
|
||||
id: 'add-remote',
|
||||
title: 'Add Remote',
|
||||
inputs: [
|
||||
{ type: 'text', label: 'Name', name: 'name', defaultValue: defaultName },
|
||||
{ type: 'text', label: 'URL', name: 'url' },
|
||||
],
|
||||
});
|
||||
if (r == null) throw new Error('Cancelled remote prompt');
|
||||
|
||||
const name = String(r.name ?? '');
|
||||
const url = String(r.url ?? '');
|
||||
return gitMutations(dir, gitCallbacks(dir)).addRemote.mutateAsync({ name, url });
|
||||
}
|
||||
13
apps/yaak-client/components/git/uncommitted.tsx
Normal file
13
apps/yaak-client/components/git/uncommitted.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import type { UncommittedChangesStrategy } from '@yaakapp-internal/git';
|
||||
import { showConfirm } from '../../lib/confirm';
|
||||
|
||||
export async function promptUncommittedChangesStrategy(): Promise<UncommittedChangesStrategy> {
|
||||
const confirmed = await showConfirm({
|
||||
id: 'git-uncommitted-changes',
|
||||
title: 'Uncommitted Changes',
|
||||
description: 'You have uncommitted changes. Commit or reset your changes before pulling.',
|
||||
confirmText: 'Reset and Pull',
|
||||
color: 'danger',
|
||||
});
|
||||
return confirmed ? 'reset' : 'cancel';
|
||||
}
|
||||
Reference in New Issue
Block a user