Skip to content

Commit 9fbefbe

Browse files
bilalabbadbilalabbad
authored
Display all branch attributes in branch details view (#7506)
1 parent 94cc2b2 commit 9fbefbe

File tree

12 files changed

+152
-100
lines changed

12 files changed

+152
-100
lines changed

‎changelog/+IFC-1905.added.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,8 @@ Branches list page refreshed:
33
- Improved layout for clearer grouping and labels
44
- Better accessibility and full keyboard navigation
55
- New: branch status is now displayed
6+
7+
Branch details page:
8+
9+
- Now shows all branch attributes for a complete view.
10+
- Added fields: description, status, schema changes, and sync with Git.

‎frontend/app/src/entities/branches/api/get-branch-details-from-api.ts‎

Lines changed: 2 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,17 @@
1-
import { gql } from "@apollo/client";
2-
31
import type {
42
Get_Branch_DetailsQuery,
53
Get_Branch_DetailsQueryVariables,
64
} from "@/shared/api/graphql/generated/graphql";
75
import graphqlClient from "@/shared/api/graphql/graphqlClientApollo";
86
import type { BranchContextParams } from "@/shared/api/types";
97

10-
export const getBranchDetailsQuery = gql`
11-
query GET_BRANCH_DETAILS($branchName: String!) {
12-
Branch(name: $branchName) {
13-
id
14-
name
15-
description
16-
origin_branch
17-
branched_from
18-
created_at
19-
sync_with_git
20-
is_default
21-
}
22-
}
23-
`;
8+
import { GET_BRANCHES } from "@/entities/branches/api/query/get-branches-query";
249

2510
export interface GetBranchDetailsFromApiParams extends BranchContextParams {}
2611

2712
export function getBranchDetailsFromApi({ branchName }: GetBranchDetailsFromApiParams) {
2813
return graphqlClient.query<Get_Branch_DetailsQuery, Get_Branch_DetailsQueryVariables>({
29-
query: getBranchDetailsQuery,
14+
query: GET_BRANCHES,
3015
variables: { branchName },
3116
});
3217
}

‎frontend/app/src/entities/branches/api/get-branches-from-api.ts‎

Lines changed: 1 addition & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,6 @@
1-
import { gql } from "@apollo/client";
2-
31
import graphqlClient from "@/shared/api/graphql/graphqlClientApollo";
42

5-
const GET_BRANCHES = gql`
6-
query GetBranches {
7-
Branch {
8-
id
9-
name
10-
description
11-
origin_branch
12-
branched_from
13-
status
14-
created_at
15-
sync_with_git
16-
is_default
17-
has_schema_changes
18-
}
19-
}
20-
`;
3+
import { GET_BRANCHES } from "@/entities/branches/api/query/get-branches-query";
214

225
export const getBranchesFromApi = async () => {
236
return graphqlClient.query({

‎frontend/app/src/entities/branches/api/query/get-branches-query.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { gql } from "@apollo/client";
2+
3+
export const GET_BRANCHES = gql`
4+
query GetBranches($branchName: String) {
5+
Branch(name: $branchName) {
6+
id
7+
name
8+
description
9+
origin_branch
10+
branched_from
11+
status
12+
created_at
13+
sync_with_git
14+
is_default
15+
has_schema_changes
16+
}
17+
}
18+
`;

‎frontend/app/src/entities/branches/ui/branch-details.tsx‎

Lines changed: 7 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,10 @@ import graphqlClient from "@/shared/api/graphql/graphqlClientApollo";
1010
import { constructPath, getCurrentQsp } from "@/shared/api/rest/fetch";
1111
import { Button, LinkButton } from "@/shared/components/buttons/button-primitive";
1212
import Accordion from "@/shared/components/display/accordion";
13-
import { Badge } from "@/shared/components/display/badge";
14-
import { DateDisplay } from "@/shared/components/display/date-display";
1513
import ErrorScreen from "@/shared/components/errors/error-screen";
1614
import NoDataFound from "@/shared/components/errors/no-data-found";
1715
import { LoadingIndicator } from "@/shared/components/loading/loading-indicator";
1816
import ModalDelete from "@/shared/components/modals/modal-delete";
19-
import { List } from "@/shared/components/table/list";
2017
import { ALERT_TYPES, Alert } from "@/shared/components/ui/alert";
2118
import { datetimeAtom } from "@/shared/stores/time.atom";
2219
import { classNames } from "@/shared/utils/common";
@@ -25,16 +22,16 @@ import { useAuth } from "@/entities/authentication/ui/useAuth";
2522
import { BRANCH_DELETE } from "@/entities/branches/api/deleteBranch";
2623
import { useGetBranchDetails } from "@/entities/branches/domain/get-branch-details.query";
2724
import { branchesState } from "@/entities/branches/stores";
28-
25+
import { BranchAttributes } from "@/entities/branches/ui/branch-details/branch-attributes";
26+
import { BranchMergeButton } from "@/entities/branches/ui/branch-merge-button";
27+
import { BranchRebaseButton } from "@/entities/branches/ui/branch-rebase-button";
28+
import { BranchValidateButton } from "@/entities/branches/ui/branch-validate-button";
2929
import {
3030
BRANCH_MERGE_WORKFLOW,
3131
BRANCH_REBASE_WORKFLOW,
3232
BRANCH_VALIDATE_WORKFLOW,
33-
} from "../../tasks/constants";
34-
import { TaskDisplay } from "../../tasks/ui/task-display";
35-
import { BranchMergeButton } from "./branch-merge-button";
36-
import { BranchRebaseButton } from "./branch-rebase-button";
37-
import { BranchValidateButton } from "./branch-validate-button";
33+
} from "@/entities/tasks/constants";
34+
import { TaskDisplay } from "@/entities/tasks/ui/task-display";
3835

3936
interface BranchDetailsProps {
4037
branchName: string;
@@ -91,37 +88,9 @@ export const BranchDetails = ({ branchName }: BranchDetailsProps) => {
9188
}
9289
};
9390

94-
const columns = [
95-
{
96-
name: "name",
97-
label: "Name",
98-
},
99-
{
100-
name: "origin_branch",
101-
label: "Origin branch",
102-
},
103-
{
104-
name: "created_at",
105-
label: "Created at",
106-
},
107-
{
108-
name: "branched_from",
109-
label: "Last rebase on main",
110-
},
111-
];
112-
113-
const row = {
114-
values: {
115-
name: branch.name,
116-
origin_branch: <Badge className="text-sm">{branch.origin_branch}</Badge>,
117-
branched_from: <DateDisplay date={branch.branched_from} />,
118-
created_at: <DateDisplay date={branch.created_at} />,
119-
},
120-
};
121-
12291
return (
12392
<div className="flex flex-col gap-4">
124-
<List columns={columns} row={row} />
93+
<BranchAttributes branch={branch} />
12594

12695
<div className="flex flex-col gap-4">
12796
<div>

‎frontend/app/src/entities/branches/ui/branch-details/branch-attributes.tsx‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import {
2+
BoxIcon,
3+
CalendarIcon,
4+
CheckIcon,
5+
CircleIcon,
6+
GitCommitIcon,
7+
IdCardIcon,
8+
RefreshCwIcon,
9+
XIcon,
10+
} from "lucide-react";
11+
12+
import type { Branch } from "@/shared/api/graphql/generated/graphql";
13+
import { DateDisplay } from "@/shared/components/display/date-display";
14+
import { Card } from "@/shared/components/ui/card";
15+
import { classNames } from "@/shared/utils/common";
16+
17+
interface BranchAttributesProps {
18+
branch: Branch;
19+
}
20+
21+
export function BranchAttributes({ branch }: BranchAttributesProps) {
22+
return (
23+
<Card className="grid w-fit grid-cols-[auto_1fr] gap-x-6 gap-y-1.5">
24+
<BranchAttributeLabel>
25+
<IdCardIcon className="size-3.5" /> Name
26+
</BranchAttributeLabel>
27+
<BranchAttributeValue>{branch.name}</BranchAttributeValue>
28+
29+
{branch.status !== "OPEN" && (
30+
<>
31+
<BranchAttributeLabel>
32+
<CircleIcon className="size-3.5" /> Status
33+
</BranchAttributeLabel>
34+
<BranchAttributeValue>{branch.status}</BranchAttributeValue>
35+
</>
36+
)}
37+
38+
<BranchAttributeLabel>
39+
<RefreshCwIcon className="size-3.5" /> Sync with Git
40+
</BranchAttributeLabel>
41+
<BranchAttributeValue>
42+
{branch.sync_with_git ? <CheckIcon className="size-4" /> : <XIcon className="size-4" />}
43+
</BranchAttributeValue>
44+
45+
{!branch.is_default && (
46+
<>
47+
<BranchAttributeLabel>
48+
<BoxIcon className="size-3.5" /> Has schema changes
49+
</BranchAttributeLabel>
50+
<BranchAttributeValue>
51+
{branch.has_schema_changes ? (
52+
<CheckIcon className="size-4" />
53+
) : (
54+
<XIcon className="size-4" />
55+
)}
56+
</BranchAttributeValue>
57+
58+
<BranchAttributeLabel>
59+
<GitCommitIcon className="size-3.5" /> Last rebase
60+
</BranchAttributeLabel>
61+
62+
<BranchAttributeValue>
63+
<DateDisplay date={branch.branched_from} className="text-sm" />
64+
</BranchAttributeValue>
65+
</>
66+
)}
67+
68+
<BranchAttributeLabel>
69+
<CalendarIcon className="size-3.5" /> Created at
70+
</BranchAttributeLabel>
71+
72+
<BranchAttributeValue>
73+
<DateDisplay date={branch.created_at} className="text-sm" />
74+
</BranchAttributeValue>
75+
</Card>
76+
);
77+
}
78+
79+
export function BranchAttributeLabel({
80+
className,
81+
...props
82+
}: React.HTMLAttributes<HTMLDivElement>) {
83+
return (
84+
<div
85+
className={classNames(
86+
"flex items-center gap-1.5 truncate text-neutral-500 text-sm",
87+
className
88+
)}
89+
{...props}
90+
/>
91+
);
92+
}
93+
94+
export function BranchAttributeValue({
95+
className,
96+
...props
97+
}: React.HTMLAttributes<HTMLDivElement>) {
98+
return <div className={classNames("text-neutral-700 text-sm", className)} {...props} />;
99+
}

‎frontend/app/src/entities/branches/ui/branch-list-item/branch-list-item.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,9 @@ export function BranchListItem({ branch, className, ...props }: BranchListItemPr
3838

3939
{branch.is_default ? (
4040
<BranchDefaultBadge />
41-
) : branch.status !== "OPEN" ? (
41+
) : (
4242
<BranchStatusBadge status={branch.status} />
43-
) : null}
43+
)}
4444

4545
{branch.has_schema_changes && <BranchSchemaChangesBadge />}
4646
</Row>

‎frontend/app/src/entities/branches/ui/branch-list-item/branch-status-badge.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,7 @@ interface BranchStatusBadgeProps extends BadgeProps {
1313
export function BranchStatusBadge({ status, className, ...props }: BranchStatusBadgeProps) {
1414
switch (status) {
1515
case "OPEN": {
16-
return (
17-
<Badge className={classNames(pillStyle, className)} variant="green" {...props}>
18-
open
19-
</Badge>
20-
);
16+
return null;
2117
}
2218
case "NEED_REBASE": {
2319
return (

‎frontend/app/src/pages/branches/details.tsx‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,16 @@ import { DIFF_TABS } from "@/config/constants";
66
import { QSP } from "@/config/qsp";
77

88
import { constructPath } from "@/shared/api/rest/fetch";
9+
import { Row } from "@/shared/components/container";
910
import Content from "@/shared/components/layout/content";
1011
import { Tabs } from "@/shared/components/tabs";
11-
import { Badge } from "@/shared/components/ui/badge";
1212
import { Spinner } from "@/shared/components/ui/spinner";
1313
import { useTitle } from "@/shared/hooks/useTitle";
1414

1515
import { branchesState } from "@/entities/branches/stores";
1616
import { BranchDetails } from "@/entities/branches/ui/branch-details";
17+
import { BranchDefaultBadge } from "@/entities/branches/ui/branch-list-item/branch-default-badge";
18+
import { BranchStatusBadge } from "@/entities/branches/ui/branch-list-item/branch-status-badge";
1719
import { ArtifactsDiff } from "@/entities/diff/artifact-diff/artifacts-diff";
1820
import { FilesDiff } from "@/entities/diff/file-diff/files-diff";
1921
import { NodeDiff } from "@/entities/diff/node-diff";
@@ -48,16 +50,23 @@ function BranchDetailsPage() {
4850

4951
return (
5052
<Content.Card>
51-
<header className="flex items-center gap-2 p-5 font-bold">
52-
<h1 className="text-xl">{branch.name}</h1>
53-
{branch.is_default && <Badge variant="blue-outline">default</Badge>}
53+
<header className="p-5 pb-2">
54+
<Row>
55+
<h1 className="font-bold text-xl">{branch.name}</h1>
56+
{branch.is_default ? (
57+
<BranchDefaultBadge className="text-sm" />
58+
) : (
59+
<BranchStatusBadge status={branch.status} className="text-sm" />
60+
)}
61+
</Row>
62+
{branch.description && <p className="text-sm">{branch.description}</p>}
5463
</header>
5564

5665
<BranchTab />
5766

58-
<Content.CardContent>
67+
<div className="p-2">
5968
<BranchContent branchName={branchName} />
60-
</Content.CardContent>
69+
</div>
6170
</Content.Card>
6271
);
6372
}

‎frontend/app/src/shared/components/layout/content.tsx‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -90,16 +90,11 @@ export const ContentCardTitle = ({
9090
);
9191
};
9292

93-
export const ContentCardContent = ({ className, ...props }: HTMLAttributes<HTMLElement>) => {
94-
return <div className={classNames("p-5 pt-0", className)} {...props} />;
95-
};
96-
9793
export const Content = Object.assign(ContentRoot, {
9894
Title: ContentTitle,
9995
Root: ContentRoot,
10096
Card: ContentCard,
10197
CardTitle: ContentCardTitle,
102-
CardContent: ContentCardContent,
10398
});
10499

105100
export default Content;

0 commit comments

Comments
 (0)