Skip to content

Commit 731bee3

Browse files
bilalabbadbilalabbad
authored
New Layout: wrapped all pages main content in a card + display hierarchy in breadcrumb (#4666)
- wrapped all pages main content in a card + - breadcrumb display hierarchical node - Added back some e2e
1 parent be7446a commit 731bee3

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+397
-448
lines changed

‎frontend/app/src/components/editor/code-editor.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import Prism from "prismjs";
55
import "prismjs/components/prism-json"; // need this
66
import "prismjs/themes/prism.css"; //Example style, you can use another
77

8-
import { BUTTON_TYPES, Button } from "@/components/buttons/button";
8+
import { Button } from "@/components/buttons/button-primitive";
99
import { ALERT_TYPES, Alert } from "@/components/ui/alert";
1010
import { classNames } from "@/utils/common";
1111
import { useState } from "react";
@@ -34,7 +34,8 @@ export const CodeEditor = (props: any) => {
3434
{enableCopy && (
3535
<Button
3636
className="absolute z-10 top-0 right-0"
37-
buttonType={BUTTON_TYPES.INVISIBLE}
37+
variant="ghost"
38+
size="square"
3839
onClick={handleCopy}
3940
>
4041
{!isCopied && <ClipboardDocumentIcon className="h-4 w-4" />}

‎frontend/app/src/components/table/table.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { ButtonWithTooltip } from "@/components/buttons/button-primitive";
2-
import { useAuth } from "@/hooks/useAuth";
32
import NoDataFound from "@/screens/errors/no-data-found";
43
import { classNames } from "@/utils/common";
54
import { Icon } from "@iconify-icon/react";
@@ -40,8 +39,6 @@ type TableProps = {
4039
};
4140

4241
export const Table = ({ columns, rows, onDelete, onUpdate, className, permission }: TableProps) => {
43-
const auth = useAuth();
44-
4542
return (
4643
<>
4744
<table

‎frontend/app/src/components/tabs.tsx‎

Lines changed: 26 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -34,41 +34,39 @@ export const Tabs = (props: TabsProps) => {
3434
return (
3535
<div
3636
className={classNames(
37-
"bg-custom-white flex items-center border-b border-gray-200",
37+
"bg-custom-white flex items-center border-b border-gray-200 px-2",
3838
className
3939
)}
4040
>
4141
<div className="flex-1">
42-
<div className="">
43-
<nav className="-mb-px flex space-x-8 px-4" aria-label="Tabs">
44-
{tabs.map((tab: Tab, index: number) => {
45-
const Component = tab.component ? tab.component : () => null;
42+
<nav className="-mb-px flex space-x-8 px-4" aria-label="Tabs">
43+
{tabs.map((tab: Tab, index: number) => {
44+
const Component = tab.component ? tab.component : () => null;
4645

47-
return (
48-
<div
49-
key={tab.name}
50-
onClick={() => handleClick(tab, index)}
51-
className={classNames(
52-
"flex items-center whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium cursor-pointer",
53-
(qspTab && qspTab === tab.name) || (!qspTab && index === 0) // First item is active without QSP
54-
? "border-custom-blue-500 text-custom-blue-600"
55-
: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700"
56-
)}
57-
>
58-
{tab.label}
46+
return (
47+
<div
48+
key={tab.name}
49+
onClick={() => handleClick(tab, index)}
50+
className={classNames(
51+
"flex items-center whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium cursor-pointer",
52+
(qspTab && qspTab === tab.name) || (!qspTab && index === 0) // First item is active without QSP
53+
? "border-custom-blue-500 text-custom-blue-600"
54+
: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700"
55+
)}
56+
>
57+
{tab.label}
5958

60-
{tab.count !== undefined && (
61-
<Pill className="ml-2" data-cy="tab-counter">
62-
{JSON.stringify(tab.count)}
63-
</Pill>
64-
)}
59+
{tab.count !== undefined && (
60+
<Pill className="ml-2" data-cy="tab-counter">
61+
{JSON.stringify(tab.count)}
62+
</Pill>
63+
)}
6564

66-
<Component />
67-
</div>
68-
);
69-
})}
70-
</nav>
71-
</div>
65+
<Component />
66+
</div>
67+
);
68+
})}
69+
</nav>
7270
</div>
7371
<div>{rightItems}</div>
7472
</div>

‎frontend/app/src/components/ui/card.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const CardWithBorderTitle = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>
4040
({ className, ...props }, ref) => (
4141
<header
4242
ref={ref}
43-
className={classNames("bg-neutral-100 p-2 font-semibold text-sm", className)}
43+
className={classNames("bg-neutral-100 p-2 font-semibold text-sm rounded-t", className)}
4444
{...props}
4545
/>
4646
)

‎frontend/app/src/components/ui/scroll-area.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ export const ScrollArea = React.forwardRef<
1717
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
1818
{children}
1919
</ScrollAreaPrimitive.Viewport>
20-
<ScrollBar />
20+
<ScrollBar orientation="vertical" />
21+
<ScrollBar orientation="horizontal" />
2122
<ScrollAreaPrimitive.Corner />
2223
</ScrollAreaPrimitive.Root>
2324
));

‎frontend/app/src/graphql/queries/proposed-changes/getProposedChanges.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { gql } from "@apollo/client";
22

33
export const GET_PROPOSED_CHANGES = gql`
4-
query GET_PROPOSED_CHANGES($statesVisible: [String], $statesHidden: [String], $search: String) {
4+
query GET_PROPOSED_CHANGES($statesVisible: [String], $search: String) {
55
CoreProposedChange(state__values: $statesVisible, any__value: $search, partial_match: true) {
66
count
77
edges {
@@ -82,10 +82,10 @@ export const GET_PROPOSED_CHANGES = gql`
8282
}
8383
__typename
8484
}
85-
CoreProposedChangeVisible: CoreProposedChange(state__values: $statesVisible) {
85+
CoreProposedChangeOpen: CoreProposedChange(state__values: ["open"]) {
8686
count
8787
}
88-
CoreProposedChangeHidden: CoreProposedChange(state__values: $statesHidden) {
88+
CoreProposedChangeClose: CoreProposedChange(state__values: ["closed", "merged", "canceled"]) {
8989
count
9090
}
9191
}

‎frontend/app/src/pages/ipam/layout.tsx‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,28 @@
1-
import { Outlet } from "react-router-dom";
2-
3-
import { CardWithBorder } from "@/components/ui/card";
1+
import { ScrollArea } from "@/components/ui/scroll-area";
42
import Content from "@/screens/layout/content";
3+
import { Outlet } from "react-router-dom";
54
import IpNamespaceSelector from "../../screens/ipam/ip-namespace-selector";
65
import IpamTree from "../../screens/ipam/ipam-tree/ipam-tree";
76

87
function IpamLayout() {
98
return (
10-
<>
9+
<Content.Card className="h-[calc(100%-1rem)] flex flex-col overflow-hidden">
1110
<Content.Title title={<h1>IP Address Manager</h1>}>
1211
<IpNamespaceSelector />
1312
</Content.Title>
1413

15-
<Content className="flex p-2 gap-2">
16-
<CardWithBorder contentClassName="p-2" className="min-w-64 max-w-[400px]">
17-
<IpamTree className="min-w-full" />
18-
</CardWithBorder>
14+
<div className="flex-grow flex overflow-auto">
15+
<div className="min-w-64 max-w-[400px] border-r flex">
16+
<ScrollArea className="w-full p-2">
17+
<IpamTree className="w-full" />
18+
</ScrollArea>
19+
</div>
1920

20-
<section className="flex-grow">
21+
<section className="flex-grow overflow-auto">
2122
<Outlet />
2223
</section>
23-
</Content>
24-
</>
24+
</div>
25+
</Content.Card>
2526
);
2627
}
2728

‎frontend/app/src/pages/login.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { useAuth } from "@/hooks/useAuth";
22
import { ReactComponent as InfrahubLogo } from "@/images/Infrahub-SVG-hori.svg";
33
import { Login } from "@/screens/authentification/login";
4-
import Content from "@/screens/layout/content";
54
import { Navigate, useLocation } from "react-router-dom";
65

76
function LoginPage() {
@@ -14,7 +13,7 @@ function LoginPage() {
1413
}
1514

1615
return (
17-
<Content className="bg-stone-100 h-screen w-screen pt-[25vh]">
16+
<div className="bg-stone-100 h-screen w-screen py-[25vh] overflow-auto">
1817
<div className="flex flex-col items-center gap-6 w-full max-w-sm m-auto">
1918
<InfrahubLogo className="h-12" alt="Intrahub logo" />
2019

@@ -30,7 +29,7 @@ function LoginPage() {
3029
)
3130
)}
3231
</div>
33-
</Content>
32+
</div>
3433
);
3534
}
3635

‎frontend/app/src/pages/objects/CoreGraphQLQuery/graphql-query-details.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,11 @@ import { iNodeSchema, schemaState } from "@/state/atoms/schema.atom";
1414
import { getSchemaObjectColumns } from "@/utils/getSchemaObjectColumns";
1515
import { gql } from "@apollo/client";
1616
import { useAtomValue } from "jotai/index";
17-
import { useParams } from "react-router-dom";
1817

19-
export default function GraphqlQueryDetailsPage() {
18+
export default function GraphqlQueryDetailsPage({ graphqlQueryId }: { graphqlQueryId: string }) {
2019
useTitle("GraphQL Query details");
2120

22-
const { objectid } = useParams();
21+
const objectid = graphqlQueryId;
2322

2423
const nodes = useAtomValue(schemaState);
2524
const graphqlQuerySchema = nodes.find((s) => s.kind === GRAPHQL_QUERY_OBJECT);

‎frontend/app/src/pages/objects/layout.tsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { CardWithBorder } from "@/components/ui/card";
1+
import { ScrollArea } from "@/components/ui/scroll-area";
22
import NoDataFound from "@/screens/errors/no-data-found";
3+
import Content from "@/screens/layout/content";
34
import LoadingScreen from "@/screens/loading-screen/loading-screen";
45
import { HierarchicalTree } from "@/screens/objects/hierarchical-tree";
56
import ObjectHeader from "@/screens/objects/object-header";
@@ -17,12 +18,13 @@ const ObjectPageLayout = () => {
1718
const state = useAtomValue(stateAtom);
1819
const schema = [...nodes, ...generics, ...profiles].find(({ kind }) => kind === objectKind);
1920

20-
if (!state.isReady)
21+
if (!state.isReady) {
2122
return (
22-
<div className="flex flex-1 items-center justify-center">
23+
<Content.Card className="flex justify-center items-center p-5 min-h-[400px]">
2324
<LoadingScreen message="Loading schema..." />
24-
</div>
25+
</Content.Card>
2526
);
27+
}
2628

2729
if (!schema) return <NoDataFound message="No schema found for this kind." />;
2830

@@ -44,25 +46,25 @@ const ObjectPageLayout = () => {
4446
const treeSchema = getTreeSchema();
4547

4648
return (
47-
<>
49+
<Content.Card>
4850
<ObjectHeader schema={schema} objectId={objectid} />
4951

50-
<div className="flex-grow flex gap-2 p-2 overflow-auto">
52+
<div className="flex-grow flex overflow-auto">
5153
{treeSchema && (
52-
<CardWithBorder className="min-w-64 max-w-[400px]">
54+
<ScrollArea className="min-w-64 max-w-[400px] border-r">
5355
<HierarchicalTree
5456
schema={treeSchema}
5557
currentNodeId={objectid}
5658
className="p-2 min-w-full"
5759
/>
58-
</CardWithBorder>
60+
</ScrollArea>
5961
)}
6062

61-
<div className="flex-grow">
63+
<div className="flex-grow overflow-auto">
6264
<Outlet />
6365
</div>
6466
</div>
65-
</>
67+
</Content.Card>
6668
);
6769
};
6870

0 commit comments

Comments
 (0)