Skip to content

Commit c62906b

Browse files
lucasgorallucasgoral
committed
Merge branch 'main' into feature/add-validations-for-create-dialogs
2 parents 548970a + 31c2d39 commit c62906b

File tree

81 files changed

+1615
-1262
lines changed

Some content is hidden

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

81 files changed

+1615
-1262
lines changed

‎src/App.tsx‎

Lines changed: 40 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,45 @@
1-
import AppRouter from "./AppRouter";
2-
import { useAuth } from "react-oidc-context";
3-
import LoginView from "./views/Login";
4-
import "@ui5/webcomponents-icons/dist/AllIcons.d.ts";
5-
import { useEffect, useState } from "react";
6-
import { SessionExpiringDialog } from "./components/Dialogs/SessionExpiringDialog.tsx";
7-
import { useFrontendConfig } from "./context/FrontendConfigContext.tsx";
8-
import { useTranslation } from "react-i18next";
1+
import AppRouter from './AppRouter';
2+
import { useAuth } from 'react-oidc-context';
3+
import LoginView from './views/Login';
4+
import '@ui5/webcomponents-icons/dist/AllIcons.d.ts';
5+
import { useEffect, useState } from 'react';
6+
import { SessionExpiringDialog } from './components/Dialogs/SessionExpiringDialog.tsx';
7+
import { useFrontendConfig } from './context/FrontendConfigContext.tsx';
8+
import { useTranslation } from 'react-i18next';
99

1010
function App() {
1111
const auth = useAuth();
12-
const [dialogSessionExpiringIsOpen, setDialogSessionExpiringIsOpen] = useState(false);
12+
const [dialogSessionExpiringIsOpen, setDialogSessionExpiringIsOpen] =
13+
useState(false);
1314
const { t } = useTranslation();
1415

15-
const [hasActiveSession, setHasActiveSession] = useState(auth.isAuthenticated);
16+
const [hasActiveSession, setHasActiveSession] = useState(
17+
auth.isAuthenticated,
18+
);
1619

1720
useEffect(() => {
18-
setHasActiveSession(auth.isAuthenticated)
19-
}, [auth.isAuthenticated])
21+
setHasActiveSession(auth.isAuthenticated);
22+
}, [auth.isAuthenticated]);
2023

2124
useEffect(() => {
22-
const unregisterAccessTokenExpiring = auth.events.addAccessTokenExpiring(() => {
23-
setDialogSessionExpiringIsOpen(true)
24-
})
25-
const unregisterAccessTokenExpired = auth.events.addAccessTokenExpired(() => {
26-
console.error('access token expired, show login view')
27-
setDialogSessionExpiringIsOpen(false)
28-
setHasActiveSession(false)
29-
})
25+
const unregisterAccessTokenExpiring = auth.events.addAccessTokenExpiring(
26+
() => {
27+
setDialogSessionExpiringIsOpen(true);
28+
},
29+
);
30+
const unregisterAccessTokenExpired = auth.events.addAccessTokenExpired(
31+
() => {
32+
console.error('access token expired, show login view');
33+
setDialogSessionExpiringIsOpen(false);
34+
setHasActiveSession(false);
35+
},
36+
);
3037

3138
return () => {
32-
unregisterAccessTokenExpiring()
33-
unregisterAccessTokenExpired()
34-
}
35-
}, [auth.events])
39+
unregisterAccessTokenExpiring();
40+
unregisterAccessTokenExpired();
41+
};
42+
}, [auth.events]);
3643

3744
const frontendConfig = useFrontendConfig();
3845

@@ -47,14 +54,19 @@ function App() {
4754
}
4855

4956
if (!hasActiveSession) {
50-
return <>
51-
<LoginView />
52-
</>
57+
return (
58+
<>
59+
<LoginView />
60+
</>
61+
);
5362
}
5463

5564
return (
5665
<>
57-
<SessionExpiringDialog isOpen={dialogSessionExpiringIsOpen} setIsOpen={setDialogSessionExpiringIsOpen} />
66+
<SessionExpiringDialog
67+
isOpen={dialogSessionExpiringIsOpen}
68+
setIsOpen={setDialogSessionExpiringIsOpen}
69+
/>
5870
<AppRouter />
5971
</>
6072
);

‎src/AppRouter.tsx‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
1-
import { HashRouter as Router, Navigate, Route, Routes } from "react-router-dom";
2-
import ControlPlaneView from "./views/ControlPlanes/ControlPlaneView.tsx";
3-
import ProjectListView from "./views/ProjectList";
4-
import ControlPlaneListView from "./views/ControlPlanes/ControlPlaneListView.tsx";
5-
import GlobalProviderOutlet from "./components/Core/ApiConfigWrapper.tsx";
6-
import { ShellBarComponent } from "./components/Core/ShellBar.tsx";
1+
import {
2+
HashRouter as Router,
3+
Navigate,
4+
Route,
5+
Routes,
6+
} from 'react-router-dom';
7+
import ControlPlaneView from './views/ControlPlanes/ControlPlaneView.tsx';
8+
import ProjectListView from './views/ProjectList';
9+
import ControlPlaneListView from './views/ControlPlanes/ControlPlaneListView.tsx';
10+
import GlobalProviderOutlet from './components/Core/ApiConfigWrapper.tsx';
11+
import { ShellBarComponent } from './components/Core/ShellBar.tsx';
712

813
function AppRouter() {
914
return (
@@ -13,18 +18,17 @@ function AppRouter() {
1318
<Routes>
1419
<Route path="/mcp" element={<GlobalProviderOutlet />}>
1520
<Route path="projects" element={<ProjectListView />} />
16-
<Route path="projects/:projectName" element={<ControlPlaneListView />} />
21+
<Route
22+
path="projects/:projectName"
23+
element={<ControlPlaneListView />}
24+
/>
1725
<Route
1826
path="projects/:projectName/workspaces/:workspaceName/mcps/:controlPlaneName/context/:contextName"
1927
element={<ControlPlaneView />}
2028
/>
2129
</Route>
22-
<Route
23-
path="/"
24-
element={<Navigate to="/mcp/projects" />}
25-
/>
30+
<Route path="/" element={<Navigate to="/mcp/projects" />} />
2631
</Routes>
27-
2832
</Router>
2933
</>
3034
);

‎src/components/ControlPlane/ComponentList.tsx‎

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,44 @@
11
import {
2-
32
AnalyticalTable,
4-
AnalyticalTableColumnDefinition
5-
} from "@ui5/webcomponents-react";
6-
import { ControlPlaneType } from "../../lib/api/types/crate/controlPlanes";
3+
AnalyticalTableColumnDefinition,
4+
} from '@ui5/webcomponents-react';
5+
import { ControlPlaneType } from '../../lib/api/types/crate/controlPlanes';
76
import { useTranslation } from 'react-i18next';
87

98
export default function ComponentList({ mcp }: { mcp: ControlPlaneType }) {
10-
119
const { t } = useTranslation();
1210

1311
const data = [
1412
{
15-
name: "Crossplane",
16-
version: mcp.spec?.components.crossplane?.version
13+
name: 'Crossplane',
14+
version: mcp.spec?.components.crossplane?.version,
1715
},
1816
{
19-
name: "BTP Service Operator",
20-
version: mcp.spec?.components.btpServiceOperator?.version
17+
name: 'BTP Service Operator',
18+
version: mcp.spec?.components.btpServiceOperator?.version,
2119
},
2220
{
23-
name: "External Secrets Operator",
24-
version: mcp.spec?.components.externalSecretsOperator?.version
21+
name: 'External Secrets Operator',
22+
version: mcp.spec?.components.externalSecretsOperator?.version,
2523
},
2624
{
27-
name: "Kyverno",
28-
version: mcp.spec?.components.kyverno?.version
25+
name: 'Kyverno',
26+
version: mcp.spec?.components.kyverno?.version,
2927
},
3028
{
31-
name: "Flux",
32-
version: mcp.spec?.components.flux?.version
33-
}
29+
name: 'Flux',
30+
version: mcp.spec?.components.flux?.version,
31+
},
3432
].filter((item) => item.version !== undefined);
3533

3634
const componentTableColumns: AnalyticalTableColumnDefinition[] = [
3735
{
3836
Header: t('ComponentList.tableComponentHeader'),
39-
accessor: "name",
37+
accessor: 'name',
4038
},
4139
{
4240
Header: t('ComponentList.tableVersionHeader'),
43-
accessor: "version",
41+
accessor: 'version',
4442
},
4543
];
4644

@@ -52,7 +50,6 @@ export default function ComponentList({ mcp }: { mcp: ControlPlaneType }) {
5250
minRows={0}
5351
data={data}
5452
/>
55-
5653
</div>
57-
)
54+
);
5855
}

‎src/components/ControlPlane/FluxList.tsx‎

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,26 @@
1-
import ConfiguredAnalyticstable from "../Shared/ConfiguredAnalyticsTable.tsx";
2-
import { AnalyticalTableColumnDefinition, Title } from "@ui5/webcomponents-react";
3-
import ReactTimeAgo from "react-time-ago";
4-
import IllustratedError from "../Shared/IllustratedError.tsx";
5-
import useResource from "../../lib/api/useApiResource";
6-
import { FluxGitRepo } from "../../lib/api/types/flux/listGitRepo";
7-
import { FluxKustomization } from "../../lib/api/types/flux/listKustomization";
1+
import ConfiguredAnalyticstable from '../Shared/ConfiguredAnalyticsTable.tsx';
2+
import {
3+
AnalyticalTableColumnDefinition,
4+
Title,
5+
} from '@ui5/webcomponents-react';
6+
import ReactTimeAgo from 'react-time-ago';
7+
import IllustratedError from '../Shared/IllustratedError.tsx';
8+
import useResource from '../../lib/api/useApiResource';
9+
import { FluxGitRepo } from '../../lib/api/types/flux/listGitRepo';
10+
import { FluxKustomization } from '../../lib/api/types/flux/listKustomization';
811
import { useTranslation } from 'react-i18next';
912

1013
export default function FluxList() {
11-
const { data: repoData, error: repoErr, isLoading: repoIsLoading } = useResource(FluxGitRepo); //404 if component not enabled
12-
const { data: kustmizationData, error: kustomizationErr, isLoading: kustomizationIsLoading } = useResource(FluxKustomization); //404 if component not enabled
14+
const {
15+
data: repoData,
16+
error: repoErr,
17+
isLoading: repoIsLoading,
18+
} = useResource(FluxGitRepo); //404 if component not enabled
19+
const {
20+
data: kustmizationData,
21+
error: kustomizationErr,
22+
isLoading: kustomizationIsLoading,
23+
} = useResource(FluxKustomization); //404 if component not enabled
1324

1425
const { t } = useTranslation();
1526

@@ -23,15 +34,15 @@ export default function FluxList() {
2334
const columns: AnalyticalTableColumnDefinition[] = [
2435
{
2536
Header: t('FluxList.tableNameHeader'),
26-
accessor: "metadata.name",
37+
accessor: 'metadata.name',
2738
},
2839
{
2940
Header: t('FluxList.tableStatusHeader'),
30-
accessor: "status.usages",
41+
accessor: 'status.usages',
3142
},
3243
{
3344
Header: t('FluxList.tableCreatedHeader'),
34-
accessor: "metadata.creationTimestamp",
45+
accessor: 'metadata.creationTimestamp',
3546
Cell: (props: any) => <ReactTimeAgo date={new Date(props.cell.value)} />,
3647
},
3748
];

‎src/components/ControlPlane/MCPHealthPopoverButton.tsx‎

Lines changed: 42 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,24 @@
1-
import { AnalyticalTable, Icon, Popover } from "@ui5/webcomponents-react";
2-
import { AnalyticalTableColumnDefinition } from "@ui5/webcomponents-react/wrappers";
3-
import PopoverPlacement from "@ui5/webcomponents/dist/types/PopoverPlacement.js";
4-
import "@ui5/webcomponents-icons/dist/copy";
5-
import { JSX, useRef, useState } from "react";
6-
import { ControlPlaneStatusType, ReadyStatus } from "../../lib/api/types/crate/controlPlanes";
7-
import ReactTimeAgo from "react-time-ago";
8-
import { AnimatedHoverTextButton } from "../Helper/AnimatedHoverTextButton.tsx";
1+
import { AnalyticalTable, Icon, Popover } from '@ui5/webcomponents-react';
2+
import { AnalyticalTableColumnDefinition } from '@ui5/webcomponents-react/wrappers';
3+
import PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js';
4+
import '@ui5/webcomponents-icons/dist/copy';
5+
import { JSX, useRef, useState } from 'react';
6+
import {
7+
ControlPlaneStatusType,
8+
ReadyStatus,
9+
} from '../../lib/api/types/crate/controlPlanes';
10+
import ReactTimeAgo from 'react-time-ago';
11+
import { AnimatedHoverTextButton } from '../Helper/AnimatedHoverTextButton.tsx';
912
import { useTranslation } from 'react-i18next';
1013

11-
export default function MCPHealthPopoverButton({ mcpStatus }: { mcpStatus: ControlPlaneStatusType | undefined }) {
14+
export default function MCPHealthPopoverButton({
15+
mcpStatus,
16+
}: {
17+
mcpStatus: ControlPlaneStatusType | undefined;
18+
}) {
1219
const popoverRef = useRef(null);
1320
const [open, setOpen] = useState(false);
14-
21+
1522
const { t } = useTranslation();
1623

1724
const handleOpenerClick = (e: any) => {
@@ -25,33 +32,33 @@ export default function MCPHealthPopoverButton({ mcpStatus }: { mcpStatus: Contr
2532
const statusTableColumns: AnalyticalTableColumnDefinition[] = [
2633
{
2734
Header: t('MCPHealthPopoverButton.statusHeader'),
28-
accessor: "status",
35+
accessor: 'status',
2936
width: 50,
3037
Cell: (instance: any) => {
31-
const isReady = instance.cell.value === "True";
38+
const isReady = instance.cell.value === 'True';
3239
return (
3340
<Icon
34-
style={{ color: isReady ? "green" : "red" }}
35-
name={isReady ? "sap-icon://sys-enter" : "sap-icon://pending"}
36-
></Icon>
41+
style={{ color: isReady ? 'green' : 'red' }}
42+
name={isReady ? 'sap-icon://sys-enter' : 'sap-icon://pending'}
43+
/>
3744
);
3845
},
3946
},
4047
{
4148
Header: t('MCPHealthPopoverButton.typeHeader'),
42-
accessor: "type",
49+
accessor: 'type',
4350
},
4451
{
4552
Header: t('MCPHealthPopoverButton.messageHeader'),
46-
accessor: "message",
53+
accessor: 'message',
4754
},
4855
{
4956
Header: t('MCPHealthPopoverButton.reasonHeader'),
50-
accessor: "reason",
57+
accessor: 'reason',
5158
},
5259
{
5360
Header: t('MCPHealthPopoverButton.transitionHeader'),
54-
accessor: "lastTransitionTime",
61+
accessor: 'lastTransitionTime',
5562
Cell: (instance: any) => {
5663
return <ReactTimeAgo date={new Date(instance.cell.value)} />;
5764
},
@@ -61,18 +68,24 @@ export default function MCPHealthPopoverButton({ mcpStatus }: { mcpStatus: Contr
6168
return (
6269
<div className="component-title-row">
6370
<AnimatedHoverTextButton
64-
onClick={handleOpenerClick}
6571
icon={getIconForOverallStatus(mcpStatus?.status)}
66-
text={mcpStatus?.status ?? ""}
72+
text={mcpStatus?.status ?? ''}
73+
onClick={handleOpenerClick}
6774
/>
6875
<Popover ref={popoverRef} open={open} placement={PopoverPlacement.Bottom}>
69-
{<StatusTable status={mcpStatus} tableColumns={statusTableColumns}/>}
76+
{<StatusTable status={mcpStatus} tableColumns={statusTableColumns} />}
7077
</Popover>
7178
</div>
7279
);
7380
}
7481

75-
function StatusTable({ status, tableColumns }: { status: ControlPlaneStatusType | undefined, tableColumns: AnalyticalTableColumnDefinition[]}) {
82+
function StatusTable({
83+
status,
84+
tableColumns,
85+
}: {
86+
status: ControlPlaneStatusType | undefined;
87+
tableColumns: AnalyticalTableColumnDefinition[];
88+
}) {
7689
return (
7790
<div style={{ width: 600 }}>
7891
<AnalyticalTable
@@ -88,14 +101,16 @@ function StatusTable({ status, tableColumns }: { status: ControlPlaneStatusType
88101
);
89102
}
90103

91-
export function getIconForOverallStatus(status: ReadyStatus | undefined): JSX.Element {
104+
export function getIconForOverallStatus(
105+
status: ReadyStatus | undefined,
106+
): JSX.Element {
92107
switch (status) {
93108
case ReadyStatus.Ready:
94-
return <Icon style={{ color: "green" }} name="sap-icon://sys-enter" />;
109+
return <Icon style={{ color: 'green' }} name="sap-icon://sys-enter" />;
95110
case ReadyStatus.NotReady:
96-
return <Icon style={{ color: "red" }} name="sap-icon://pending" />;
111+
return <Icon style={{ color: 'red' }} name="sap-icon://pending" />;
97112
case ReadyStatus.InDeletion:
98-
return <Icon style={{ color: "orange" }} name="sap-icon://delete" />;
113+
return <Icon style={{ color: 'orange' }} name="sap-icon://delete" />;
99114
case undefined:
100115
return <></>;
101116
}

0 commit comments

Comments
 (0)