Skip to content

Commit 78ac2bc

Browse files
bilalabbadbilalabbad
committed
count data and schema tab
1 parent 00769ff commit 78ac2bc

File tree

6 files changed

+121
-137
lines changed

6 files changed

+121
-137
lines changed

‎frontend/app/src/entities/diff/domain/get-diff-summary.query.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ import type { QueryConfig } from "@/shared/api/types";
44

55
import { type GetDiffSummaryParams, getDiffSummary } from "@/entities/diff/domain/get-diff-summary";
66

7-
export function getDiffSummaryQueryOptions({ branchName }: GetDiffSummaryParams) {
7+
export function getDiffSummaryQueryOptions({ branch, filters }: GetDiffSummaryParams) {
88
return queryOptions({
9-
queryKey: ["diff-summary", branchName],
10-
queryFn: () => getDiffSummary({ branchName }),
9+
queryKey: ["diff-summary", branch, filters],
10+
queryFn: () => getDiffSummary({ branch, filters }),
1111
});
1212
}
1313

‎frontend/app/src/entities/diff/domain/get-diff-summary.ts‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1-
import { getDiffTreeSummaryFromApi } from "@/entities/diff/api/get-diff-tree-summary-from-api";
1+
import {
2+
type GetDiffTreeSummaryFromApiParams,
3+
getDiffTreeSummaryFromApi,
4+
} from "@/entities/diff/api/get-diff-tree-summary-from-api";
25

3-
export type GetDiffSummaryParams = { branchName: string };
6+
export type GetDiffSummaryParams = GetDiffTreeSummaryFromApiParams;
47

58
export type GetDiffSummaryResponse = {
69
num_added: number;
@@ -13,10 +16,8 @@ export type GetDiffSummary = (
1316
params: GetDiffSummaryParams
1417
) => Promise<GetDiffSummaryResponse | null>;
1518

16-
export const getDiffSummary: GetDiffSummary = async ({ branchName }) => {
17-
const { data, errors } = await getDiffTreeSummaryFromApi({
18-
branch: branchName,
19-
});
19+
export const getDiffSummary: GetDiffSummary = async (params) => {
20+
const { data, errors } = await getDiffTreeSummaryFromApi(params);
2021

2122
if (errors) {
2223
throw new Error(errors.map((e) => e.message).join("; "));

‎frontend/app/src/entities/diff/node-diff/index.tsx‎

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ import { DateDisplay } from "@/shared/components/display/date-display";
99
import ErrorScreen from "@/shared/components/errors/error-screen";
1010
import { LoadingIndicator } from "@/shared/components/loading/loading-indicator";
1111

12+
import type { GetDiffSummaryParams } from "@/entities/diff/domain/get-diff-summary";
1213
import { useDiffTreeInfiniteQuery } from "@/entities/diff/domain/get-diff-tree";
14+
import { DiffNode } from "@/entities/diff/node-diff/node";
1315
import { DIFF_STATUS, type DiffNode as DiffNodeType } from "@/entities/diff/node-diff/types";
1416
import { buildFilters } from "@/entities/diff/node-diff/utils";
1517
import { DiffComputing } from "@/entities/diff/ui/diff-computing";
@@ -19,29 +21,24 @@ import { DiffRebaseButton } from "@/entities/diff/ui/diff-rebase-button";
1921
import { DiffRefreshButton } from "@/entities/diff/ui/diff-refresh-button";
2022
import DiffTree from "@/entities/diff/ui/diff-tree";
2123
import { proposedChangedState } from "@/entities/proposed-changes/stores/proposedChanges.atom";
22-
23-
import { type DiffFilter, ProposedChangeDiffFilter } from "../../proposed-changes/ui/diff-filter";
24-
import { DiffNode } from "./node";
24+
import { DiffFilter } from "@/entities/proposed-changes/ui/diff-filter";
2525

2626
export const DiffContext = createContext({});
2727

28-
type NodeDiffProps = {
29-
filters: DiffFilter;
30-
branchName: string;
31-
};
28+
type NodeDiffProps = GetDiffSummaryParams;
3229

33-
export const NodeDiff = ({ branchName, filters }: NodeDiffProps) => {
30+
export const NodeDiff = ({ branch, filters }: NodeDiffProps) => {
3431
const [qspStatus] = useQueryState(QSP.STATUS);
3532
const proposedChangesDetails = useAtomValue(proposedChangedState);
3633

37-
const branch = proposedChangesDetails?.source_branch?.value || branchName; // Used in proposed changes view and branch view
34+
const branchName: string = proposedChangesDetails?.source_branch?.value || branch; // Used in proposed changes view and branch view
3835

3936
// Get filters merged with status filter
4037
const finalFilters = buildFilters(filters, qspStatus);
4138

4239
const { data, isPending, error, hasNextPage, fetchNextPage, isFetchingNextPage } =
4340
useDiffTreeInfiniteQuery({
44-
branchName: branch,
41+
branchName,
4542
filters: finalFilters,
4643
});
4744

@@ -66,14 +63,14 @@ export const NodeDiff = ({ branchName, filters }: NodeDiffProps) => {
6663
if (!firstPageNodes) {
6764
return (
6865
<DiffComputing
69-
sourceBranch={branch}
66+
sourceBranch={branchName}
7067
destinationBranch={proposedChangesDetails.destination_branch?.value ?? DEFAULT_BRANCH_NAME}
7168
/>
7269
);
7370
}
7471

7572
if (!qspStatus && firstPageNodes.nodes?.length === 0) {
76-
return <DiffEmpty branchName={branch} lastRefreshedAt={firstPageNodes.to_time} />;
73+
return <DiffEmpty branchName={branchName} lastRefreshedAt={firstPageNodes.to_time} />;
7774
}
7875

7976
const nodes =
@@ -89,12 +86,12 @@ export const NodeDiff = ({ branchName, filters }: NodeDiffProps) => {
8986
return (
9087
<div className="flex h-[calc(100vh-14rem)] flex-col overflow-hidden">
9188
<header className="flex items-center gap-2 border-gray-200 border-b px-4 py-2">
92-
<ProposedChangeDiffFilter branch={branch} filters={filters} />
89+
<DiffFilter branch={branchName} filters={filters} />
9390
<span className="ml-auto inline-flex gap-1 text-xs">
9491
Updated <DateDisplay date={firstPageNodes?.to_time} />
9592
</span>
96-
<DiffRefreshButton size="sm" variant="primary" branchName={branch} />
97-
<DiffRebaseButton branchName={branch} />
93+
<DiffRefreshButton size="sm" variant="primary" branchName={branchName} />
94+
<DiffRebaseButton branchName={branchName} />
9895
</header>
9996

10097
<div className="grid grow grid-cols-4 overflow-hidden">

‎frontend/app/src/entities/proposed-changes/ui/diff-filter.tsx‎

Lines changed: 50 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,36 @@
1-
import { useQuery } from "@apollo/client";
21
import { parseAsString, useQueryState } from "nuqs";
3-
import { toast } from "react-toastify";
42

53
import { QSP } from "@/config/qsp";
64

7-
import { Button, type ButtonProps } from "@/shared/components/buttons/button-primitive";
85
import ErrorScreen from "@/shared/components/errors/error-screen";
9-
import { ALERT_TYPES, Alert } from "@/shared/components/ui/alert";
10-
import { classNames } from "@/shared/utils/common";
116

12-
import { DIFF_STATUS } from "@/entities/diff/node-diff/types";
13-
import { DiffBadge } from "@/entities/diff/node-diff/utils";
7+
import type { GetDiffSummaryParams } from "@/entities/diff/domain/get-diff-summary";
8+
import { useGetDiffSummary } from "@/entities/diff/domain/get-diff-summary.query";
9+
import { DIFF_STATUS, type DiffStatus } from "@/entities/diff/node-diff/types";
10+
import { DiffSummarySkeleton } from "@/entities/proposed-changes/ui/diff-summary/diff-summary-skeleton";
1411
import {
15-
CloseBadgeAdded,
16-
CloseBadgeConflict,
17-
CloseBadgeRemoved,
18-
CloseBadgeUpdated,
19-
} from "@/entities/diff/ui/diff-badge";
20-
import { getProposedChangesDiffSummary } from "@/entities/proposed-changes/api/getProposedChangesDiffSummary";
12+
DiffSummaryTag,
13+
DiffSummaryTagGroup,
14+
} from "@/entities/proposed-changes/ui/diff-summary/diff-summary-tag-group";
2115

22-
export type DiffFilter = {
23-
namespace?: {
24-
excludes?: string[];
25-
includes?: string[];
26-
};
27-
status?: {
28-
excludes?: string[];
29-
includes?: string[];
30-
};
31-
};
32-
33-
type ProposedChangeDiffFilterProps = {
34-
branch: string;
35-
filters?: DiffFilter;
36-
};
37-
38-
export const ProposedChangeDiffFilter = ({ branch, filters }: ProposedChangeDiffFilterProps) => {
39-
const [qsp, setQsp] = useQueryState(QSP.STATUS, parseAsString.withOptions({ shallow: false }));
16+
type DiffFilterProps = GetDiffSummaryParams;
4017

41-
const { error, data = {} } = useQuery(getProposedChangesDiffSummary, {
42-
skip: !branch,
43-
variables: { branch, filters },
44-
context: {
45-
processErrorMessage: (message: string) => {
46-
// If the branch is not found, then do not display alert
47-
if (message.includes("not found")) return;
18+
export function DiffFilter({ branch, filters }: DiffFilterProps) {
19+
const [statusFilterQSP, setQsp] = useQueryState(
20+
QSP.STATUS,
21+
parseAsString.withOptions({ shallow: false })
22+
);
4823

49-
toast(<Alert type={ALERT_TYPES.ERROR} message={message} />, {
50-
toastId: "alert-error",
51-
});
52-
},
53-
},
54-
});
24+
const { error, data, isPending } = useGetDiffSummary({ branch, filters });
5525

56-
const handleFilter = (value: string) => {
57-
setQsp(value === qsp ? null : value);
26+
const handleFilter = (value: DiffStatus) => {
27+
setQsp(value === statusFilterQSP ? null : value);
5828
};
5929

30+
if (isPending) {
31+
return <DiffSummarySkeleton />;
32+
}
33+
6034
if (error) {
6135
return (
6236
<ErrorScreen
@@ -67,69 +41,40 @@ export const ProposedChangeDiffFilter = ({ branch, filters }: ProposedChangeDiff
6741
);
6842
}
6943

44+
if (!data) {
45+
return null;
46+
}
47+
7048
return (
71-
<div className="flex shrink-0 items-center gap-2">
72-
<FilterButton
73-
status={DIFF_STATUS.ADDED}
74-
count={data?.DiffTreeSummary?.num_added}
75-
currentFilter={qsp}
76-
onFilter={handleFilter}
49+
<DiffSummaryTagGroup selectionMode="single">
50+
<DiffSummaryTag
51+
variant="added"
52+
count={data.num_added}
53+
isMuted={!!statusFilterQSP && statusFilterQSP !== DIFF_STATUS.ADDED}
54+
isClosable={statusFilterQSP === DIFF_STATUS.ADDED}
55+
onPress={() => handleFilter(DIFF_STATUS.ADDED)}
7756
/>
78-
<FilterButton
79-
status={DIFF_STATUS.REMOVED}
80-
count={data?.DiffTreeSummary?.num_removed}
81-
currentFilter={qsp}
82-
onFilter={handleFilter}
57+
<DiffSummaryTag
58+
variant="removed"
59+
count={data.num_removed}
60+
isMuted={!!statusFilterQSP && statusFilterQSP !== DIFF_STATUS.REMOVED}
61+
isClosable={statusFilterQSP === DIFF_STATUS.REMOVED}
62+
onPress={() => handleFilter(DIFF_STATUS.REMOVED)}
8363
/>
84-
<FilterButton
85-
status={DIFF_STATUS.UPDATED}
86-
count={data?.DiffTreeSummary?.num_updated}
87-
currentFilter={qsp}
88-
onFilter={handleFilter}
64+
<DiffSummaryTag
65+
variant="updated"
66+
count={data.num_updated}
67+
isMuted={!!statusFilterQSP && statusFilterQSP !== DIFF_STATUS.UPDATED}
68+
isClosable={statusFilterQSP === DIFF_STATUS.UPDATED}
69+
onPress={() => handleFilter(DIFF_STATUS.UPDATED)}
8970
/>
90-
<FilterButton
91-
status={DIFF_STATUS.CONFLICT}
92-
count={data?.DiffTreeSummary?.num_conflicts}
93-
currentFilter={qsp}
94-
onFilter={handleFilter}
71+
<DiffSummaryTag
72+
variant="conflicts"
73+
count={data.num_conflicts}
74+
isMuted={!!statusFilterQSP && statusFilterQSP !== DIFF_STATUS.CONFLICT}
75+
isClosable={statusFilterQSP === DIFF_STATUS.CONFLICT}
76+
onPress={() => handleFilter(DIFF_STATUS.CONFLICT)}
9577
/>
96-
</div>
78+
</DiffSummaryTagGroup>
9779
);
98-
};
99-
100-
interface FilterButtonProps extends ButtonProps {
101-
status: string;
102-
count: number;
103-
currentFilter: string | null | undefined;
104-
onFilter: (value: string) => void;
10580
}
106-
107-
const FilterButton = ({ status, count, currentFilter, onFilter, ...props }: FilterButtonProps) => {
108-
const isMuted = !!currentFilter && currentFilter !== status;
109-
const isDisabled = !count && currentFilter !== status;
110-
111-
const CloseBadge =
112-
status === DIFF_STATUS.ADDED
113-
? CloseBadgeAdded
114-
: status === DIFF_STATUS.REMOVED
115-
? CloseBadgeRemoved
116-
: status === DIFF_STATUS.UPDATED
117-
? CloseBadgeUpdated
118-
: status === DIFF_STATUS.CONFLICT
119-
? CloseBadgeConflict
120-
: null;
121-
122-
return (
123-
<Button
124-
{...props}
125-
variant="ghost"
126-
className={classNames("relative h-auto rounded-full p-0", isMuted && "opacity-60")}
127-
onClick={() => onFilter(status)}
128-
disabled={isDisabled}
129-
data-testid={`diff-filters-button-${status.toLowerCase()}`}
130-
>
131-
<DiffBadge status={status}>{count}</DiffBadge>
132-
{currentFilter === status && CloseBadge && <CloseBadge />}
133-
</Button>
134-
);
135-
};

0 commit comments

Comments
 (0)