From 861247a7d264baec956b8718e0cc2d4c7aa30ee0 Mon Sep 17 00:00:00 2001
From: Max Frederiksen <maxfrederiksen@Maxs-MacBook-Air.local>
Date: Sat, 4 Jan 2025 16:19:59 +0100
Subject: [PATCH] Smoke test fixes
---
index.html | 2 +-
src/components/IOC/IOCManage/IOCService.tsx | 8 ++++-
src/components/IOC/IOCManage/JobSection.tsx | 2 +-
src/components/common/Alerts/AlertsData.ts | 8 ++---
src/components/common/Helper.tsx | 19 ------------
.../common/User/UserOperationList.tsx | 29 +++++++++----------
.../NavigationMenu/LoginControls.tsx | 13 +++++++--
src/components/records/RecordIcons.tsx | 20 +++++++++----
src/components/records/RecordSearch.tsx | 17 ++++++-----
src/views/host/HostListView.tsx | 2 +-
src/views/jobs/JobDetailsContainer.tsx | 2 +-
src/views/jobs/JobListView.tsx | 2 +-
src/views/records/RecordDetailsView.tsx | 19 ++++--------
src/views/records/RecordListView.tsx | 2 +-
14 files changed, 67 insertions(+), 78 deletions(-)
diff --git a/index.html b/index.html
index 2fff7101..e502fc5d 100644
--- a/index.html
+++ b/index.html
@@ -56,7 +56,7 @@
<script src="/config.js"></script>
<script
type="module"
- src="/src/index.jsx"
+ src="/src/index.tsx"
></script>
</body>
</html>
diff --git a/src/components/IOC/IOCManage/IOCService.tsx b/src/components/IOC/IOCManage/IOCService.tsx
index 409427e0..5a1ac6af 100644
--- a/src/components/IOC/IOCManage/IOCService.tsx
+++ b/src/components/IOC/IOCManage/IOCService.tsx
@@ -178,7 +178,13 @@ export function IOCService({ ioc }: { ioc: IocDetails }) {
color="primary"
variant="contained"
disabled={ioc.operationInProgress || isLoading}
- sx={{ color: "essWhite.main" }}
+ sx={{
+ color: "essWhite.main",
+ bgcolor: "essGrass.main",
+ "&:hover": {
+ bgcolor: "essGrass.dark"
+ }
+ }}
onClick={() => setStartModalOpen(true)}
>
Start
diff --git a/src/components/IOC/IOCManage/JobSection.tsx b/src/components/IOC/IOCManage/JobSection.tsx
index cbe8e4f6..583b1a55 100644
--- a/src/components/IOC/IOCManage/JobSection.tsx
+++ b/src/components/IOC/IOCManage/JobSection.tsx
@@ -19,7 +19,7 @@ export const JobSection = ({ ioc }: JobSectionProps) => {
const { data: jobs, isLoading } = useListJobsQuery(
{
- ...initRequestParams(pagination),
+ ...initRequestParams({ pagination }),
iocId: ioc.id
},
{ pollingInterval: 5000 }
diff --git a/src/components/common/Alerts/AlertsData.ts b/src/components/common/Alerts/AlertsData.ts
index b94eeb01..b792fbeb 100644
--- a/src/components/common/Alerts/AlertsData.ts
+++ b/src/components/common/Alerts/AlertsData.ts
@@ -69,13 +69,9 @@ export const getErrorState = (
status: browserError.status
};
}
- return {
- message: "Unknown error",
- status: 404
- };
}
return {
- message: "Unknown error",
- status: 404
+ message: "",
+ status: null
};
};
diff --git a/src/components/common/Helper.tsx b/src/components/common/Helper.tsx
index ab415c67..2b640b7e 100644
--- a/src/components/common/Helper.tsx
+++ b/src/components/common/Helper.tsx
@@ -1,4 +1,3 @@
-import { type Dispatch, type SetStateAction } from "react";
import env from "../../config/env";
import { Pagination } from "../../types/common";
@@ -35,21 +34,3 @@ export function initRequestParams({
return requestParams;
}
-
-interface onFetchEntityErrorProps {
- message?: string;
- status?: string | number;
- setNotFoundError: Dispatch<SetStateAction<string | null>>;
-}
-
-export function onFetchEntityError({
- message,
- status,
- setNotFoundError
-}: onFetchEntityErrorProps) {
- const notFound = status === 404 || status === "404";
- if (notFound) {
- setNotFoundError(message ?? "");
- }
- return !notFound;
-}
diff --git a/src/components/common/User/UserOperationList.tsx b/src/components/common/User/UserOperationList.tsx
index b96c01c2..51c868fd 100644
--- a/src/components/common/User/UserOperationList.tsx
+++ b/src/components/common/User/UserOperationList.tsx
@@ -1,5 +1,5 @@
import { useCallback, useEffect } from "react";
-import { Card, CardHeader } from "@mui/material";
+import { Typography } from "@mui/material";
import { usePagination } from "@ess-ics/ce-ui-common";
import { initRequestParams } from "../Helper";
import { JobTable } from "../../Job";
@@ -8,10 +8,10 @@ import {
ROWS_PER_PAGE
} from "../../../constants";
import { useLazyListJobsQuery } from "../../../store/deployApi";
-import { Pagination } from "../../../types/common";
+import { OnPageParams } from "../../../types/common";
export function UserOperationList({ userName }: { userName?: string }) {
- const [getJobs, { data: jobs, isFetching }] = useLazyListJobsQuery({
+ const [getJobs, { data: jobs, isLoading }] = useLazyListJobsQuery({
pollingInterval: DEFAULT_POLLING_INTERVAL_MILLIS
});
@@ -27,7 +27,7 @@ export function UserOperationList({ userName }: { userName?: string }) {
}, [setPagination, jobs?.totalCount]);
const callGetjobs = useCallback(() => {
- const requestParams = initRequestParams(pagination);
+ const requestParams = initRequestParams({ pagination });
getJobs({ ...requestParams, user: userName });
}, [getJobs, pagination, userName]);
@@ -37,26 +37,25 @@ export function UserOperationList({ userName }: { userName?: string }) {
}, [callGetjobs]);
// Invoked by Table on change to pagination
- const onPage = (params: Pagination) => {
+ const onPage = (params: OnPageParams) => {
setPagination(params);
};
return (
- <Card>
- <CardHeader
- title={"Jobs"}
- titleTypographyProps={{
- variant: "h2",
- component: "h2"
- }}
- />
+ <>
+ <Typography
+ p={2}
+ variant="h2"
+ >
+ Jobs
+ </Typography>
<JobTable
jobs={jobs?.jobs}
customColumns={[{ field: "status" }, { field: "job" }]}
- loading={isFetching || !jobs}
+ loading={isLoading || !jobs}
pagination={pagination}
onPage={onPage}
/>
- </Card>
+ </>
);
}
diff --git a/src/components/navigation/NavigationMenu/LoginControls.tsx b/src/components/navigation/NavigationMenu/LoginControls.tsx
index 461ba513..ac096a18 100644
--- a/src/components/navigation/NavigationMenu/LoginControls.tsx
+++ b/src/components/navigation/NavigationMenu/LoginControls.tsx
@@ -1,5 +1,5 @@
import { useRef, useContext, useCallback, useEffect, useState } from "react";
-import { string } from "prop-types";
+import { string, arrayOf } from "prop-types";
import { Button, Avatar, Chip } from "@mui/material";
import LockOpenIcon from "@mui/icons-material/LockOpen";
import PersonIcon from "@mui/icons-material/Person";
@@ -65,8 +65,15 @@ export const ProfileMenu = ({ user }: { user: User }) => {
return <IconMenuButton {...profileMenuProps} />;
};
-ProfileMenu.propTypes = {
- user: string
+ProfileMenu.prototypes = {
+ user: {
+ fullName: string.isRequired,
+ loginName: string.isRequired,
+ avatar: string.isRequired,
+ email: string,
+ gitlabUserName: string.isRequired,
+ roles: arrayOf(string).isRequired
+ }
};
export const LoginControls = () => {
diff --git a/src/components/records/RecordIcons.tsx b/src/components/records/RecordIcons.tsx
index 3ae0e2cc..6ea8cf4e 100644
--- a/src/components/records/RecordIcons.tsx
+++ b/src/components/records/RecordIcons.tsx
@@ -1,6 +1,6 @@
-import { ReactElement } from "react";
-import { useTheme } from "@mui/material";
+import { type SvgIconTypeMap, useTheme } from "@mui/material";
import { LabeledIcon } from "@ess-ics/ce-ui-common";
+import { type OverridableComponent } from "@mui/material/OverridableComponent";
import {
Brightness1,
RadioButtonUnchecked,
@@ -13,18 +13,26 @@ export function RecordStatusIcon({ record }: { record: ApiRecord }) {
const { pvStatus } = record;
- const iconConfig: Record<string, { title: string; icon: ReactElement }> = {
+ const iconConfig: Record<
+ string,
+ {
+ title: string;
+ icon: OverridableComponent<SvgIconTypeMap<"", "svg">> & {
+ muiName: string;
+ };
+ }
+ > = {
active: {
title: "Active",
- icon: <Brightness1 />
+ icon: Brightness1
},
inactive: {
title: "Inactive",
- icon: <RadioButtonUnchecked />
+ icon: RadioButtonUnchecked
},
null: {
title: "Unknown",
- icon: <HelpOutline />
+ icon: HelpOutline
}
};
diff --git a/src/components/records/RecordSearch.tsx b/src/components/records/RecordSearch.tsx
index 3a9c0149..446afd06 100644
--- a/src/components/records/RecordSearch.tsx
+++ b/src/components/records/RecordSearch.tsx
@@ -19,10 +19,8 @@ export function RecordSearch({
rowType,
isExpanded
}: RecordSearchProps) {
- const [
- getRecords,
- { data: records, isLoading: loading, isSuccess: dataReady }
- ] = useLazyFindAllRecordsQuery();
+ const [getRecords, { data: records, isFetching, isSuccess: dataReady }] =
+ useLazyFindAllRecordsQuery();
const [searchParams, setSearchParams] = useSearchParams({ query: "" });
const [recordFilter, setRecordFilter] = useState<
@@ -55,7 +53,7 @@ export function RecordSearch({
// Request new search results whenever search or pagination changes
useEffect(() => {
if (isExpanded) {
- const requestParams = initRequestParams(pagination);
+ const requestParams = initRequestParams({ pagination });
getRecords({
pvStatus: recordFilter,
@@ -96,15 +94,18 @@ export function RecordSearch({
<Tab label="Only inactive" />
</Tabs>
</Grid>
- <Grid item>
+ <Grid
+ mt={1}
+ item
+ >
<SearchBar
search={setSearch}
query={searchParams.get("query")}
- loading={loading || !dataReady}
+ loading={isFetching || !dataReady}
>
<RecordTable
records={records}
- loading={loading || !dataReady}
+ loading={isFetching || !dataReady}
rowType={rowType}
pagination={pagination}
onPage={onPage}
diff --git a/src/views/host/HostListView.tsx b/src/views/host/HostListView.tsx
index 62e7e8a2..50a416b0 100644
--- a/src/views/host/HostListView.tsx
+++ b/src/views/host/HostListView.tsx
@@ -56,7 +56,7 @@ export function HostListView() {
// Request new search results whenever search or pagination changes
useEffect(() => {
- const requestParams = initRequestParams(pagination);
+ const requestParams = initRequestParams({ pagination });
callListHostsQuery({
filter: hostFilter,
text: searchParams.get("query") || "",
diff --git a/src/views/jobs/JobDetailsContainer.tsx b/src/views/jobs/JobDetailsContainer.tsx
index 8bf045e3..c4cee54c 100644
--- a/src/views/jobs/JobDetailsContainer.tsx
+++ b/src/views/jobs/JobDetailsContainer.tsx
@@ -49,7 +49,7 @@ export function JobDetailsContainer({ id }: { id?: string }) {
return (
<RootPaper>
- <JobDetailsView job={job} />;
+ <JobDetailsView job={job} />
</RootPaper>
);
}
diff --git a/src/views/jobs/JobListView.tsx b/src/views/jobs/JobListView.tsx
index 2f92321c..f7d9c396 100644
--- a/src/views/jobs/JobListView.tsx
+++ b/src/views/jobs/JobListView.tsx
@@ -22,7 +22,7 @@ export function JobListView() {
}, [setPagination, jobs?.totalCount]);
const callGetOperations = useCallback(() => {
- const requestParams = initRequestParams(pagination);
+ const requestParams = initRequestParams({ pagination });
getJobs(requestParams);
}, [getJobs, pagination]);
diff --git a/src/views/records/RecordDetailsView.tsx b/src/views/records/RecordDetailsView.tsx
index bb646578..49f1663b 100644
--- a/src/views/records/RecordDetailsView.tsx
+++ b/src/views/records/RecordDetailsView.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useCallback, useState, useContext } from "react";
+import { useEffect, useCallback, useContext } from "react";
import { IconButton, Typography, LinearProgress } from "@mui/material";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import {
@@ -12,10 +12,7 @@ import {
import { useParams, useNavigate } from "react-router-dom";
import { Alias } from "./Alias";
import { RecordBadge } from "../../components/records/RecordBadge";
-import {
- applicationTitle,
- onFetchEntityError
-} from "../../components/common/Helper";
+import { applicationTitle } from "../../components/common/Helper";
import { NotFoundView } from "../../components/navigation/NotFoundView/NotFoundView";
import { RecordDetails, useGetRecordQuery } from "../../store/deployApi";
@@ -25,7 +22,6 @@ import { getErrorState } from "../../components/common/Alerts/AlertsData";
export function RecordDetailsView() {
const { name } = useParams();
const decodedName = decodeURIComponent(name ?? "");
- const [error, setError] = useState<string | null>(null);
const {
data: record,
@@ -35,13 +31,6 @@ export function RecordDetailsView() {
name: decodedName
});
- useEffect(() => {
- if (fetchError) {
- const { message, status } = getErrorState(fetchError);
- onFetchEntityError({ message, status, setNotFoundError: setError });
- }
- }, [fetchError]);
-
const navigate = useNavigate();
const { setTitle } = useContext<GlobalAppBarContextType>(GlobalAppBarContext);
@@ -97,7 +86,9 @@ export function RecordDetailsView() {
}
}, []);
- if (decodedName.includes(";") || error) {
+ const { status } = getErrorState(fetchError);
+
+ if (decodedName.includes(";") || status === "404" || status === 404) {
return <NotFoundView />;
}
diff --git a/src/views/records/RecordListView.tsx b/src/views/records/RecordListView.tsx
index 9b2ad6bf..43c37b05 100644
--- a/src/views/records/RecordListView.tsx
+++ b/src/views/records/RecordListView.tsx
@@ -57,7 +57,7 @@ export function RecordListView() {
// Request new search results whenever search or pagination changes
useEffect(() => {
- const requestParams = initRequestParams(pagination);
+ const requestParams = initRequestParams({ pagination });
getRecords({
pvStatus: recordFilter,
text: searchParams.get("query") || "",
--
GitLab