Skip to content

Commit 0656166

Browse files
tbantle22tbantle22
authored
Merge pull request #427 from dolthub/taylor/reset-commit
web: Add reset and revert commit buttons to commit log page
2 parents b45b660 + ee35529 commit 0656166

File tree

8 files changed

+220
-20
lines changed

8 files changed

+220
-20
lines changed

‎web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitLogItem.tsx‎

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
1+
import { getCommit } from "@components/CommitGraph/utils";
12
import CommitLink from "@components/links/CommitLink";
23
import { Button, ErrorMsg, Tooltip } from "@dolthub/react-components";
34
import { getLongDateTimeString } from "@dolthub/web-utils";
45
import { CommitForHistoryFragment } from "@gen/graphql-types";
6+
import { useCommitOverview } from "@hooks/useCommitListForCommitGraph/useCommitOverview";
57
import { RefParams } from "@lib/params";
68
import cx from "classnames";
79
import { DiffSection } from "commit-graph";
8-
import { getCommit } from "@components/CommitGraph/utils";
9-
import { useCommitOverview } from "@hooks/useCommitListForCommitGraph/useCommitOverview";
1010
import css from "./index.module.css";
11+
import ResetRevertCommit from "./ResetRevertCommit";
1112

1213
type UserProps = {
1314
commit: CommitForHistoryFragment;
@@ -55,19 +56,25 @@ export default function CommitLogItem(props: Props) {
5556
{commit.message}
5657
</CommitLink>
5758
</div>
58-
{state.showOverviewButton && !!commit.parents.length && (
59-
<Button.Link
60-
type="button"
61-
className={css.showOverviewButton}
62-
onClick={async () => {
63-
setState({ showOverview: true });
64-
const result = await getDiff(commit.parents[0], commit.commitId);
65-
setState({ diffOverview: result });
66-
}}
67-
>
68-
See commit overview
69-
</Button.Link>
70-
)}
59+
<div>
60+
{state.showOverviewButton && !!commit.parents.length && (
61+
<Button.Link
62+
type="button"
63+
className={css.showOverviewButton}
64+
onClick={async () => {
65+
setState({ showOverview: true });
66+
const result = await getDiff(
67+
commit.parents[0],
68+
commit.commitId,
69+
);
70+
setState({ diffOverview: result });
71+
}}
72+
>
73+
See commit overview
74+
</Button.Link>
75+
)}
76+
<ResetRevertCommit {...props} />
77+
</div>
7178
</div>
7279
<div className={css.itemBottom}>
7380
<span>

‎web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/ResetRevertCommit/ResetModal.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import DocsLink from "@components/links/DocsLink";
2+
import Link from "@components/links/Link";
3+
import { Button, Modal } from "@dolthub/react-components";
4+
import { CommitForHistoryFragment } from "@gen/graphql-types";
5+
import useSqlBuilder from "@hooks/useSqlBuilder";
6+
import { ModalProps } from "@lib/modalProps";
7+
import { RefParams } from "@lib/params";
8+
import { sqlQuery } from "@lib/urls";
9+
10+
type Props = ModalProps & {
11+
commit: CommitForHistoryFragment;
12+
params: RefParams;
13+
};
14+
15+
export default function ResetModal(props: Props) {
16+
const { getCallProcedure } = useSqlBuilder();
17+
return (
18+
<Modal
19+
{...props}
20+
onRequestClose={() => props.setIsOpen(false)}
21+
title="Reset Commit"
22+
button={
23+
<Link
24+
{...sqlQuery({
25+
...props.params,
26+
q: getCallProcedure("DOLT_RESET", [
27+
"--hard",
28+
props.commit.commitId,
29+
]),
30+
})}
31+
>
32+
<Button>Reset commit</Button>
33+
</Link>
34+
}
35+
>
36+
<p>
37+
Resets the database to this commit. Learn more about reset{" "}
38+
<DocsLink path="/sql-reference/version-control/dolt-sql-procedures#dolt_reset">
39+
here
40+
</DocsLink>
41+
.
42+
</p>
43+
<p>Are you sure you would like to proceed?</p>
44+
</Modal>
45+
);
46+
}

‎web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/ResetRevertCommit/RevertModal.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import DocsLink from "@components/links/DocsLink";
2+
import Link from "@components/links/Link";
3+
import { Button, Modal } from "@dolthub/react-components";
4+
import { CommitForHistoryFragment } from "@gen/graphql-types";
5+
import useSqlBuilder from "@hooks/useSqlBuilder";
6+
import { ModalProps } from "@lib/modalProps";
7+
import { RefParams } from "@lib/params";
8+
import { sqlQuery } from "@lib/urls";
9+
10+
type Props = ModalProps & {
11+
commit: CommitForHistoryFragment;
12+
params: RefParams;
13+
};
14+
15+
export default function RevertModal(props: Props) {
16+
const { getCallProcedure } = useSqlBuilder();
17+
return (
18+
<Modal
19+
{...props}
20+
onRequestClose={() => props.setIsOpen(false)}
21+
title="Revert Commit"
22+
button={
23+
<Link
24+
{...sqlQuery({
25+
...props.params,
26+
q: getCallProcedure("DOLT_REVERT", [props.commit.commitId]),
27+
})}
28+
>
29+
<Button>Revert commit</Button>
30+
</Link>
31+
}
32+
>
33+
<p>
34+
Reverts the changes introduced in this commit by creating a new commit
35+
from the current HEAD that reverses the changes in this commit. Learn
36+
more about revert{" "}
37+
<DocsLink path="/sql-reference/version-control/dolt-sql-procedures#dolt_revert">
38+
here
39+
</DocsLink>
40+
.
41+
</p>
42+
<p>Are you sure you would like to proceed?</p>
43+
</Modal>
44+
);
45+
}

‎web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/ResetRevertCommit/index.module.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.button {
2+
@apply ml-4;
3+
}
4+
5+
.option {
6+
@apply my-1 mx-0.5 flex items-center;
7+
8+
svg {
9+
@apply mr-1.5 text-lg;
10+
}
11+
}

‎web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/ResetRevertCommit/index.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { Button, ButtonWithPopup } from "@dolthub/react-components";
2+
import { fakeEscapePress } from "@dolthub/web-utils";
3+
import { CommitForHistoryFragment } from "@gen/graphql-types";
4+
import { RefParams } from "@lib/params";
5+
import { BiReset } from "@react-icons/all-files/bi/BiReset";
6+
import { BiUndo } from "@react-icons/all-files/bi/BiUndo";
7+
import { useState } from "react";
8+
import css from "./index.module.css";
9+
import ResetModal from "./ResetModal";
10+
import RevertModal from "./RevertModal";
11+
12+
type Props = {
13+
commit: CommitForHistoryFragment;
14+
params: RefParams;
15+
};
16+
17+
export default function ResetRevertCommit(props: Props) {
18+
const [revertOpen, setRevertOpen] = useState(false);
19+
const [resetOpen, setResetOpen] = useState(false);
20+
return (
21+
<>
22+
<ButtonWithPopup
23+
buttonClassName={css.button}
24+
contentStyle={{ width: "14.5rem" }}
25+
>
26+
{!!props.commit.parents.length && (
27+
<Button.Link
28+
onClick={() => {
29+
setRevertOpen(true);
30+
fakeEscapePress();
31+
}}
32+
className={css.option}
33+
>
34+
<BiUndo />
35+
Revert this commit
36+
</Button.Link>
37+
)}
38+
<Button.Link
39+
onClick={() => {
40+
setResetOpen(true);
41+
fakeEscapePress();
42+
}}
43+
className={css.option}
44+
>
45+
<BiReset />
46+
Reset database to this commit
47+
</Button.Link>
48+
</ButtonWithPopup>
49+
<RevertModal {...props} isOpen={revertOpen} setIsOpen={setRevertOpen} />
50+
<ResetModal {...props} isOpen={resetOpen} setIsOpen={setResetOpen} />
51+
</>
52+
);
53+
}

‎web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/Uncommitted.tsx‎

Lines changed: 27 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { getCommit } from "@components/CommitGraph/utils";
22
import Link from "@components/links/Link";
3-
import { Button, ErrorMsg, Loader } from "@dolthub/react-components";
3+
import ResetModal from "@components/StatusWithOptions/ResetModal";
4+
import { Button, ErrorMsg, Loader, Tooltip } from "@dolthub/react-components";
45
import {
56
CommitForHistoryFragment,
67
StatusFragment,
@@ -9,8 +10,10 @@ import {
910
import { useCommitOverview } from "@hooks/useCommitListForCommitGraph/useCommitOverview";
1011
import { RefParams, RequiredCommitsParams } from "@lib/params";
1112
import { diff } from "@lib/urls";
13+
import { FaCaretDown } from "@react-icons/all-files/fa/FaCaretDown";
1214
import cx from "classnames";
1315
import { DiffSection } from "commit-graph";
16+
import { useState } from "react";
1417
import css from "./index.module.css";
1518

1619
type Props = {
@@ -22,13 +25,15 @@ type InnerProps = Props & {
2225
};
2326

2427
type ItemProps = {
28+
status: StatusFragment[];
2529
params: RequiredCommitsParams & { refName: string };
2630
};
2731

2832
function Item(props: ItemProps) {
2933
const { state, setState, err, getDiff, loading, diffRef } = useCommitOverview(
3034
props.params,
3135
);
36+
const [resetIsOpen, setResetIsOpen] = useState(false);
3237
const commit: CommitForHistoryFragment = {
3338
...props.params,
3439
_id: props.params.toCommitId,
@@ -64,10 +69,12 @@ function Item(props: ItemProps) {
6469
<div className={css.messageAndButton}>
6570
<Link {...diff(props.params)}>{props.params.toCommitId}</Link>
6671
<ErrorMsg err={err} />
67-
{state.showOverviewButton && (
72+
<div className={css.uncommittedRight}>
6873
<Button.Link
6974
type="button"
70-
className={css.showOverviewButton}
75+
className={cx(css.showOverviewButton, {
76+
[css.hideOverviewButton]: !state.showOverviewButton,
77+
})}
7178
onClick={async () => {
7279
setState({ showOverview: true });
7380
const result = await getDiff(
@@ -79,7 +86,21 @@ function Item(props: ItemProps) {
7986
>
8087
See commit overview
8188
</Button.Link>
82-
)}
89+
<Button.Link
90+
onClick={() => setResetIsOpen(true)}
91+
data-tooltip-id="reset-changes"
92+
data-tooltip-content="Reset uncommitted changes"
93+
className={css.resetButton}
94+
>
95+
<FaCaretDown />
96+
<Tooltip id="reset-changes" />
97+
</Button.Link>
98+
</div>
99+
<ResetModal
100+
{...props}
101+
isOpen={resetIsOpen}
102+
setIsOpen={setResetIsOpen}
103+
/>
83104
</div>
84105
{state.showOverview && (
85106
<div ref={diffRef}>
@@ -106,6 +127,7 @@ function Inner(props: InnerProps) {
106127
</li>
107128
{hasWorkingChanges && (
108129
<Item
130+
status={props.status}
109131
params={{
110132
...props.params,
111133
toCommitId: "WORKING",
@@ -115,6 +137,7 @@ function Inner(props: InnerProps) {
115137
)}
116138
{hasStagedChanges && (
117139
<Item
140+
status={props.status}
118141
params={{
119142
...props.params,
120143
toCommitId: "STAGED",

‎web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/index.module.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,14 +128,29 @@
128128
}
129129
}
130130

131+
.uncommittedRight {
132+
@apply flex items-center;
133+
}
134+
131135
.showOverviewButton {
132136
@apply leading-5;
133137
}
134138

139+
.hideOverviewButton {
140+
@apply invisible;
141+
}
142+
135143
.focused {
136144
@apply bg-sky-50;
137145
}
138146

139147
.hovered {
140148
@apply bg-stone-50;
141149
}
150+
151+
.resetButton {
152+
@apply my-0;
153+
svg {
154+
@apply text-primary ml-4 text-lg;
155+
}
156+
}

‎web/renderer/hooks/useCommitListForCommitGraph/useCommitOverview.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useOnClickOutside, useSetState } from "@dolthub/react-hooks";
2-
import { useRef } from "react";
32
import { RefParams } from "@lib/params";
43
import { Diff } from "commit-graph";
4+
import { useRef } from "react";
55
import useDiffForTableListLazy from "./useDiffForTableListLazy";
66

77
const defaultState = {

0 commit comments

Comments
 (0)