From 876cebc0091e17d4a100b00076ffd4f534ac4707 Mon Sep 17 00:00:00 2001 From: LiuLiu Date: Tue, 7 Jan 2025 14:40:32 -0800 Subject: [PATCH 01/13] commit selectors, show diff --- graphql-server/schema.gql | 1 + graphql-server/src/commits/commit.resolver.ts | 10 +++ graphql-server/src/queryFactory/dolt/index.ts | 6 ++ .../src/queryFactory/doltgres/index.ts | 6 ++ .../src/queryFactory/doltgres/queries.ts | 3 + graphql-server/src/queryFactory/index.ts | 2 + .../src/queryFactory/mysql/index.ts | 4 + .../CommitSelectForm/CommitSelect.tsx | 29 +++++++ .../CommitSelectForm/index.module.css | 25 ++++++ .../CommitLog/CommitSelectForm/index.tsx | 78 +++++++++++++++++++ .../CommitLog/CommitSelectForm/queries.ts | 14 ++++ .../ForCommits/CommitLog/index.tsx | 2 + web/renderer/gen/graphql-types.tsx | 68 ++++++++++++++++ 13 files changed, 248 insertions(+) create mode 100644 web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/CommitSelect.tsx create mode 100644 web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/index.module.css create mode 100644 web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/index.tsx create mode 100644 web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/queries.ts diff --git a/graphql-server/schema.gql b/graphql-server/schema.gql index 476c6c85..ad4726a9 100644 --- a/graphql-server/schema.gql +++ b/graphql-server/schema.gql @@ -322,6 +322,7 @@ type Query { allBranches(offset: Int, databaseName: String!, sortBy: SortBranchesBy): [Branch!]! defaultBranch(databaseName: String!): Branch commits(offset: Int, databaseName: String!, refName: String, afterCommitId: String, twoDot: Boolean, excludingCommitsFromRefName: String): CommitList! + allCommits(offset: Int, databaseName: String!, refName: String, afterCommitId: String, twoDot: Boolean, excludingCommitsFromRefName: String): [Commit!]! currentDatabase: String currentConnection: DatabaseConnection storedConnections: [DatabaseConnection!]! diff --git a/graphql-server/src/commits/commit.resolver.ts b/graphql-server/src/commits/commit.resolver.ts index 12a3e9ef..1405d11a 100644 --- a/graphql-server/src/commits/commit.resolver.ts +++ b/graphql-server/src/commits/commit.resolver.ts @@ -47,6 +47,16 @@ export class CommitResolver { const logs = await conn.getLogs({ ...args, refName }, offset); return getCommitListRes(logs, args); } + + @Query(_returns => [Commit]) + async allCommits(@Args() args: ListCommitsArgs): Promise { + const err = handleArgsErr(args); + if (err) throw err; + const refName = args.refName ?? args.afterCommitId ?? ""; + const conn = this.conn.connection(); + const logs = await conn.getAllLogs({ ...args, refName }); + return logs.map(l => fromDoltLogRow(args.databaseName, l)); + } } function getCommitListRes(logs: RawRow[], args: ListCommitsArgs): CommitList { diff --git a/graphql-server/src/queryFactory/dolt/index.ts b/graphql-server/src/queryFactory/dolt/index.ts index 995d369a..fa96bc40 100644 --- a/graphql-server/src/queryFactory/dolt/index.ts +++ b/graphql-server/src/queryFactory/dolt/index.ts @@ -159,6 +159,12 @@ export class DoltQueryFactory ); } + async getAllLogs(args: t.RefArgs): t.PR { + return handleRefNotFound(async () => + this.query(qh.doltLogsQuery, [args.refName, 1000, 0], args.databaseName), + ); + } + async getTwoDotLogs(args: t.RefsArgs): t.PR { return handleRefNotFound(async () => this.query( diff --git a/graphql-server/src/queryFactory/doltgres/index.ts b/graphql-server/src/queryFactory/doltgres/index.ts index 7c433cb7..7d37da30 100644 --- a/graphql-server/src/queryFactory/doltgres/index.ts +++ b/graphql-server/src/queryFactory/doltgres/index.ts @@ -173,6 +173,12 @@ export class DoltgresQueryFactory ); } + async getAllLogs(args: t.RefArgs): t.PR { + return handleRefNotFound(async () => + this.query(qh.doltAllLogsQuery(args), [], args.databaseName), + ); + } + async getTwoDotLogs(args: t.RefsArgs): t.PR { return handleRefNotFound(async () => this.query(qh.twoDotDoltLogsQuery(args), [], args.databaseName), diff --git a/graphql-server/src/queryFactory/doltgres/queries.ts b/graphql-server/src/queryFactory/doltgres/queries.ts index a0e1f31c..20c388e5 100644 --- a/graphql-server/src/queryFactory/doltgres/queries.ts +++ b/graphql-server/src/queryFactory/doltgres/queries.ts @@ -47,6 +47,9 @@ export const callDeleteBranch = `SELECT DOLT_BRANCH('-D', $1::text)`; export const doltLogsQuery = (args: t.RefArgs, offset: number): string => `SELECT * FROM DOLT_LOG('${args.refName}', '--parents') LIMIT ${ROW_LIMIT + 1} OFFSET ${offset}`; +export const doltAllLogsQuery = (args: t.RefArgs): string => + `SELECT * FROM DOLT_LOG('${args.refName}', '--parents') LIMIT 1000`; + export const twoDotDoltLogsQuery = (args: t.RefsArgs): string => `SELECT * FROM DOLT_LOG('${args.toRefName}..${args.fromRefName}', '--parents')`; diff --git a/graphql-server/src/queryFactory/index.ts b/graphql-server/src/queryFactory/index.ts index cc14ed3d..c18040f8 100644 --- a/graphql-server/src/queryFactory/index.ts +++ b/graphql-server/src/queryFactory/index.ts @@ -97,6 +97,8 @@ export declare class QueryFactory { getLogs(args: t.RefArgs, offset: number): t.PR; + getAllLogs(args: t.RefArgs): t.PR; + getTwoDotLogs(args: t.RefsArgs): t.PR; getDiffStat(args: t.RefsMaybeTableArgs): t.PR; diff --git a/graphql-server/src/queryFactory/mysql/index.ts b/graphql-server/src/queryFactory/mysql/index.ts index 6560a068..6cdbaa5c 100644 --- a/graphql-server/src/queryFactory/mysql/index.ts +++ b/graphql-server/src/queryFactory/mysql/index.ts @@ -232,6 +232,10 @@ export class MySQLQueryFactory throw notDoltError("get logs"); } + async getAllLogs(_args: t.RefArgs): t.PR { + throw notDoltError("get all logs"); + } + async getTwoDotLogs(_args: t.RefsArgs): t.PR { throw notDoltError("get two dot logs"); } diff --git a/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/CommitSelect.tsx b/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/CommitSelect.tsx new file mode 100644 index 00000000..b216dcf7 --- /dev/null +++ b/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/CommitSelect.tsx @@ -0,0 +1,29 @@ +import { FormSelect } from "@dolthub/react-components"; +import { CommitForCommitSelectorFragment } from "@gen/graphql-types"; +import css from "./index.module.css"; + +type Props = { + commits: CommitForCommitSelectorFragment[]; + currentCommitId: string; + onChange: (c: string) => void; + label: string; +}; + +export default function CommitSelect(props: Props) { + return ( + { + return { + value: c.commitId, + label: c.commitId, + }; + })} + val={props.currentCommitId} + onChangeValue={c => props.onChange(c || "")} + hideSelectedOptions + className={css.selector} + label={props.label} + horizontal + /> + ); +} diff --git a/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/index.module.css b/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/index.module.css new file mode 100644 index 00000000..2c2b5e41 --- /dev/null +++ b/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/index.module.css @@ -0,0 +1,25 @@ +.outer { + @apply flex justify-between ml-6 mr-10 my-8; +} + +.selectors { + @apply flex items-center; +} + +.selector { + @apply min-w-[225px]; +} + +.arrow { + @apply text-2xl mx-6; +} + +.viewDiffButton { + button { + @apply w-32 px-3 mt-2 mb-4 lg:my-0; + } + + svg { + @apply inline-block ml-2 mb-1; + } +} diff --git a/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/index.tsx b/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/index.tsx new file mode 100644 index 00000000..a1c93674 --- /dev/null +++ b/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/index.tsx @@ -0,0 +1,78 @@ +import { Button, QueryHandler } from "@dolthub/react-components"; +import { + CommitForCommitSelectorFragment, + useCommitsForSelectorQuery, +} from "@gen/graphql-types"; +import { FaChevronRight } from "@react-icons/all-files/fa/FaChevronRight"; +import { RefParams } from "@lib/params"; +import { diff } from "@lib/urls"; +import { BsArrowLeft } from "@react-icons/all-files/bs/BsArrowLeft"; +import { useState } from "react"; +import Link from "@components/links/Link"; +import CommitSelect from "./CommitSelect"; +import css from "./index.module.css"; + +type Props = { + params: RefParams; +}; + +type InnerProps = Props & { + commits: CommitForCommitSelectorFragment[]; +}; + +function Inner(props: InnerProps) { + const [fromCommit, setFromCommit] = useState(""); + const [toCommit, setToCommit] = useState(""); + + return ( +
+ {props.commits.length && ( +
+
+ +
+ +
+ + +
+
+ )} + {fromCommit && toCommit && ( + + + + )} +
+ ); +} + +export default function CommitSelectForm(props: Props) { + const commitRes = useCommitsForSelectorQuery({ variables: props.params }); + return ( + } + /> + ); +} diff --git a/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/queries.ts b/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/queries.ts new file mode 100644 index 00000000..587fed56 --- /dev/null +++ b/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/queries.ts @@ -0,0 +1,14 @@ +import { gql } from "@apollo/client"; + +export const COMMIT_SELECTOR_QUERY = gql` + fragment CommitForCommitSelector on Commit { + _id + commitId + } + + query CommitsForSelector($databaseName: String!, $refName: String!) { + allCommits(databaseName: $databaseName, refName: $refName) { + ...CommitForCommitSelector + } + } +`; diff --git a/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/index.tsx b/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/index.tsx index c7572c46..a326a75f 100644 --- a/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/index.tsx +++ b/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/index.tsx @@ -11,6 +11,7 @@ import CommitGraphButton from "./CommitGraphButton"; import CommitHeader from "./CommitHeader"; import CommitLogItem from "./CommitLogItem"; import Uncommitted from "./Uncommitted"; +import CommitSelectForm from "./CommitSelectForm"; import css from "./index.module.css"; type Props = { @@ -52,6 +53,7 @@ function Inner({ commits, ...props }: InnerProps) {

Commit Log

+ ; + allCommits: Array; branch?: Maybe; branchOrDefault?: Maybe; branches: BranchList; @@ -462,6 +463,16 @@ export type QueryAllBranchesArgs = { }; +export type QueryAllCommitsArgs = { + afterCommitId?: InputMaybe; + databaseName: Scalars['String']['input']; + excludingCommitsFromRefName?: InputMaybe; + offset?: InputMaybe; + refName?: InputMaybe; + twoDot?: InputMaybe; +}; + + export type QueryBranchArgs = { branchName: Scalars['String']['input']; databaseName: Scalars['String']['input']; @@ -1155,6 +1166,16 @@ export type CreateBranchMutationVariables = Exact<{ export type CreateBranchMutation = { __typename?: 'Mutation', createBranch: string }; +export type CommitForCommitSelectorFragment = { __typename?: 'Commit', _id: string, commitId: string }; + +export type CommitsForSelectorQueryVariables = Exact<{ + databaseName: Scalars['String']['input']; + refName: Scalars['String']['input']; +}>; + + +export type CommitsForSelectorQuery = { __typename?: 'Query', allCommits: Array<{ __typename?: 'Commit', _id: string, commitId: string }> }; + export type CommitForAfterCommitHistoryFragment = { __typename?: 'Commit', _id: string, commitId: string, parents: Array, message: string, committedAt: any, committer: { __typename?: 'DoltWriter', _id: string, displayName: string, username?: string | null } }; export type HistoryForCommitQueryVariables = Exact<{ @@ -1684,6 +1705,12 @@ export const BranchFragmentDoc = gql` lastCommitter } `; +export const CommitForCommitSelectorFragmentDoc = gql` + fragment CommitForCommitSelector on Commit { + _id + commitId +} + `; export const CommitForAfterCommitHistoryFragmentDoc = gql` fragment CommitForAfterCommitHistory on Commit { _id @@ -3238,6 +3265,47 @@ export function useCreateBranchMutation(baseOptions?: Apollo.MutationHookOptions export type CreateBranchMutationHookResult = ReturnType; export type CreateBranchMutationResult = Apollo.MutationResult; export type CreateBranchMutationOptions = Apollo.BaseMutationOptions; +export const CommitsForSelectorDocument = gql` + query CommitsForSelector($databaseName: String!, $refName: String!) { + allCommits(databaseName: $databaseName, refName: $refName) { + ...CommitForCommitSelector + } +} + ${CommitForCommitSelectorFragmentDoc}`; + +/** + * __useCommitsForSelectorQuery__ + * + * To run a query within a React component, call `useCommitsForSelectorQuery` and pass it any options that fit your needs. + * When your component renders, `useCommitsForSelectorQuery` returns an object from Apollo Client that contains loading, error, and data properties + * you can use to render your UI. + * + * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options; + * + * @example + * const { data, loading, error } = useCommitsForSelectorQuery({ + * variables: { + * databaseName: // value for 'databaseName' + * refName: // value for 'refName' + * }, + * }); + */ +export function useCommitsForSelectorQuery(baseOptions: Apollo.QueryHookOptions & ({ variables: CommitsForSelectorQueryVariables; skip?: boolean; } | { skip: boolean; }) ) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useQuery(CommitsForSelectorDocument, options); + } +export function useCommitsForSelectorLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useLazyQuery(CommitsForSelectorDocument, options); + } +export function useCommitsForSelectorSuspenseQuery(baseOptions?: Apollo.SkipToken | Apollo.SuspenseQueryHookOptions) { + const options = baseOptions === Apollo.skipToken ? baseOptions : {...defaultOptions, ...baseOptions} + return Apollo.useSuspenseQuery(CommitsForSelectorDocument, options); + } +export type CommitsForSelectorQueryHookResult = ReturnType; +export type CommitsForSelectorLazyQueryHookResult = ReturnType; +export type CommitsForSelectorSuspenseQueryHookResult = ReturnType; +export type CommitsForSelectorQueryResult = Apollo.QueryResult; export const HistoryForCommitDocument = gql` query HistoryForCommit($databaseName: String!, $afterCommitId: String!) { commits(afterCommitId: $afterCommitId, databaseName: $databaseName) { From 4b7941bc8c0955fbe1129a45c40970219efac782 Mon Sep 17 00:00:00 2001 From: LiuLiu Date: Tue, 7 Jan 2025 16:27:14 -0800 Subject: [PATCH 02/13] view diff of remote and local branches --- .../DiffTableNav/CommitInfo/index.tsx | 4 ++-- .../FetchRemoteModal/RemoteBranchRow.tsx | 21 ++++++++++++++++++- .../FetchRemoteModal/RemoteBranches.tsx | 1 + .../FetchRemoteModal/index.module.css | 6 ++++++ web/renderer/lib/urls.ts | 2 +- 5 files changed, 30 insertions(+), 4 deletions(-) diff --git a/web/renderer/components/DiffTableNav/CommitInfo/index.tsx b/web/renderer/components/DiffTableNav/CommitInfo/index.tsx index c05398ae..dc5b7a49 100644 --- a/web/renderer/components/DiffTableNav/CommitInfo/index.tsx +++ b/web/renderer/components/DiffTableNav/CommitInfo/index.tsx @@ -33,7 +33,7 @@ export default function CommitInfo({ params }: Props) { const fromCommitForInfo = isDiffRange(router.asPath) ? params.fromCommitId : undefined; - + console.log(fromCommitForInfo); if (fromCommitForInfo) { return (
@@ -52,7 +52,7 @@ export default function CommitInfo({ params }: Props) { } export function getDiffRange(fromCommit: string, toCommit: string): string { - return `${shortCommit(fromCommit)}..${shortCommit(toCommit)}`; + return `${fromCommit.includes("/") ? fromCommit : shortCommit(fromCommit)}..${toCommit.includes("/") ? toCommit : shortCommit(toCommit)}`; } function isDiffRange(asPath: string) { diff --git a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/FetchRemoteModal/RemoteBranchRow.tsx b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/FetchRemoteModal/RemoteBranchRow.tsx index 890888f6..942ef53c 100644 --- a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/FetchRemoteModal/RemoteBranchRow.tsx +++ b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/FetchRemoteModal/RemoteBranchRow.tsx @@ -1,13 +1,16 @@ -import { QueryHandler } from "@dolthub/react-components"; +import { Button, QueryHandler } from "@dolthub/react-components"; import { BranchFragment, RemoteFragment, useRemoteBranchDiffCountsQuery, } from "@gen/graphql-types"; import { OptionalRefParams } from "@lib/params"; +import { diff } from "@lib/urls"; +import Link from "@components/links/Link"; import { getBranchName } from "./utils"; import SyncButton from "./SyncButton"; import BehindAheadCount from "./BehindAheadCount"; +import css from "./index.module.css"; type Props = { branch: BranchFragment; @@ -53,6 +56,22 @@ export default function RemoteBranchRow({ currentBranch={currentBranch} /> + + {(!!data.remoteBranchDiffCounts.ahead || + !!data.remoteBranchDiffCounts.behind) && ( + + View Diff + + )} + )} /> diff --git a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/FetchRemoteModal/RemoteBranches.tsx b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/FetchRemoteModal/RemoteBranches.tsx index 4b87afba..4beb8a64 100644 --- a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/FetchRemoteModal/RemoteBranches.tsx +++ b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/FetchRemoteModal/RemoteBranches.tsx @@ -28,6 +28,7 @@ function Inner(props: InnerProps) { Remote {pluralize(props.remoteBranches.length, "branch")} Behind | Ahead Sync + Diff diff --git a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/FetchRemoteModal/index.module.css b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/FetchRemoteModal/index.module.css index 66162228..c03fec92 100644 --- a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/FetchRemoteModal/index.module.css +++ b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage/FetchRemoteModal/index.module.css @@ -79,3 +79,9 @@ .buttons { @apply flex items-center justify-between; } + +.viewDiffButton { + button { + @apply text-left mt-2 mb-4 lg:my-0; + } +} diff --git a/web/renderer/lib/urls.ts b/web/renderer/lib/urls.ts index 97df2c0d..404d6d29 100644 --- a/web/renderer/lib/urls.ts +++ b/web/renderer/lib/urls.ts @@ -90,7 +90,7 @@ export const diff = (p: ps.DiffParams): Route => function getDiffRange(p: ps.DiffParams): string { if (!p.fromCommitId && !p.toCommitId) return ""; if (!p.toCommitId) return p.fromCommitId ?? ""; - return `${p.fromCommitId ?? ""}..${p.toCommitId}`; + return encodeURIComponent(`${p.fromCommitId ?? ""}..${p.toCommitId}`); } export const releases = (p: ps.OptionalRefParams): Route => From 40fe949ba60836d01c3039bdf94db8b1578c6d80 Mon Sep 17 00:00:00 2001 From: LiuLiu Date: Wed, 8 Jan 2025 12:02:14 -0800 Subject: [PATCH 03/13] diff for tags --- .../CommitSelectForm/index.module.css | 4 +- .../CommitLog/CommitSelectForm/index.tsx | 2 +- .../ForReleases/ReleaseList/TagSelector.tsx | 29 +++++++++++ .../ForReleases/ReleaseList/index.module.css | 26 ++++++++++ .../ForReleases/ReleaseList/index.tsx | 50 +++++++++++++++++-- 5 files changed, 105 insertions(+), 6 deletions(-) create mode 100644 web/renderer/components/pageComponents/DatabasePage/ForReleases/ReleaseList/TagSelector.tsx diff --git a/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/index.module.css b/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/index.module.css index 2c2b5e41..612f7b32 100644 --- a/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/index.module.css +++ b/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/index.module.css @@ -1,5 +1,5 @@ .outer { - @apply flex justify-between ml-6 mr-10 my-8; + @apply flex items-center ml-6 mr-10 my-8; } .selectors { @@ -16,7 +16,7 @@ .viewDiffButton { button { - @apply w-32 px-3 mt-2 mb-4 lg:my-0; + @apply w-32 px-3 ml-8 mt-2 mb-4 lg:my-0; } svg { diff --git a/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/index.tsx b/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/index.tsx index a1c93674..5b2ac35c 100644 --- a/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/index.tsx +++ b/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/index.tsx @@ -48,7 +48,7 @@ function Inner(props: InnerProps) {
)} - {fromCommit && toCommit && ( + {fromCommit && toCommit && fromCommit !== toCommit && ( void; + val: string; + label: string; +}; + +export default function TagSelector(props: Props) { + return ( + { + return { + value: t.tagName, + label: t.tagName, + }; + })} + val={props.val} + onChangeValue={t => props.onChange(t || "")} + hideSelectedOptions + className={css.selector} + label={props.label} + horizontal + /> + ); +} diff --git a/web/renderer/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.module.css b/web/renderer/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.module.css index f35976d4..359bd664 100644 --- a/web/renderer/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.module.css +++ b/web/renderer/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.module.css @@ -108,3 +108,29 @@ @apply block ml-2; } } + +.outer { + @apply flex items-center mx-4 my-8; +} + +.selectors { + @apply flex items-center my-6; +} + +.selector { + @apply min-w-[225px]; +} + +.arrow { + @apply text-2xl mx-6; +} + +.viewDiffButton { + button { + @apply w-32 px-3 ml-8 mt-2 mb-4 lg:my-0; + } + + svg { + @apply inline-block ml-2 mb-1; + } +} diff --git a/web/renderer/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.tsx b/web/renderer/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.tsx index 50c95b67..8980d68c 100644 --- a/web/renderer/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.tsx +++ b/web/renderer/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.tsx @@ -2,6 +2,8 @@ import { Database404Inner } from "@components/Database404"; import DeleteModal from "@components/DeleteModal"; import Page404 from "@components/Page404"; import Link from "@components/links/Link"; +import { BsArrowLeft } from "@react-icons/all-files/bs/BsArrowLeft"; +import { FaChevronRight } from "@react-icons/all-files/fa/FaChevronRight"; import HideForNoWritesWrapper from "@components/util/HideForNoWritesWrapper"; import { Button, Loader } from "@dolthub/react-components"; import { TagForListFragment, useDeleteTagMutation } from "@gen/graphql-types"; @@ -9,11 +11,12 @@ import { gqlDepNotFound } from "@lib/errors/graphql"; import { errorMatches } from "@lib/errors/helpers"; import { OptionalRefParams } from "@lib/params"; import { refetchTagQueries } from "@lib/refetchQueries"; -import { newRelease } from "@lib/urls"; +import { diff, newRelease } from "@lib/urls"; import { useState } from "react"; import List from "./List"; -import css from "./index.module.css"; import { useTagList } from "./useTagList"; +import TagSelector from "./TagSelector"; +import css from "./index.module.css"; type Props = { params: OptionalRefParams; @@ -28,6 +31,8 @@ type InnerProps = { function Inner({ tags, ...props }: InnerProps) { const [deleteModalOpen, setDeleteModalOpen] = useState(false); const [tagNameToDelete, setTagNameToDelete] = useState(""); + const [fromTag, setFromTag] = useState(""); + const [toTag, setToTag] = useState(""); const openDeleteModal = (t: TagForListFragment) => { setTagNameToDelete(t.tagName); @@ -53,7 +58,46 @@ function Inner({ tags, ...props }: InnerProps) { {tags?.length ? ( - +
+
+
+
+ +
+ +
+ + +
+
+ {fromTag && toTag && fromTag !== toTag && ( + + + + )} +
+ +
) : (

No releases found From b34b9dc4879cb1e55db0f7b731604cd954de6693 Mon Sep 17 00:00:00 2001 From: LiuLiu Date: Wed, 8 Jan 2025 14:00:19 -0800 Subject: [PATCH 04/13] branches diff, ui --- .../ForBranches/BranchesPage/index.module.css | 26 +++++++++ .../ForBranches/BranchesPage/index.tsx | 54 +++++++++++++++++-- .../CommitSelectForm/index.module.css | 4 +- .../ForReleases/ReleaseList/index.module.css | 2 +- 4 files changed, 80 insertions(+), 6 deletions(-) diff --git a/web/renderer/components/pageComponents/DatabasePage/ForBranches/BranchesPage/index.module.css b/web/renderer/components/pageComponents/DatabasePage/ForBranches/BranchesPage/index.module.css index d6405a58..9bc45ee6 100644 --- a/web/renderer/components/pageComponents/DatabasePage/ForBranches/BranchesPage/index.module.css +++ b/web/renderer/components/pageComponents/DatabasePage/ForBranches/BranchesPage/index.module.css @@ -69,3 +69,29 @@ .iconGray { @apply fill-storm-200; } + +.outer { + @apply flex flex-col items-center; +} + +.selectors { + @apply flex items-center mt-10 mb-4; +} + +.selector { + @apply min-w-[225px]; +} + +.arrow { + @apply text-2xl mx-6; +} + +.viewDiffButton { + button { + @apply w-32 px-3 ml-8 mt-2 mb-4 lg:my-0; + } + + svg { + @apply inline-block ml-2 mb-1; + } +} diff --git a/web/renderer/components/pageComponents/DatabasePage/ForBranches/BranchesPage/index.tsx b/web/renderer/components/pageComponents/DatabasePage/ForBranches/BranchesPage/index.tsx index 5eb5c940..fad5cdf8 100644 --- a/web/renderer/components/pageComponents/DatabasePage/ForBranches/BranchesPage/index.tsx +++ b/web/renderer/components/pageComponents/DatabasePage/ForBranches/BranchesPage/index.tsx @@ -14,15 +14,18 @@ import { SortBranchesBy, useDeleteBranchMutation, } from "@gen/graphql-types"; +import { BsArrowLeft } from "@react-icons/all-files/bs/BsArrowLeft"; +import { FaChevronRight } from "@react-icons/all-files/fa/FaChevronRight"; import { gqlDepNotFound } from "@lib/errors/graphql"; import { errorMatches } from "@lib/errors/helpers"; import { OptionalRefParams } from "@lib/params"; import { refetchBranchQueries } from "@lib/refetchQueries"; -import { newBranch } from "@lib/urls"; +import { diff, newBranch } from "@lib/urls"; import { useState } from "react"; import BranchList from "./BranchList"; -import css from "./index.module.css"; import { useBranchList } from "./useBranchList"; +import BranchSelect from "../../ForPulls/BranchSelectForm/BranchSelect"; +import css from "./index.module.css"; type Props = { params: OptionalRefParams; @@ -39,6 +42,9 @@ type InnerProps = { function Inner(props: InnerProps): JSX.Element { const [isDeleteModalOpen, setDeleteModalOpen] = useState(false); const [branchNameToDelete, setBranchNameToDelete] = useState(""); + const [fromBranch, setFromBranch] = useState(""); + const [toBranch, setToBranch] = useState(""); + const createUrl = newBranch({ ...props.params, refName: @@ -80,7 +86,49 @@ function Inner(props: InnerProps): JSX.Element {

{props.branches.length ? ( - +
+
+
+ { + setToBranch(b || ""); + }} + /> +
+ +
+ + { + setFromBranch(b || ""); + }} + /> + {fromBranch && toBranch && fromBranch !== toBranch && ( + + + + )} +
+
+ + +
) : (

No branches found

)} diff --git a/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/index.module.css b/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/index.module.css index 612f7b32..078852cc 100644 --- a/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/index.module.css +++ b/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/index.module.css @@ -1,5 +1,5 @@ .outer { - @apply flex items-center ml-6 mr-10 my-8; + @apply flex items-center ml-32 my-8; } .selectors { @@ -7,7 +7,7 @@ } .selector { - @apply min-w-[225px]; + @apply w-64; } .arrow { diff --git a/web/renderer/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.module.css b/web/renderer/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.module.css index 359bd664..a8d8d722 100644 --- a/web/renderer/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.module.css +++ b/web/renderer/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.module.css @@ -110,7 +110,7 @@ } .outer { - @apply flex items-center mx-4 my-8; + @apply flex items-center ml-16 my-8; } .selectors { From ec3f03742c75f001716690a79bb92b6117215f26 Mon Sep 17 00:00:00 2001 From: LiuLiu Date: Wed, 8 Jan 2025 14:38:22 -0800 Subject: [PATCH 05/13] use commit id instead of tag name to avoid url decoding error --- .../DatabasePage/ForReleases/ReleaseList/index.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/web/renderer/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.tsx b/web/renderer/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.tsx index 8980d68c..3c3773c0 100644 --- a/web/renderer/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.tsx +++ b/web/renderer/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.tsx @@ -85,8 +85,10 @@ function Inner({ tags, ...props }: InnerProps) { {...diff({ ...props.params, refName: props.params.refName || "", - fromCommitId: fromTag, - toCommitId: toTag, + fromCommitId: + tags.filter(t => t.tagName === fromTag)[0].commitId || "", + toCommitId: + tags.filter(t => t.tagName === toTag)[0].commitId || "", })} className={css.viewDiffButton} > From f09baaf56646a9bc9bf7f718dddbb97d0795e02d Mon Sep 17 00:00:00 2001 From: LiuLiu Date: Thu, 16 Jan 2025 14:18:23 -0800 Subject: [PATCH 06/13] move diff selectors to compare page --- .../DiffSelector/ForBranchCommitAndTag.tsx | 48 ++++++++++++ .../components/DiffSelector/index.tsx | 2 + .../components/DiffTableNav/ForRef.tsx | 4 +- .../BranchCommitAndTagSelector.tsx | 60 ++++++++++++++ .../FormSelectForRefs/getGroupOption.tsx | 4 +- .../ForBranches/BranchesPage/index.module.css | 26 +------ .../ForBranches/BranchesPage/index.tsx | 56 ++----------- .../CommitSelectForm/CommitSelect.tsx | 29 ------- .../CommitSelectForm/index.module.css | 25 ------ .../CommitLog/CommitSelectForm/index.tsx | 78 ------------------- .../CommitLog/CommitSelectForm/queries.ts | 14 ---- .../ForCommits/CommitLog/index.module.css | 8 ++ .../ForCommits/CommitLog/index.tsx | 13 +++- .../ForReleases/ReleaseList/index.module.css | 26 +------ .../ForReleases/ReleaseList/index.tsx | 75 +++++------------- web/renderer/lib/urls.ts | 3 + 16 files changed, 164 insertions(+), 307 deletions(-) create mode 100644 web/renderer/components/DiffSelector/ForBranchCommitAndTag.tsx create mode 100644 web/renderer/components/FormSelectForRefs/BranchCommitAndTagSelector.tsx delete mode 100644 web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/CommitSelect.tsx delete mode 100644 web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/index.module.css delete mode 100644 web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/index.tsx delete mode 100644 web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/queries.ts diff --git a/web/renderer/components/DiffSelector/ForBranchCommitAndTag.tsx b/web/renderer/components/DiffSelector/ForBranchCommitAndTag.tsx new file mode 100644 index 00000000..ddd817bc --- /dev/null +++ b/web/renderer/components/DiffSelector/ForBranchCommitAndTag.tsx @@ -0,0 +1,48 @@ +import { RefParams } from "@lib/params"; +import BranchCommitAndTagSelector from "@components/FormSelectForRefs/BranchCommitAndTagSelector"; +import { useState } from "react"; +import Link from "@components/links/Link"; +import { diff } from "@lib/urls"; +import { Button } from "@dolthub/react-components"; +import DiffSelector from "./component"; +import css from "./index.module.css"; + +type Props = { + params: RefParams; +}; + +export default function ForBranchCommitAndTag({ params }: Props) { + const [fromRef, setFromRef] = useState(""); + const [toRef, setToRef] = useState(""); + + return ( + +
+ setToRef(s || "")} + /> +
+
+ setFromRef(s || "")} + /> +
+ {fromRef && toRef && fromRef !== toRef && ( + + + + )} + + ); +} diff --git a/web/renderer/components/DiffSelector/index.tsx b/web/renderer/components/DiffSelector/index.tsx index e5873c57..7ef66323 100644 --- a/web/renderer/components/DiffSelector/index.tsx +++ b/web/renderer/components/DiffSelector/index.tsx @@ -1,8 +1,10 @@ import DiffSelector from "./component"; import ForBranch from "./ForBranch"; +import ForBranchCommitAndTag from "./ForBranchCommitAndTag"; import ForPull from "./ForPull"; export default Object.assign(DiffSelector, { ForBranch, ForPull, + ForBranchCommitAndTag, }); diff --git a/web/renderer/components/DiffTableNav/ForRef.tsx b/web/renderer/components/DiffTableNav/ForRef.tsx index 71388c37..35270a19 100644 --- a/web/renderer/components/DiffTableNav/ForRef.tsx +++ b/web/renderer/components/DiffTableNav/ForRef.tsx @@ -16,7 +16,9 @@ export default function ForRef(props: Props) { Select commit to view diff

} - diffSelector={} + diffSelector={ + + } diffTables={null} /> ); diff --git a/web/renderer/components/FormSelectForRefs/BranchCommitAndTagSelector.tsx b/web/renderer/components/FormSelectForRefs/BranchCommitAndTagSelector.tsx new file mode 100644 index 00000000..5606101e --- /dev/null +++ b/web/renderer/components/FormSelectForRefs/BranchCommitAndTagSelector.tsx @@ -0,0 +1,60 @@ +import { FormSelect } from "@dolthub/react-components"; +import { Maybe } from "@dolthub/web-utils"; +import { OptionalRefParams } from "@lib/params"; +import useGetBranchOptionsForSelect from "@components/FormSelectForRefs/useGetBranchOptionsForSelect"; +import useGetCommitOptionsForSelect from "@components/FormSelectForRefs/useGetCommitOptionsForSelect"; +import getGroupOption from "./getGroupOption"; +import useGetTagOptionsForSelect from "./useGetTagOptionsForSelect"; +import css from "./index.module.css"; + +type Props = { + params: OptionalRefParams; + selectedValue: Maybe; + onChangeValue: (s: Maybe) => void; +}; + +export default function BranchCommitAndTagSelector(props: Props) { + const { + branchOptions, + error: branchErr, + loading: branchLoading, + } = useGetBranchOptionsForSelect(props.params); + const { + commitOptions, + error: commitErr, + loading: commitLoading, + } = useGetCommitOptionsForSelect(props.params); + const { + tagOptions, + error: tagErr, + loading: tagLoading, + } = useGetTagOptionsForSelect(props.params); + + const handleChangeRef = async (refName: Maybe) => { + if (!refName) return; + props.onChangeValue(refName); + }; + + const options = [ + getGroupOption(branchOptions, "Branches", undefined, branchErr), + getGroupOption(commitOptions, "Commits", undefined, commitErr), + getGroupOption(tagOptions, "Tags", undefined, tagErr), + ]; + + return ( + t.value === props.selectedValue, + )} + label="Pick a branch, commit or tag" + onChange={async e => handleChangeRef(e?.value)} + options={options} + placeholder="select a branch, commit or tag..." + className={css.branchAndCommitSelect} + selectedOptionFirst + mono + light + /> + ); +} diff --git a/web/renderer/components/FormSelectForRefs/getGroupOption.tsx b/web/renderer/components/FormSelectForRefs/getGroupOption.tsx index d0d2825f..0bfc2eae 100644 --- a/web/renderer/components/FormSelectForRefs/getGroupOption.tsx +++ b/web/renderer/components/FormSelectForRefs/getGroupOption.tsx @@ -6,7 +6,7 @@ import { ApolloErrorType } from "@lib/errors/types"; export default function getGroupOption( options: Array>, label: string, - footerRoute: Route, + footerRoute?: Route, error?: ApolloErrorType, ): FormSelectTypes.CustomGroupBase> { const lowerLabel = label.toLowerCase(); @@ -16,6 +16,6 @@ export default function getGroupOption( noOptionsMsg: error ? `Error getting ${lowerLabel}: ${error.message}` : `No ${lowerLabel} found`, - footer: View all {lowerLabel}, + footer: footerRoute && View all {lowerLabel}, }; } diff --git a/web/renderer/components/pageComponents/DatabasePage/ForBranches/BranchesPage/index.module.css b/web/renderer/components/pageComponents/DatabasePage/ForBranches/BranchesPage/index.module.css index 9bc45ee6..8491e490 100644 --- a/web/renderer/components/pageComponents/DatabasePage/ForBranches/BranchesPage/index.module.css +++ b/web/renderer/components/pageComponents/DatabasePage/ForBranches/BranchesPage/index.module.css @@ -70,28 +70,6 @@ @apply fill-storm-200; } -.outer { - @apply flex flex-col items-center; -} - -.selectors { - @apply flex items-center mt-10 mb-4; -} - -.selector { - @apply min-w-[225px]; -} - -.arrow { - @apply text-2xl mx-6; -} - -.viewDiffButton { - button { - @apply w-32 px-3 ml-8 mt-2 mb-4 lg:my-0; - } - - svg { - @apply inline-block ml-2 mb-1; - } +.button { + @apply mr-4; } diff --git a/web/renderer/components/pageComponents/DatabasePage/ForBranches/BranchesPage/index.tsx b/web/renderer/components/pageComponents/DatabasePage/ForBranches/BranchesPage/index.tsx index fad5cdf8..0ea5b4b9 100644 --- a/web/renderer/components/pageComponents/DatabasePage/ForBranches/BranchesPage/index.tsx +++ b/web/renderer/components/pageComponents/DatabasePage/ForBranches/BranchesPage/index.tsx @@ -14,17 +14,14 @@ import { SortBranchesBy, useDeleteBranchMutation, } from "@gen/graphql-types"; -import { BsArrowLeft } from "@react-icons/all-files/bs/BsArrowLeft"; -import { FaChevronRight } from "@react-icons/all-files/fa/FaChevronRight"; import { gqlDepNotFound } from "@lib/errors/graphql"; import { errorMatches } from "@lib/errors/helpers"; import { OptionalRefParams } from "@lib/params"; import { refetchBranchQueries } from "@lib/refetchQueries"; -import { diff, newBranch } from "@lib/urls"; +import { compare, newBranch } from "@lib/urls"; import { useState } from "react"; import BranchList from "./BranchList"; import { useBranchList } from "./useBranchList"; -import BranchSelect from "../../ForPulls/BranchSelectForm/BranchSelect"; import css from "./index.module.css"; type Props = { @@ -42,8 +39,6 @@ type InnerProps = { function Inner(props: InnerProps): JSX.Element { const [isDeleteModalOpen, setDeleteModalOpen] = useState(false); const [branchNameToDelete, setBranchNameToDelete] = useState(""); - const [fromBranch, setFromBranch] = useState(""); - const [toBranch, setToBranch] = useState(""); const createUrl = newBranch({ ...props.params, @@ -77,6 +72,11 @@ function Inner(props: InnerProps): JSX.Element { isClearable horizontal /> + {props.branches.length && ( + + + + )} @@ -86,49 +86,7 @@ function Inner(props: InnerProps): JSX.Element {
{props.branches.length ? ( -
-
-
- { - setToBranch(b || ""); - }} - /> -
- -
- - { - setFromBranch(b || ""); - }} - /> - {fromBranch && toBranch && fromBranch !== toBranch && ( - - - - )} -
-
- - -
+ ) : (

No branches found

)} diff --git a/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/CommitSelect.tsx b/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/CommitSelect.tsx deleted file mode 100644 index b216dcf7..00000000 --- a/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/CommitSelect.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { FormSelect } from "@dolthub/react-components"; -import { CommitForCommitSelectorFragment } from "@gen/graphql-types"; -import css from "./index.module.css"; - -type Props = { - commits: CommitForCommitSelectorFragment[]; - currentCommitId: string; - onChange: (c: string) => void; - label: string; -}; - -export default function CommitSelect(props: Props) { - return ( - { - return { - value: c.commitId, - label: c.commitId, - }; - })} - val={props.currentCommitId} - onChangeValue={c => props.onChange(c || "")} - hideSelectedOptions - className={css.selector} - label={props.label} - horizontal - /> - ); -} diff --git a/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/index.module.css b/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/index.module.css deleted file mode 100644 index 078852cc..00000000 --- a/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/index.module.css +++ /dev/null @@ -1,25 +0,0 @@ -.outer { - @apply flex items-center ml-32 my-8; -} - -.selectors { - @apply flex items-center; -} - -.selector { - @apply w-64; -} - -.arrow { - @apply text-2xl mx-6; -} - -.viewDiffButton { - button { - @apply w-32 px-3 ml-8 mt-2 mb-4 lg:my-0; - } - - svg { - @apply inline-block ml-2 mb-1; - } -} diff --git a/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/index.tsx b/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/index.tsx deleted file mode 100644 index 5b2ac35c..00000000 --- a/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/index.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { Button, QueryHandler } from "@dolthub/react-components"; -import { - CommitForCommitSelectorFragment, - useCommitsForSelectorQuery, -} from "@gen/graphql-types"; -import { FaChevronRight } from "@react-icons/all-files/fa/FaChevronRight"; -import { RefParams } from "@lib/params"; -import { diff } from "@lib/urls"; -import { BsArrowLeft } from "@react-icons/all-files/bs/BsArrowLeft"; -import { useState } from "react"; -import Link from "@components/links/Link"; -import CommitSelect from "./CommitSelect"; -import css from "./index.module.css"; - -type Props = { - params: RefParams; -}; - -type InnerProps = Props & { - commits: CommitForCommitSelectorFragment[]; -}; - -function Inner(props: InnerProps) { - const [fromCommit, setFromCommit] = useState(""); - const [toCommit, setToCommit] = useState(""); - - return ( -
- {props.commits.length && ( -
-
- -
- -
- - -
-
- )} - {fromCommit && toCommit && fromCommit !== toCommit && ( - - - - )} -
- ); -} - -export default function CommitSelectForm(props: Props) { - const commitRes = useCommitsForSelectorQuery({ variables: props.params }); - return ( - } - /> - ); -} diff --git a/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/queries.ts b/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/queries.ts deleted file mode 100644 index 587fed56..00000000 --- a/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitSelectForm/queries.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { gql } from "@apollo/client"; - -export const COMMIT_SELECTOR_QUERY = gql` - fragment CommitForCommitSelector on Commit { - _id - commitId - } - - query CommitsForSelector($databaseName: String!, $refName: String!) { - allCommits(databaseName: $databaseName, refName: $refName) { - ...CommitForCommitSelector - } - } -`; diff --git a/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/index.module.css b/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/index.module.css index 911731f5..2d96a283 100644 --- a/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/index.module.css +++ b/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/index.module.css @@ -6,6 +6,14 @@ @apply flex justify-between; } +.buttons { + @apply flex; +} + +.button { + @apply mr-4; +} + .title { @apply mx-6; } diff --git a/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/index.tsx b/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/index.tsx index a326a75f..f587fd12 100644 --- a/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/index.tsx +++ b/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/index.tsx @@ -1,9 +1,11 @@ import Page404 from "@components/Page404"; -import { Loader } from "@dolthub/react-components"; +import { Button, Loader } from "@dolthub/react-components"; import { useAnchorTag, useReactiveWidth } from "@dolthub/react-hooks"; import { CommitForHistoryFragment } from "@gen/graphql-types"; +import Link from "@components/links/Link"; import { useCommitListForBranch } from "@hooks/useCommitListForBranch"; import { RefParams } from "@lib/params"; +import { compare } from "@lib/urls"; import { useRouter } from "next/router"; import { useEffect, useState } from "react"; import InfiniteScroll from "react-infinite-scroller"; @@ -11,7 +13,6 @@ import CommitGraphButton from "./CommitGraphButton"; import CommitHeader from "./CommitHeader"; import CommitLogItem from "./CommitLogItem"; import Uncommitted from "./Uncommitted"; -import CommitSelectForm from "./CommitSelectForm"; import css from "./index.module.css"; type Props = { @@ -51,9 +52,13 @@ function Inner({ commits, ...props }: InnerProps) {

Commit Log

- +
+ + + + +
- { setTagNameToDelete(t.tagName); @@ -43,61 +38,27 @@ function Inner({ tags, ...props }: InnerProps) {

Releases

- - - +
+ + - + + + + + +
{tags?.length ? (
-
-
-
- -
- -
- - -
-
- {fromTag && toTag && fromTag !== toTag && ( - t.tagName === fromTag)[0].commitId || "", - toCommitId: - tags.filter(t => t.tagName === toTag)[0].commitId || "", - })} - className={css.viewDiffButton} - > - - - )} -
) : ( diff --git a/web/renderer/lib/urls.ts b/web/renderer/lib/urls.ts index 404d6d29..b91a22cd 100644 --- a/web/renderer/lib/urls.ts +++ b/web/renderer/lib/urls.ts @@ -87,6 +87,9 @@ export const commit = (p: ps.CommitParams): Route => export const diff = (p: ps.DiffParams): Route => commit({ ...p, commitId: getDiffRange(p) }); +export const compare = (p: ps.DatabaseParams): Route => + database(p).addStatic("compare"); + function getDiffRange(p: ps.DiffParams): string { if (!p.fromCommitId && !p.toCommitId) return ""; if (!p.toCommitId) return p.fromCommitId ?? ""; From 18483ec9d82128f6a902a37a2df55ad4918cf03e Mon Sep 17 00:00:00 2001 From: LiuLiu Date: Thu, 16 Jan 2025 14:32:04 -0800 Subject: [PATCH 07/13] clean up --- graphql-server/schema.gql | 1 - graphql-server/src/commits/commit.resolver.ts | 10 --- graphql-server/src/queryFactory/dolt/index.ts | 6 -- .../src/queryFactory/doltgres/index.ts | 6 -- .../src/queryFactory/doltgres/queries.ts | 3 - graphql-server/src/queryFactory/index.ts | 2 - .../src/queryFactory/mysql/index.ts | 4 -- .../DiffTableNav/CommitInfo/index.tsx | 2 +- .../ForReleases/ReleaseList/TagSelector.tsx | 29 -------- web/renderer/gen/graphql-types.tsx | 68 ------------------- 10 files changed, 1 insertion(+), 130 deletions(-) delete mode 100644 web/renderer/components/pageComponents/DatabasePage/ForReleases/ReleaseList/TagSelector.tsx diff --git a/graphql-server/schema.gql b/graphql-server/schema.gql index ad4726a9..476c6c85 100644 --- a/graphql-server/schema.gql +++ b/graphql-server/schema.gql @@ -322,7 +322,6 @@ type Query { allBranches(offset: Int, databaseName: String!, sortBy: SortBranchesBy): [Branch!]! defaultBranch(databaseName: String!): Branch commits(offset: Int, databaseName: String!, refName: String, afterCommitId: String, twoDot: Boolean, excludingCommitsFromRefName: String): CommitList! - allCommits(offset: Int, databaseName: String!, refName: String, afterCommitId: String, twoDot: Boolean, excludingCommitsFromRefName: String): [Commit!]! currentDatabase: String currentConnection: DatabaseConnection storedConnections: [DatabaseConnection!]! diff --git a/graphql-server/src/commits/commit.resolver.ts b/graphql-server/src/commits/commit.resolver.ts index 1405d11a..12a3e9ef 100644 --- a/graphql-server/src/commits/commit.resolver.ts +++ b/graphql-server/src/commits/commit.resolver.ts @@ -47,16 +47,6 @@ export class CommitResolver { const logs = await conn.getLogs({ ...args, refName }, offset); return getCommitListRes(logs, args); } - - @Query(_returns => [Commit]) - async allCommits(@Args() args: ListCommitsArgs): Promise { - const err = handleArgsErr(args); - if (err) throw err; - const refName = args.refName ?? args.afterCommitId ?? ""; - const conn = this.conn.connection(); - const logs = await conn.getAllLogs({ ...args, refName }); - return logs.map(l => fromDoltLogRow(args.databaseName, l)); - } } function getCommitListRes(logs: RawRow[], args: ListCommitsArgs): CommitList { diff --git a/graphql-server/src/queryFactory/dolt/index.ts b/graphql-server/src/queryFactory/dolt/index.ts index fa96bc40..995d369a 100644 --- a/graphql-server/src/queryFactory/dolt/index.ts +++ b/graphql-server/src/queryFactory/dolt/index.ts @@ -159,12 +159,6 @@ export class DoltQueryFactory ); } - async getAllLogs(args: t.RefArgs): t.PR { - return handleRefNotFound(async () => - this.query(qh.doltLogsQuery, [args.refName, 1000, 0], args.databaseName), - ); - } - async getTwoDotLogs(args: t.RefsArgs): t.PR { return handleRefNotFound(async () => this.query( diff --git a/graphql-server/src/queryFactory/doltgres/index.ts b/graphql-server/src/queryFactory/doltgres/index.ts index 7d37da30..7c433cb7 100644 --- a/graphql-server/src/queryFactory/doltgres/index.ts +++ b/graphql-server/src/queryFactory/doltgres/index.ts @@ -173,12 +173,6 @@ export class DoltgresQueryFactory ); } - async getAllLogs(args: t.RefArgs): t.PR { - return handleRefNotFound(async () => - this.query(qh.doltAllLogsQuery(args), [], args.databaseName), - ); - } - async getTwoDotLogs(args: t.RefsArgs): t.PR { return handleRefNotFound(async () => this.query(qh.twoDotDoltLogsQuery(args), [], args.databaseName), diff --git a/graphql-server/src/queryFactory/doltgres/queries.ts b/graphql-server/src/queryFactory/doltgres/queries.ts index 20c388e5..a0e1f31c 100644 --- a/graphql-server/src/queryFactory/doltgres/queries.ts +++ b/graphql-server/src/queryFactory/doltgres/queries.ts @@ -47,9 +47,6 @@ export const callDeleteBranch = `SELECT DOLT_BRANCH('-D', $1::text)`; export const doltLogsQuery = (args: t.RefArgs, offset: number): string => `SELECT * FROM DOLT_LOG('${args.refName}', '--parents') LIMIT ${ROW_LIMIT + 1} OFFSET ${offset}`; -export const doltAllLogsQuery = (args: t.RefArgs): string => - `SELECT * FROM DOLT_LOG('${args.refName}', '--parents') LIMIT 1000`; - export const twoDotDoltLogsQuery = (args: t.RefsArgs): string => `SELECT * FROM DOLT_LOG('${args.toRefName}..${args.fromRefName}', '--parents')`; diff --git a/graphql-server/src/queryFactory/index.ts b/graphql-server/src/queryFactory/index.ts index c18040f8..cc14ed3d 100644 --- a/graphql-server/src/queryFactory/index.ts +++ b/graphql-server/src/queryFactory/index.ts @@ -97,8 +97,6 @@ export declare class QueryFactory { getLogs(args: t.RefArgs, offset: number): t.PR; - getAllLogs(args: t.RefArgs): t.PR; - getTwoDotLogs(args: t.RefsArgs): t.PR; getDiffStat(args: t.RefsMaybeTableArgs): t.PR; diff --git a/graphql-server/src/queryFactory/mysql/index.ts b/graphql-server/src/queryFactory/mysql/index.ts index 6cdbaa5c..6560a068 100644 --- a/graphql-server/src/queryFactory/mysql/index.ts +++ b/graphql-server/src/queryFactory/mysql/index.ts @@ -232,10 +232,6 @@ export class MySQLQueryFactory throw notDoltError("get logs"); } - async getAllLogs(_args: t.RefArgs): t.PR { - throw notDoltError("get all logs"); - } - async getTwoDotLogs(_args: t.RefsArgs): t.PR { throw notDoltError("get two dot logs"); } diff --git a/web/renderer/components/DiffTableNav/CommitInfo/index.tsx b/web/renderer/components/DiffTableNav/CommitInfo/index.tsx index dc5b7a49..95d25da8 100644 --- a/web/renderer/components/DiffTableNav/CommitInfo/index.tsx +++ b/web/renderer/components/DiffTableNav/CommitInfo/index.tsx @@ -33,7 +33,7 @@ export default function CommitInfo({ params }: Props) { const fromCommitForInfo = isDiffRange(router.asPath) ? params.fromCommitId : undefined; - console.log(fromCommitForInfo); + if (fromCommitForInfo) { return (
diff --git a/web/renderer/components/pageComponents/DatabasePage/ForReleases/ReleaseList/TagSelector.tsx b/web/renderer/components/pageComponents/DatabasePage/ForReleases/ReleaseList/TagSelector.tsx deleted file mode 100644 index fe52698d..00000000 --- a/web/renderer/components/pageComponents/DatabasePage/ForReleases/ReleaseList/TagSelector.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { FormSelect } from "@dolthub/react-components"; -import { TagForListFragment } from "@gen/graphql-types"; -import css from "./index.module.css"; - -type Props = { - tags: TagForListFragment[]; - onChange: (t: string) => void; - val: string; - label: string; -}; - -export default function TagSelector(props: Props) { - return ( - { - return { - value: t.tagName, - label: t.tagName, - }; - })} - val={props.val} - onChangeValue={t => props.onChange(t || "")} - hideSelectedOptions - className={css.selector} - label={props.label} - horizontal - /> - ); -} diff --git a/web/renderer/gen/graphql-types.tsx b/web/renderer/gen/graphql-types.tsx index 27094284..e1c6c917 100644 --- a/web/renderer/gen/graphql-types.tsx +++ b/web/renderer/gen/graphql-types.tsx @@ -417,7 +417,6 @@ export type PushRes = { export type Query = { __typename?: 'Query'; allBranches: Array; - allCommits: Array; branch?: Maybe; branchOrDefault?: Maybe; branches: BranchList; @@ -463,16 +462,6 @@ export type QueryAllBranchesArgs = { }; -export type QueryAllCommitsArgs = { - afterCommitId?: InputMaybe; - databaseName: Scalars['String']['input']; - excludingCommitsFromRefName?: InputMaybe; - offset?: InputMaybe; - refName?: InputMaybe; - twoDot?: InputMaybe; -}; - - export type QueryBranchArgs = { branchName: Scalars['String']['input']; databaseName: Scalars['String']['input']; @@ -1166,16 +1155,6 @@ export type CreateBranchMutationVariables = Exact<{ export type CreateBranchMutation = { __typename?: 'Mutation', createBranch: string }; -export type CommitForCommitSelectorFragment = { __typename?: 'Commit', _id: string, commitId: string }; - -export type CommitsForSelectorQueryVariables = Exact<{ - databaseName: Scalars['String']['input']; - refName: Scalars['String']['input']; -}>; - - -export type CommitsForSelectorQuery = { __typename?: 'Query', allCommits: Array<{ __typename?: 'Commit', _id: string, commitId: string }> }; - export type CommitForAfterCommitHistoryFragment = { __typename?: 'Commit', _id: string, commitId: string, parents: Array, message: string, committedAt: any, committer: { __typename?: 'DoltWriter', _id: string, displayName: string, username?: string | null } }; export type HistoryForCommitQueryVariables = Exact<{ @@ -1705,12 +1684,6 @@ export const BranchFragmentDoc = gql` lastCommitter } `; -export const CommitForCommitSelectorFragmentDoc = gql` - fragment CommitForCommitSelector on Commit { - _id - commitId -} - `; export const CommitForAfterCommitHistoryFragmentDoc = gql` fragment CommitForAfterCommitHistory on Commit { _id @@ -3265,47 +3238,6 @@ export function useCreateBranchMutation(baseOptions?: Apollo.MutationHookOptions export type CreateBranchMutationHookResult = ReturnType; export type CreateBranchMutationResult = Apollo.MutationResult; export type CreateBranchMutationOptions = Apollo.BaseMutationOptions; -export const CommitsForSelectorDocument = gql` - query CommitsForSelector($databaseName: String!, $refName: String!) { - allCommits(databaseName: $databaseName, refName: $refName) { - ...CommitForCommitSelector - } -} - ${CommitForCommitSelectorFragmentDoc}`; - -/** - * __useCommitsForSelectorQuery__ - * - * To run a query within a React component, call `useCommitsForSelectorQuery` and pass it any options that fit your needs. - * When your component renders, `useCommitsForSelectorQuery` returns an object from Apollo Client that contains loading, error, and data properties - * you can use to render your UI. - * - * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options; - * - * @example - * const { data, loading, error } = useCommitsForSelectorQuery({ - * variables: { - * databaseName: // value for 'databaseName' - * refName: // value for 'refName' - * }, - * }); - */ -export function useCommitsForSelectorQuery(baseOptions: Apollo.QueryHookOptions & ({ variables: CommitsForSelectorQueryVariables; skip?: boolean; } | { skip: boolean; }) ) { - const options = {...defaultOptions, ...baseOptions} - return Apollo.useQuery(CommitsForSelectorDocument, options); - } -export function useCommitsForSelectorLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { - const options = {...defaultOptions, ...baseOptions} - return Apollo.useLazyQuery(CommitsForSelectorDocument, options); - } -export function useCommitsForSelectorSuspenseQuery(baseOptions?: Apollo.SkipToken | Apollo.SuspenseQueryHookOptions) { - const options = baseOptions === Apollo.skipToken ? baseOptions : {...defaultOptions, ...baseOptions} - return Apollo.useSuspenseQuery(CommitsForSelectorDocument, options); - } -export type CommitsForSelectorQueryHookResult = ReturnType; -export type CommitsForSelectorLazyQueryHookResult = ReturnType; -export type CommitsForSelectorSuspenseQueryHookResult = ReturnType; -export type CommitsForSelectorQueryResult = Apollo.QueryResult; export const HistoryForCommitDocument = gql` query HistoryForCommit($databaseName: String!, $afterCommitId: String!) { commits(afterCommitId: $afterCommitId, databaseName: $databaseName) { From 65337884ac9556a424a57e5a35c0e917faeb6219 Mon Sep 17 00:00:00 2001 From: LiuLiu Date: Thu, 16 Jan 2025 15:34:39 -0800 Subject: [PATCH 08/13] move selectors to white section --- .../DiffSelector/ForBranchCommitAndTag.tsx | 40 ++++++++++++------- .../components/DiffSelector/index.module.css | 16 ++++++++ .../components/DiffTableNav/ForRef.tsx | 4 -- .../BranchCommitAndTagSelector.tsx | 4 +- .../ForCommits/DiffPage/ForBranch.tsx | 3 +- 5 files changed, 45 insertions(+), 22 deletions(-) diff --git a/web/renderer/components/DiffSelector/ForBranchCommitAndTag.tsx b/web/renderer/components/DiffSelector/ForBranchCommitAndTag.tsx index ddd817bc..267d7c90 100644 --- a/web/renderer/components/DiffSelector/ForBranchCommitAndTag.tsx +++ b/web/renderer/components/DiffSelector/ForBranchCommitAndTag.tsx @@ -1,6 +1,7 @@ import { RefParams } from "@lib/params"; import BranchCommitAndTagSelector from "@components/FormSelectForRefs/BranchCommitAndTagSelector"; import { useState } from "react"; +import { BsArrowLeft } from "@react-icons/all-files/bs/BsArrowLeft"; import Link from "@components/links/Link"; import { diff } from "@lib/urls"; import { Button } from "@dolthub/react-components"; @@ -17,21 +18,28 @@ export default function ForBranchCommitAndTag({ params }: Props) { return ( -
- setToRef(s || "")} - /> +
+
+ setToRef(s || "")} + label="Pick to revision" + /> +
+
+ +
+
+ setFromRef(s || "")} + label="Pick from revision" + /> +
-
- setFromRef(s || "")} - /> -
- {fromRef && toRef && fromRef !== toRef && ( + {fromRef && toRef && ( - + )} diff --git a/web/renderer/components/DiffSelector/index.module.css b/web/renderer/components/DiffSelector/index.module.css index e3b88bfb..6d2c9041 100644 --- a/web/renderer/components/DiffSelector/index.module.css +++ b/web/renderer/components/DiffSelector/index.module.css @@ -9,3 +9,19 @@ .branch { @apply mb-6; } + +.branchCommitTag { + @apply mb-6 w-96; +} + +.selectors { + @apply flex mt-8 mx-4 items-start; +} + +.arrow { + @apply text-2xl mx-6 my-auto; +} + +.button { + @apply ml-4; +} diff --git a/web/renderer/components/DiffTableNav/ForRef.tsx b/web/renderer/components/DiffTableNav/ForRef.tsx index 35270a19..f519c096 100644 --- a/web/renderer/components/DiffTableNav/ForRef.tsx +++ b/web/renderer/components/DiffTableNav/ForRef.tsx @@ -1,4 +1,3 @@ -import DiffSelector from "@components/DiffSelector"; import { RefParams } from "@lib/params"; import DiffTableNav from "./component"; import css from "./index.module.css"; @@ -16,9 +15,6 @@ export default function ForRef(props: Props) { Select commit to view diff

} - diffSelector={ - - } diffTables={null} /> ); diff --git a/web/renderer/components/FormSelectForRefs/BranchCommitAndTagSelector.tsx b/web/renderer/components/FormSelectForRefs/BranchCommitAndTagSelector.tsx index 5606101e..371f8c86 100644 --- a/web/renderer/components/FormSelectForRefs/BranchCommitAndTagSelector.tsx +++ b/web/renderer/components/FormSelectForRefs/BranchCommitAndTagSelector.tsx @@ -11,6 +11,7 @@ type Props = { params: OptionalRefParams; selectedValue: Maybe; onChangeValue: (s: Maybe) => void; + label: string; }; export default function BranchCommitAndTagSelector(props: Props) { @@ -47,13 +48,12 @@ export default function BranchCommitAndTagSelector(props: Props) { value={[...branchOptions, ...commitOptions].find( t => t.value === props.selectedValue, )} - label="Pick a branch, commit or tag" + label={props.label} onChange={async e => handleChangeRef(e?.value)} options={options} placeholder="select a branch, commit or tag..." className={css.branchAndCommitSelect} selectedOptionFirst - mono light /> ); diff --git a/web/renderer/components/pageComponents/DatabasePage/ForCommits/DiffPage/ForBranch.tsx b/web/renderer/components/pageComponents/DatabasePage/ForCommits/DiffPage/ForBranch.tsx index 22c92116..0768d5d7 100644 --- a/web/renderer/components/pageComponents/DatabasePage/ForCommits/DiffPage/ForBranch.tsx +++ b/web/renderer/components/pageComponents/DatabasePage/ForCommits/DiffPage/ForBranch.tsx @@ -1,4 +1,5 @@ import DiffTableNav from "@components/DiffTableNav"; +import DiffSelector from "@components/DiffSelector"; import CommitDiffBreadcrumbs from "@components/breadcrumbs/CommitDiffBreadcrumbs"; import { RefParams } from "@lib/params"; import { commitLog } from "@lib/urls"; @@ -18,7 +19,7 @@ export default function ForBranch(props: Props) { routeRefChangeTo={commitLog} smallHeaderBreadcrumbs={} > -
+ ); } From 7202722b7ebd3de57f66d3868f3c6aa56bd9fb72 Mon Sep 17 00:00:00 2001 From: LiuLiu Date: Tue, 21 Jan 2025 15:34:02 -0800 Subject: [PATCH 09/13] ui fixes --- .../DatabaseHeaderAndNav/index.module.css | 2 +- .../components/DiffSelector/index.module.css | 2 +- .../DiffTableNav/CommitInfo/index.module.css | 6 +++++- .../DiffTableNav/CommitInfo/index.tsx | 19 +++++++++++++------ .../ForBranches/BranchesPage/index.tsx | 2 +- .../ForCommits/CommitLog/index.tsx | 2 +- .../ForReleases/ReleaseList/index.tsx | 2 +- web/renderer/lib/diffRange.tsx | 2 +- 8 files changed, 24 insertions(+), 13 deletions(-) diff --git a/web/renderer/components/DatabaseHeaderAndNav/index.module.css b/web/renderer/components/DatabaseHeaderAndNav/index.module.css index 5e158d2d..f74fdb7f 100644 --- a/web/renderer/components/DatabaseHeaderAndNav/index.module.css +++ b/web/renderer/components/DatabaseHeaderAndNav/index.module.css @@ -22,7 +22,7 @@ @apply hidden h-24 pt-4; @screen lg { - @apply h-16 flex items-center; + @apply h-16 flex items-center justify-between; } } diff --git a/web/renderer/components/DiffSelector/index.module.css b/web/renderer/components/DiffSelector/index.module.css index 6d2c9041..e12c081a 100644 --- a/web/renderer/components/DiffSelector/index.module.css +++ b/web/renderer/components/DiffSelector/index.module.css @@ -19,7 +19,7 @@ } .arrow { - @apply text-2xl mx-6 my-auto; + @apply text-2xl mx-6; } .button { diff --git a/web/renderer/components/DiffTableNav/CommitInfo/index.module.css b/web/renderer/components/DiffTableNav/CommitInfo/index.module.css index a0720cee..7d152eab 100644 --- a/web/renderer/components/DiffTableNav/CommitInfo/index.module.css +++ b/web/renderer/components/DiffTableNav/CommitInfo/index.module.css @@ -6,7 +6,11 @@ @apply mx-3 mb-3; } -.hash { +.fixedWidth { + @apply inline-block w-12; +} + +.bold { @apply font-mono font-semibold text-sm; } diff --git a/web/renderer/components/DiffTableNav/CommitInfo/index.tsx b/web/renderer/components/DiffTableNav/CommitInfo/index.tsx index 95d25da8..53806d24 100644 --- a/web/renderer/components/DiffTableNav/CommitInfo/index.tsx +++ b/web/renderer/components/DiffTableNav/CommitInfo/index.tsx @@ -2,7 +2,7 @@ import { QueryHandler } from "@dolthub/react-components"; import { useHistoryForCommitQuery } from "@gen/graphql-types"; import { RefParams } from "@lib/params"; import { useRouter } from "next/router"; -import Inner, { shortCommit } from "./Inner"; +import Inner from "./Inner"; import css from "./index.module.css"; type Props = { @@ -39,10 +39,17 @@ export default function CommitInfo({ params }: Props) {
- Viewing changes from{" "} - - {getDiffRange(fromCommitForInfo, params.toCommitId)} - + Viewing changes +
+
+ from + {fromCommitForInfo} +
+
+ to{" "} + {params.toCommitId} +
+
@@ -52,7 +59,7 @@ export default function CommitInfo({ params }: Props) { } export function getDiffRange(fromCommit: string, toCommit: string): string { - return `${fromCommit.includes("/") ? fromCommit : shortCommit(fromCommit)}..${toCommit.includes("/") ? toCommit : shortCommit(toCommit)}`; + return `${fromCommit}..${toCommit}`; } function isDiffRange(asPath: string) { diff --git a/web/renderer/components/pageComponents/DatabasePage/ForBranches/BranchesPage/index.tsx b/web/renderer/components/pageComponents/DatabasePage/ForBranches/BranchesPage/index.tsx index 0ea5b4b9..0d818b22 100644 --- a/web/renderer/components/pageComponents/DatabasePage/ForBranches/BranchesPage/index.tsx +++ b/web/renderer/components/pageComponents/DatabasePage/ForBranches/BranchesPage/index.tsx @@ -74,7 +74,7 @@ function Inner(props: InnerProps): JSX.Element { /> {props.branches.length && ( - + )} diff --git a/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/index.tsx b/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/index.tsx index f587fd12..ac890b06 100644 --- a/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/index.tsx +++ b/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/index.tsx @@ -54,7 +54,7 @@ function Inner({ commits, ...props }: InnerProps) {

Commit Log

- +
diff --git a/web/renderer/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.tsx b/web/renderer/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.tsx index dd42149d..6e10071a 100644 --- a/web/renderer/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.tsx +++ b/web/renderer/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.tsx @@ -40,7 +40,7 @@ function Inner({ tags, ...props }: InnerProps) {

Releases

- + Date: Tue, 21 Jan 2025 15:47:19 -0800 Subject: [PATCH 10/13] test --- .../components/DiffTableNav/CommitInfo/index.test.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/web/renderer/components/DiffTableNav/CommitInfo/index.test.tsx b/web/renderer/components/DiffTableNav/CommitInfo/index.test.tsx index a20c6602..df3c25e5 100644 --- a/web/renderer/components/DiffTableNav/CommitInfo/index.test.tsx +++ b/web/renderer/components/DiffTableNav/CommitInfo/index.test.tsx @@ -2,7 +2,7 @@ import { MockedProvider } from "@apollo/client/testing"; import useMockRouter from "@hooks/useMockRouter"; import { render, screen } from "@testing-library/react"; import { commit as commitLink, diff } from "@lib/urls"; -import CommitInfo, { getDiffRange } from "."; +import CommitInfo from "."; import * as mocks from "./mocks"; const jestRouter = jest.spyOn(require("next/router"), "useRouter"); @@ -73,9 +73,8 @@ describe("test CommitInfo", () => { , ); - expect( - screen.getByText(getDiffRange(fromCommitId, toCommitId)), - ).toBeVisible(); + expect(screen.getByText(fromCommitId)).toBeVisible(); + expect(screen.getByText(toCommitId)).toBeVisible(); expect(screen.queryByText("1 parent")).not.toBeInTheDocument(); }); }); From 41bf601db471b7d8b976982ee2dfd9bd3cb2c8ba Mon Sep 17 00:00:00 2001 From: LiuLiu Date: Tue, 21 Jan 2025 16:19:53 -0800 Subject: [PATCH 11/13] center --- web/renderer/components/DatabaseTableNav/index.module.css | 3 --- 1 file changed, 3 deletions(-) diff --git a/web/renderer/components/DatabaseTableNav/index.module.css b/web/renderer/components/DatabaseTableNav/index.module.css index fba45e98..0aa66e29 100644 --- a/web/renderer/components/DatabaseTableNav/index.module.css +++ b/web/renderer/components/DatabaseTableNav/index.module.css @@ -28,9 +28,6 @@ .topLine { @apply flex justify-between items-center w-full pb-2 px-4; - @screen lg { - @apply pl-4 pr-3; - } } .menuIcon { From 6c76133f5c74549287a57e82154f109a249a20bb Mon Sep 17 00:00:00 2001 From: LiuLiu Date: Wed, 22 Jan 2025 10:56:35 -0800 Subject: [PATCH 12/13] center align --- .../DiffSelector/ForBranchCommitAndTag.tsx | 40 ++++++++++--------- .../components/DiffSelector/index.module.css | 16 +++++++- .../BranchCommitAndTagSelector.tsx | 2 - 3 files changed, 36 insertions(+), 22 deletions(-) diff --git a/web/renderer/components/DiffSelector/ForBranchCommitAndTag.tsx b/web/renderer/components/DiffSelector/ForBranchCommitAndTag.tsx index 267d7c90..ac6b813c 100644 --- a/web/renderer/components/DiffSelector/ForBranchCommitAndTag.tsx +++ b/web/renderer/components/DiffSelector/ForBranchCommitAndTag.tsx @@ -18,25 +18,29 @@ export default function ForBranchCommitAndTag({ params }: Props) { return ( -
-
- setToRef(s || "")} - label="Pick to revision" - /> +
+
+
Pick to revision
+
Pick from revision
-
- -
-
- setFromRef(s || "")} - label="Pick from revision" - /> +
+
+ setToRef(s || "")} + /> +
+
+ +
+
+ setFromRef(s || "")} + /> +
{fromRef && toRef && ( diff --git a/web/renderer/components/DiffSelector/index.module.css b/web/renderer/components/DiffSelector/index.module.css index e12c081a..cfad25c4 100644 --- a/web/renderer/components/DiffSelector/index.module.css +++ b/web/renderer/components/DiffSelector/index.module.css @@ -6,16 +6,28 @@ } } +.container { + @apply w-[54rem]; +} + .branch { @apply mb-6; } .branchCommitTag { - @apply mb-6 w-96; + @apply w-96; } .selectors { - @apply flex mt-8 mx-4 items-start; + @apply flex mt-4 mb-6 mx-4 items-center; +} + +.top { + @apply flex mx-4 mt-8 justify-between; +} + +.title { + @apply font-semibold w-96; } .arrow { diff --git a/web/renderer/components/FormSelectForRefs/BranchCommitAndTagSelector.tsx b/web/renderer/components/FormSelectForRefs/BranchCommitAndTagSelector.tsx index 371f8c86..ec794f22 100644 --- a/web/renderer/components/FormSelectForRefs/BranchCommitAndTagSelector.tsx +++ b/web/renderer/components/FormSelectForRefs/BranchCommitAndTagSelector.tsx @@ -11,7 +11,6 @@ type Props = { params: OptionalRefParams; selectedValue: Maybe; onChangeValue: (s: Maybe) => void; - label: string; }; export default function BranchCommitAndTagSelector(props: Props) { @@ -48,7 +47,6 @@ export default function BranchCommitAndTagSelector(props: Props) { value={[...branchOptions, ...commitOptions].find( t => t.value === props.selectedValue, )} - label={props.label} onChange={async e => handleChangeRef(e?.value)} options={options} placeholder="select a branch, commit or tag..." From f19c1bcbd451ca4afc11b0d5a626f27a391839e9 Mon Sep 17 00:00:00 2001 From: LiuLiu Date: Wed, 22 Jan 2025 12:34:40 -0800 Subject: [PATCH 13/13] nav, upload page --- web/renderer/components/DatabaseHeaderAndNav/index.module.css | 2 +- web/renderer/components/DatabaseNav/Item.tsx | 2 +- web/renderer/components/DiffTableNav/ForRef.tsx | 2 +- .../FormSelectForRefs/BranchCommitAndTagSelector.tsx | 2 +- .../DatabasePage/ForCommits/CommitLog/index.tsx | 4 ++-- .../pageComponents/FileUploadPage/Layout/index.module.css | 2 +- 6 files changed, 7 insertions(+), 7 deletions(-) diff --git a/web/renderer/components/DatabaseHeaderAndNav/index.module.css b/web/renderer/components/DatabaseHeaderAndNav/index.module.css index f74fdb7f..675874d2 100644 --- a/web/renderer/components/DatabaseHeaderAndNav/index.module.css +++ b/web/renderer/components/DatabaseHeaderAndNav/index.module.css @@ -19,7 +19,7 @@ } .smallHeader { - @apply hidden h-24 pt-4; + @apply hidden h-24; @screen lg { @apply h-16 flex items-center justify-between; diff --git a/web/renderer/components/DatabaseNav/Item.tsx b/web/renderer/components/DatabaseNav/Item.tsx index 3148a325..3507ec4c 100644 --- a/web/renderer/components/DatabaseNav/Item.tsx +++ b/web/renderer/components/DatabaseNav/Item.tsx @@ -20,7 +20,7 @@ export default function NavItem(props: Props) {
  • diff --git a/web/renderer/components/DiffTableNav/ForRef.tsx b/web/renderer/components/DiffTableNav/ForRef.tsx index f519c096..7fa5c5f4 100644 --- a/web/renderer/components/DiffTableNav/ForRef.tsx +++ b/web/renderer/components/DiffTableNav/ForRef.tsx @@ -12,7 +12,7 @@ export default function ForRef(props: Props) { {...props} diffStat={

    - Select commit to view diff + Select revision to view diff

    } diffTables={null} diff --git a/web/renderer/components/FormSelectForRefs/BranchCommitAndTagSelector.tsx b/web/renderer/components/FormSelectForRefs/BranchCommitAndTagSelector.tsx index ec794f22..0d989bd1 100644 --- a/web/renderer/components/FormSelectForRefs/BranchCommitAndTagSelector.tsx +++ b/web/renderer/components/FormSelectForRefs/BranchCommitAndTagSelector.tsx @@ -44,7 +44,7 @@ export default function BranchCommitAndTagSelector(props: Props) { return ( t.value === props.selectedValue, )} onChange={async e => handleChangeRef(e?.value)} diff --git a/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/index.tsx b/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/index.tsx index ac890b06..5d717f2d 100644 --- a/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/index.tsx +++ b/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/index.tsx @@ -52,12 +52,12 @@ function Inner({ commits, ...props }: InnerProps) {

    Commit Log

    -
    + -
    +