{row.name}
-
- {row.process_id && (
- {row.process_name}
-
- )}
-
-
-
-
- {row.last_failover && (
-
+
{isHalted && (
-
+
)}
-
+
diff --git a/src/Slices/Agents/UI/Components/ActionButton.tsx b/src/Slices/Agents/UI/Components/ActionButton.tsx
index 76847b9ff..e72e66868 100644
--- a/src/Slices/Agents/UI/Components/ActionButton.tsx
+++ b/src/Slices/Agents/UI/Components/ActionButton.tsx
@@ -44,6 +44,7 @@ export const ActionButton: React.FC = ({ name, paused }) => {
diff --git a/src/Slices/Agents/UI/Components/StatusLabel.tsx b/src/Slices/Agents/UI/Components/AgentStatusLabel.tsx
similarity index 53%
rename from src/Slices/Agents/UI/Components/StatusLabel.tsx
rename to src/Slices/Agents/UI/Components/AgentStatusLabel.tsx
index d0081a57e..419d067a4 100644
--- a/src/Slices/Agents/UI/Components/StatusLabel.tsx
+++ b/src/Slices/Agents/UI/Components/AgentStatusLabel.tsx
@@ -1,29 +1,26 @@
import React from "react";
import { Label } from "@patternfly/react-core";
-import {
- CheckCircleIcon,
- ExclamationCircleIcon,
- PauseCircleIcon,
-} from "@patternfly/react-icons";
import { AgentStatus } from "@S/Agents/Core/Domain";
-export const StatusLabel: React.FC<{ status: AgentStatus }> = ({ status }) => {
+export const AgentStatusLabel: React.FC<{ status: AgentStatus }> = ({
+ status,
+}) => {
switch (status) {
case AgentStatus.up:
return (
-
{status}
);
case AgentStatus.down:
return (
-
{status}
);
case AgentStatus.paused:
return (
-
{status}
);
diff --git a/src/Slices/Agents/UI/Components/KebabDropdown.tsx b/src/Slices/Agents/UI/Components/KebabDropdown.tsx
index 5fe5fca88..96dff63b4 100644
--- a/src/Slices/Agents/UI/Components/KebabDropdown.tsx
+++ b/src/Slices/Agents/UI/Components/KebabDropdown.tsx
@@ -33,9 +33,8 @@ export const KebabDropdown: React.FC = ({ name, paused }) => {
variant="plain"
onClick={onToggleClick}
isExpanded={isOpen}
- >
- = ({ filter, setFilter }) => {
const updateName = (names: string[]) =>
setFilter({ ...filter, name: names.length > 0 ? names : undefined });
- const updateProcessName = (processNames: string[]) => {
- setFilter({
- ...filter,
- process_name: processNames.length > 0 ? processNames : undefined,
- });
- };
-
const agentStatuses = Object.keys(AgentStatus).map((k) => AgentStatus[k]);
const updateStatus = (selectedStatuses: string[]) =>
@@ -46,7 +38,7 @@ export const AgentsFilterWidget: React.FC = ({ filter, setFilter }) => {
= ({ filter, setFilter }) => {
update={updateName}
placeholder={words("agents.filters.name.placeholder")}
/>
- = ({ errors }) => (
-
- {errors.map((compileError, idx) => (
- <>
-
-
- {words("compileDetails.errors.type")}
-
-
- {compileError.type}
-
-
-
-
- {words("compileDetails.errors.message")}
-
-
- {compileError.message}
-
-
-
- ))}
+
+ {errors.map((compileError, idx) => [
+
+
+ {words("compileDetails.errors.type")}
+
+
+ {compileError.type}
+
+ ,
+
+
+ {words("compileDetails.errors.message")}
+
+
+ {compileError.message}
+
+ ,
+ ])}
);
diff --git a/src/Slices/CompileDetails/UI/CompileStageReportTable.tsx b/src/Slices/CompileDetails/UI/CompileStageReportTable.tsx
index ae002b0ab..71f3c8314 100644
--- a/src/Slices/CompileDetails/UI/CompileStageReportTable.tsx
+++ b/src/Slices/CompileDetails/UI/CompileStageReportTable.tsx
@@ -1,12 +1,7 @@
import React from "react";
-import {
- Table /* data-codemods */,
- TableVariant,
- Th,
- Thead,
- Tr,
-} from "@patternfly/react-table";
+import { Table, TableVariant, Th, Thead, Tr } from "@patternfly/react-table";
import { useExpansion } from "@/Data";
+import { words } from "@/UI";
import { MomentDatePresenter } from "@/UI/Utils";
import { CompileStageReport } from "@S/CompileDetails/Core/Domain";
import { CompileStageReportTablePresenter } from "./CompileStageReportTablePresenter";
@@ -37,7 +32,11 @@ export const CompileStageReportTable: React.FC = ({
-
diff --git a/src/Slices/CompileDetails/UI/CompileStageReportTableRow.tsx b/src/Slices/CompileDetails/UI/CompileStageReportTableRow.tsx
index 267a35988..a00899075 100644
--- a/src/Slices/CompileDetails/UI/CompileStageReportTableRow.tsx
+++ b/src/Slices/CompileDetails/UI/CompileStageReportTableRow.tsx
@@ -4,9 +4,10 @@ import {
DescriptionListDescription,
DescriptionListGroup,
DescriptionListTerm,
+ Icon,
} from "@patternfly/react-core";
+import { ExclamationCircleIcon } from "@patternfly/react-icons";
import { Td, Tr, Tbody } from "@patternfly/react-table";
-import styled from "styled-components";
import { CodeHighlighter } from "@/UI/Components";
import { words } from "@/UI/words";
import { CompileStageReportRow } from "@S/CompileDetails/Core/Domain";
@@ -26,15 +27,13 @@ export const CompileStageReportTableRow: React.FC = ({
numberOfColumns,
index,
}) => {
+ const failed =
+ row.returncode !== null &&
+ row.returncode !== undefined &&
+ row.returncode !== 0;
+
return (
-
+
= ({
}}
/>
+ {failed && (
+
+
+ )}{" "}
{row.name}
{row.shortCommand}
-
+
{row.startDelay}
-
+
{row.duration}
-
+
{words("compileDetails.stages.columns.command")}
@@ -105,21 +122,9 @@ export const CompileStageReportTableRow: React.FC = ({
/>
-
+
-
+
);
};
-
-const StyledBody = styled(Tbody)<{
- $failed?: boolean;
-}>`
- ${({ $failed }) =>
- $failed ? "background-color: var(--pf-v5-global--palette--red-50)" : ""};
-`;
-
-const PaddedDescriptionList = styled(DescriptionList)`
- padding-bottom: 1em;
- padding-top: 1em;
-`;
diff --git a/src/Slices/CompileDetails/UI/StatusSection.tsx b/src/Slices/CompileDetails/UI/StatusSection.tsx
index c28ff7831..52ce5b0bc 100644
--- a/src/Slices/CompileDetails/UI/StatusSection.tsx
+++ b/src/Slices/CompileDetails/UI/StatusSection.tsx
@@ -1,5 +1,6 @@
import React from "react";
import {
+ Bullseye,
CodeBlock,
CodeBlockCode,
DescriptionList,
@@ -8,12 +9,12 @@ import {
DescriptionListTerm,
Flex,
FlexItem,
+ Icon,
} from "@patternfly/react-core";
import {
CheckCircleIcon,
ExclamationCircleIcon,
} from "@patternfly/react-icons";
-import styled from "styled-components";
import { Timeline } from "@/UI/Components/Timeline";
import { words } from "@/UI/words";
import { CompileDetails } from "@S/CompileDetails/Core/Domain";
@@ -34,19 +35,23 @@ interface Props {
export const StatusSection: React.FC = ({ compileDetails }) => {
return (
- <>
-
-
+
+
+
-
-
- <>
+
+
+
+
{words("compileDetails.status.export")}
@@ -69,9 +74,13 @@ export const StatusSection: React.FC = ({ compileDetails }) => {
{compileDetails.success ? (
-
+
) : compileDetails.success === false ? (
-
+
) : (
""
)}
@@ -85,7 +94,7 @@ export const StatusSection: React.FC = ({ compileDetails }) => {
{compileDetails.metadata["message"] as string}
- {compileDetails.metadata["type"] && (
+ {compileDetails.metadata["type"] ? (
{words("compileDetails.status.trigger")}
@@ -94,39 +103,31 @@ export const StatusSection: React.FC = ({ compileDetails }) => {
{compileDetails.metadata["type"] as string}
+ ) : (
+ ""
)}
-
-
-
-
-
- {words("compileDetails.status.envVars")}
-
-
-
-
- {JSON.stringify(compileDetails.environment_variables, null, 2)}
-
-
-
-
-
-
+
+
+
+
+
+
+ {words("compileDetails.status.envVars")}
+
+
+
+
+ {JSON.stringify(
+ compileDetails.environment_variables,
+ null,
+ 2,
+ )}
+
+
+
+
+
+
+
);
};
-
-const StyledFlex = styled(Flex)`
- padding-bottom: 2em;
-`;
-
-const StyledList = styled(DescriptionList)`
- padding-top: 1em;
-`;
-
-const GreenCheckCircle = styled(CheckCircleIcon)`
- color: var(--pf-v5-global--success-color--100);
-`;
-
-const RedExclamationCircle = styled(ExclamationCircleIcon)`
- color: var(--pf-v5-global--danger-color--100);
-`;
diff --git a/src/Slices/CompileReports/UI/CompileReportsTable.tsx b/src/Slices/CompileReports/UI/CompileReportsTable.tsx
index 3dac77cbb..5cb66b0c1 100644
--- a/src/Slices/CompileReports/UI/CompileReportsTable.tsx
+++ b/src/Slices/CompileReports/UI/CompileReportsTable.tsx
@@ -1,7 +1,7 @@
import React from "react";
import {
OnSort,
- Table /* data-codemods */,
+ Table,
TableVariant,
Th,
Thead,
@@ -56,7 +56,7 @@ export const CompileReportsTable: React.FC = ({
return (
-
+
{heads}
{rows.map((row) => (
diff --git a/src/Slices/CompileReports/UI/CompileReportsTableRow.tsx b/src/Slices/CompileReports/UI/CompileReportsTableRow.tsx
index b74b6fac2..9547878f5 100644
--- a/src/Slices/CompileReports/UI/CompileReportsTableRow.tsx
+++ b/src/Slices/CompileReports/UI/CompileReportsTableRow.tsx
@@ -2,12 +2,11 @@ import React, { useContext } from "react";
import { Link } from "react-router-dom";
import { Button } from "@patternfly/react-core";
import { Tbody, Td, Tr } from "@patternfly/react-table";
-import styled from "styled-components";
import { DateWithTooltip } from "@/UI/Components";
import { DependencyContext } from "@/UI/Dependency";
import { words } from "@/UI/words";
import { CompileReportRow } from "@S/CompileReports/Core/Domain";
-import { StatusLabel } from "./Components";
+import { CompileStatusLabel } from "./Components";
interface Props {
row: CompileReportRow;
@@ -19,12 +18,15 @@ export const CompileReportsTableRow: React.FC = ({ row }) => {
return (
-
+
-
-
+
+
{row.message}
@@ -52,9 +54,3 @@ export const CompileReportsTableRow: React.FC = ({ row }) => {
);
};
-
-const StyledCell = styled(Td)`
- && {
- width: 120px;
- }
-`;
diff --git a/src/Slices/CompileReports/UI/Components/CompileStatusLabel.tsx b/src/Slices/CompileReports/UI/Components/CompileStatusLabel.tsx
new file mode 100644
index 000000000..daa42f325
--- /dev/null
+++ b/src/Slices/CompileReports/UI/Components/CompileStatusLabel.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import { Label, Spinner } from "@patternfly/react-core";
+import { InfoAltIcon } from "@patternfly/react-icons";
+import { CompileStatus } from "@/Core";
+
+/**
+ * CompileStatusLabel component
+ *
+ * When a compile is in progress, the status is displayed with a spinner
+ * When a compile is successful, the status is displayed with a success color
+ * When a compile has failed, the status is displayed with a danger color
+ * When a compile is queued, the status is displayed with an info color
+ *
+ * @param {CompileStatus} status - Status of the compile
+ * @returns A React Component rendering a Label with the status of the compile
+ */
+export const CompileStatusLabel: React.FC<{ status: CompileStatus }> = ({
+ status,
+}) => {
+ switch (status) {
+ case CompileStatus.success:
+ return (
+
+ {status}
+
+ );
+ case CompileStatus.failed:
+ return (
+
+ {status}
+
+ );
+ case CompileStatus.inprogress:
+ return (
+ {status} ;
- case CompileStatus.failed:
- return {status} ;
- case CompileStatus.inprogress:
- return (
-
- {status}
-
- );
- case CompileStatus.queued:
- return {status} ;
- }
-};
-
-const PaddedLabel = styled.span`
- padding-right: 1ch;
-`;
diff --git a/src/Slices/CompileReports/UI/Components/index.ts b/src/Slices/CompileReports/UI/Components/index.ts
index f147c7cb7..db2b1596d 100644
--- a/src/Slices/CompileReports/UI/Components/index.ts
+++ b/src/Slices/CompileReports/UI/Components/index.ts
@@ -1 +1 @@
-export * from "./StatusLabel";
+export * from "./CompileStatusLabel";
diff --git a/src/Slices/CompileReports/UI/FilterWidget/StatusFilter.tsx b/src/Slices/CompileReports/UI/FilterWidget/StatusFilter.tsx
index 19a9bbc60..7454f0904 100644
--- a/src/Slices/CompileReports/UI/FilterWidget/StatusFilter.tsx
+++ b/src/Slices/CompileReports/UI/FilterWidget/StatusFilter.tsx
@@ -25,10 +25,10 @@ export const StatusFilter: React.FC = ({
return (
{
- await userEvent.click(
- within(screen.getByRole("toolbar", { name: "FilterBar" })).getByRole(
- "button",
- { name: "FilterPicker" },
- ),
- );
- });
+ await userEvent.click(
+ within(screen.getByRole("toolbar", { name: "FilterBar" })).getByRole(
+ "button",
+ { name: "FilterPicker" },
+ ),
+ );
const input = screen.getByPlaceholderText(
words("compileReports.filters.status.placeholder"),
);
- await act(async () => {
- await userEvent.click(input);
- });
+ await userEvent.click(input);
const option = await screen.findByRole("option", {
name: words("compileReports.filters.test.success"),
});
- await act(async () => {
- await userEvent.click(option);
- });
+ await userEvent.click(option);
expect(apiHelper.pendingRequests[0].url).toEqual(
`/api/v2/compilereport?limit=20&sort=requested.desc&filter.success=true`,
@@ -307,37 +301,30 @@ test("When using the status filter with the In Progress opiton then the compile
expect(initialRows).toHaveLength(8);
- await act(async () => {
- await userEvent.click(
- within(screen.getByRole("toolbar", { name: "FilterBar" })).getByRole(
- "button",
- { name: "FilterPicker" },
- ),
- );
- });
- await act(async () => {
- await userEvent.click(
- screen.getByRole("option", {
- name: words("compileReports.columns.status"),
- }),
- );
- });
+ await userEvent.click(
+ within(screen.getByRole("toolbar", { name: "FilterBar" })).getByRole(
+ "button",
+ { name: "FilterPicker" },
+ ),
+ );
+
+ await userEvent.click(
+ screen.getByRole("option", {
+ name: words("compileReports.columns.status"),
+ }),
+ );
const input = screen.getByPlaceholderText(
words("compileReports.filters.status.placeholder"),
);
- await act(async () => {
- await userEvent.click(input);
- });
+ await userEvent.click(input);
const option = await screen.findByRole("option", {
name: words("compileReports.tests.filters.result.inProgress"),
});
- await act(async () => {
- await userEvent.click(option);
- });
+ await userEvent.click(option);
expect(apiHelper.pendingRequests[0].url).toEqual(
`/api/v2/compilereport?limit=20&sort=requested.desc&filter.started=true&filter.completed=false`,
@@ -384,40 +371,28 @@ it("When using the Date filter then the compile reports within the range selecte
expect(initialRows).toHaveLength(8);
- await act(async () => {
- await userEvent.click(
- within(screen.getByRole("toolbar", { name: "FilterBar" })).getByRole(
- "button",
- { name: "FilterPicker" },
- ),
- );
- });
- await act(async () => {
- await userEvent.click(
- screen.getByRole("option", {
- name: words("compileReports.columns.requested"),
- }),
- );
- });
+ await userEvent.click(
+ within(screen.getByRole("toolbar", { name: "FilterBar" })).getByRole(
+ "button",
+ { name: "FilterPicker" },
+ ),
+ );
+
+ await userEvent.click(
+ screen.getByRole("option", {
+ name: words("compileReports.columns.requested"),
+ }),
+ );
const fromDatePicker = await screen.findByLabelText("From Date Picker");
- await act(async () => {
- await userEvent.click(fromDatePicker);
- });
- await act(async () => {
- await userEvent.type(fromDatePicker, "2021-09-28");
- });
+ await userEvent.type(fromDatePicker, "2021-09-28");
const toDatePicker = await screen.findByLabelText("To Date Picker");
- await act(async () => {
- await userEvent.click(toDatePicker);
- await userEvent.type(toDatePicker, "2021-09-30");
- });
- await act(async () => {
- await userEvent.click(await screen.findByLabelText("Apply date filter"));
- });
+ await userEvent.type(toDatePicker, "2021-09-30");
+
+ await userEvent.click(await screen.findByLabelText("Apply date filter"));
expect(apiHelper.pendingRequests[0].url).toMatch(
`/api/v2/compilereport?limit=20&sort=requested.desc&filter.requested=ge%3A2021-09-`,
@@ -481,9 +456,7 @@ test("Given CompileReportsView When recompile is triggered Then table is updated
expect(results).toHaveNoViolations();
});
- await act(async () => {
- await userEvent.click(button);
- });
+ await userEvent.click(button);
await act(async () => {
await apiHelper.resolve(Either.right({}));
@@ -531,9 +504,7 @@ test("GIVEN CompileReportsView WHEN sorting changes AND we are not on the first
expect(screen.getByLabelText("Go to next page")).toBeEnabled();
- await act(async () => {
- await userEvent.click(screen.getByLabelText("Go to next page"));
- });
+ await userEvent.click(screen.getByLabelText("Go to next page"));
//expect the api url to contain start and end keywords that are used for pagination when we are moving to the next page
expect(apiHelper.pendingRequests[0].url).toMatch(/(&start=|&end=)/);
@@ -562,9 +533,7 @@ test("GIVEN CompileReportsView WHEN sorting changes AND we are not on the first
expect(resourceIdButton).toBeVisible();
- await act(async () => {
- await userEvent.click(resourceIdButton);
- });
+ await userEvent.click(resourceIdButton);
// expect the api url to not contain start and end keywords that are used for pagination to assert we are back on the first page.
// we are asserting on the second request as the first request is for the updated sorting event, and second is chained to back to the first page with still correct sorting
diff --git a/src/Slices/ComplianceCheck/UI/Components/SelectReportAction.tsx b/src/Slices/ComplianceCheck/UI/Components/SelectReportAction.tsx
index 44aefa15a..dc2c1a3da 100644
--- a/src/Slices/ComplianceCheck/UI/Components/SelectReportAction.tsx
+++ b/src/Slices/ComplianceCheck/UI/Components/SelectReportAction.tsx
@@ -9,8 +9,6 @@ import {
Spinner,
ToolbarGroup,
} from "@patternfly/react-core";
-import { global_Color_100 } from "@patternfly/react-tokens";
-import styled from "styled-components";
import { Maybe, RemoteData } from "@/Core";
import { MomentDatePresenter } from "@/UI/Utils";
import { Progress as DomainProgress } from "@S/ComplianceCheck/Core/Domain";
@@ -42,7 +40,7 @@ export const SelectReportAction: React.FC = ({
};
return (
-
+
= ({ report }) => {
}, [tot, current, report.total, report.todo, done]);
return done ? (
-
+
{current} / {tot}
-
+
) : (
-
-
+ = ({
};
return (
-
+
-
+
-
-
- (
- <>
- {data.summary.todo > 0 && (
-
- statuses.includes(resource.status) &&
- resource.resource_id
- .toLocaleLowerCase()
- .includes(searchFilter.toLocaleLowerCase()),
- )
- .map(DiffWizard.fromResourceToItem)}
- refs={refs}
- />
- )}
-
- )}
- />
-
+
+ (
+ <>
+ {data.summary.todo > 0 && (
+
+ statuses.includes(resource.status) &&
+ resource.resource_id
+ .toLocaleLowerCase()
+ .includes(searchFilter.toLocaleLowerCase()),
+ )
+ .map(DiffWizard.fromResourceToItem)}
+ refs={refs}
+ />
+ )}
+
+ )}
+ />
);
diff --git a/src/Slices/ComplianceCheck/UI/Page.test.tsx b/src/Slices/ComplianceCheck/UI/Page.test.tsx
index f6fd35864..cfb029858 100644
--- a/src/Slices/ComplianceCheck/UI/Page.test.tsx
+++ b/src/Slices/ComplianceCheck/UI/Page.test.tsx
@@ -74,9 +74,7 @@ test("GIVEN ComplianceCheck page THEN user sees latest dry run report", async ()
datePresenter.getFull(Mock.listResponse.data[0].date),
);
- await act(async () => {
- await userEvent.click(select);
- });
+ await userEvent.click(select);
const options = screen.getAllByRole("option");
@@ -133,9 +131,7 @@ test("GIVEN ComplianceCheck page When a report is selected from the list THEN th
// Also verify that the option shows the selected icon
const select = screen.getByRole("button", { name: "ReportListSelect" });
- await act(async () => {
- await userEvent.click(select);
- });
+ await userEvent.click(select);
const options = screen.getAllByRole("option");
@@ -143,9 +139,8 @@ test("GIVEN ComplianceCheck page When a report is selected from the list THEN th
expect(options[0]).toHaveAttribute("aria-selected", "true");
// Select a different report
- await act(async () => {
- await userEvent.click(options[1]);
- });
+ await userEvent.click(options[1]);
+
// Verify the request
expect(apiHelper.pendingRequests).toHaveLength(1);
expect(apiHelper.pendingRequests[0]).toEqual({
@@ -157,18 +152,15 @@ test("GIVEN ComplianceCheck page When a report is selected from the list THEN th
await apiHelper.resolve(Either.right(Mock.reportResponse));
});
// Verify that it's selected
- await act(async () => {
- await userEvent.click(select);
- });
+ await userEvent.click(select);
expect(screen.getAllByRole("option")[1]).toHaveAttribute(
"aria-selected",
"true",
);
// Go back to the first one
- await act(async () => {
- await userEvent.click(screen.getAllByRole("option")[0]);
- });
+ await userEvent.click(screen.getAllByRole("option")[0]);
+
// Verify the request
expect(apiHelper.pendingRequests).toHaveLength(1);
expect(apiHelper.pendingRequests[0]).toEqual({
@@ -180,9 +172,7 @@ test("GIVEN ComplianceCheck page When a report is selected from the list THEN th
await apiHelper.resolve(Either.right(Mock.reportResponse));
});
// Verify that it's selected
- await act(async () => {
- await userEvent.click(select);
- });
+ await userEvent.click(select);
expect(screen.getAllByRole("option")[0]).toHaveAttribute(
"aria-selected",
@@ -213,9 +203,7 @@ test("GIVEN ComplianceCheck page WHEN user clicks on 'Perform dry run' THEN new
name: words("desiredState.complianceCheck.action.dryRun"),
});
- await act(async () => {
- await userEvent.click(dryRunButton);
- });
+ await userEvent.click(dryRunButton);
expect(apiHelper.pendingRequests).toHaveLength(1);
expect(apiHelper.pendingRequests[0]).toEqual({
@@ -245,9 +233,7 @@ test("GIVEN ComplianceCheck page WHEN user clicks on 'Perform dry run' THEN new
expect(select).toBeInTheDocument();
expect(select).toHaveTextContent(datePresenter.getFull(Mock.a.date));
- await act(async () => {
- await userEvent.click(select);
- });
+ await userEvent.click(select);
const options = screen.getAllByRole("option");
@@ -275,14 +261,10 @@ test("GIVEN ComplianceCheck page WHEN StatusFilter = 'Added' THEN only 'Added' r
await apiHelper.resolve(Either.right(Mock.reportResponse));
});
- await act(async () => {
- await userEvent.click(
- screen.getByRole("button", { name: words("jumpTo") }),
- );
- });
+ await userEvent.click(screen.getByRole("button", { name: words("jumpTo") }));
expect(
- screen.getAllByRole("listitem", { name: "DiffSummaryListItem" }),
+ screen.getAllByRole("menuitem", { name: "DiffSummaryListItem" }),
).toHaveLength(11);
await act(async () => {
@@ -297,9 +279,7 @@ test("GIVEN ComplianceCheck page WHEN StatusFilter = 'Added' THEN only 'Added' r
screen.queryByRole("listbox", { name: "StatusFilterOptions" }),
).not.toBeInTheDocument();
- await act(async () => {
- await userEvent.click(screen.getByRole("button", { name: "StatusFilter" }));
- });
+ await userEvent.click(screen.getByRole("button", { name: "StatusFilter" }));
expect(
screen.getByRole("listbox", { name: "StatusFilterOptions" }),
@@ -308,27 +288,19 @@ test("GIVEN ComplianceCheck page WHEN StatusFilter = 'Added' THEN only 'Added' r
const statusOptions = screen.getAllByRole("option");
expect(statusOptions).toHaveLength(7);
- await act(async () => {
- await userEvent.click(
- screen.getByRole("button", { name: words("showAll") }),
- );
- });
- await act(async () => {
- await userEvent.click(
- screen.getByRole("button", { name: words("hideAll") }),
- );
- });
+
+ await userEvent.click(screen.getByRole("button", { name: words("showAll") }));
+
+ await userEvent.click(screen.getByRole("button", { name: words("hideAll") }));
+
await act(async () => {
await userEvent.click(statusOptions[0]);
});
- await act(async () => {
- await userEvent.click(
- screen.getByRole("button", { name: words("jumpTo") }),
- );
- });
+ await userEvent.click(screen.getByRole("button", { name: words("jumpTo") }));
+
expect(
- await screen.findAllByRole("listitem", { name: "DiffSummaryListItem" }),
+ await screen.findAllByRole("menuitem", { name: "DiffSummaryListItem" }),
).toHaveLength(2);
expect(await screen.findAllByTestId("DiffBlock")).toHaveLength(2);
@@ -353,11 +325,7 @@ test("GIVEN ComplianceCheck page WHEN SearchFilter is used, ONLY show the resour
await apiHelper.resolve(Either.right(Mock.reportResponse));
});
- await act(async () => {
- await userEvent.click(
- screen.getByRole("button", { name: words("jumpTo") }),
- );
- });
+ await userEvent.click(screen.getByRole("button", { name: words("jumpTo") }));
await act(async () => {
const results = await axe(document.body);
@@ -366,34 +334,28 @@ test("GIVEN ComplianceCheck page WHEN SearchFilter is used, ONLY show the resour
});
expect(
- screen.getAllByRole("listitem", { name: "DiffSummaryListItem" }),
+ screen.getAllByRole("menuitem", { name: "DiffSummaryListItem" }),
).toHaveLength(11);
expect(await screen.findAllByTestId("DiffBlock")).toHaveLength(11);
- await act(async () => {
- await userEvent.type(
- screen.getByRole("searchbox", { name: "SearchFilter" }),
- "lsm",
- );
- });
+ await userEvent.type(
+ screen.getByRole("searchbox", { name: "SearchFilter" }),
+ "lsm",
+ );
expect(await screen.findAllByTestId("DiffBlock")).toHaveLength(10);
- await act(async () => {
- await userEvent.type(
- screen.getByRole("searchbox", { name: "SearchFilter" }),
- "44554",
- );
- });
+ await userEvent.type(
+ screen.getByRole("searchbox", { name: "SearchFilter" }),
+ "44554",
+ );
expect(screen.queryAllByTestId("DiffBlock")).toHaveLength(0);
- await act(async () => {
- await userEvent.clear(
- screen.getByRole("searchbox", { name: "SearchFilter" }),
- );
- });
+ await userEvent.clear(
+ screen.getByRole("searchbox", { name: "SearchFilter" }),
+ );
expect(await screen.findAllByTestId("DiffBlock")).toHaveLength(11);
diff --git a/src/Slices/ComplianceCheck/UI/Page.tsx b/src/Slices/ComplianceCheck/UI/Page.tsx
index 8322cb614..d9ddd17c4 100644
--- a/src/Slices/ComplianceCheck/UI/Page.tsx
+++ b/src/Slices/ComplianceCheck/UI/Page.tsx
@@ -1,8 +1,12 @@
import React, { useContext, useEffect, useRef, useState } from "react";
-import { PageSection, Toolbar, ToolbarContent } from "@patternfly/react-core";
-import styled from "styled-components";
+import {
+ Content,
+ PageSection,
+ Toolbar,
+ ToolbarContent,
+} from "@patternfly/react-core";
import { Diff, Maybe, RemoteData } from "@/Core";
-import { DiffWizard, ToastAlert, PageTitle } from "@/UI/Components";
+import { DiffWizard, ToastAlert } from "@/UI/Components";
import { DependencyContext } from "@/UI/Dependency";
import { useRouteParams } from "@/UI/Routing";
import { words } from "@/UI/words";
@@ -101,11 +105,15 @@ export const View: React.FC = ({ version }) => {
message={errorMessage}
setMessage={setErrorMessage}
/>
-
- {words("desiredState.complianceCheck.title")}
-
-
-
+
+
+
+ {words("desiredState.complianceCheck.title")}
+
+
+
+
+
= ({ version }) => {
/>
-
+
= ({ version }) => {
);
};
-
-const StyledPageSection = styled(PageSection)`
- padding-bottom: 0;
-`;
-
-const ToolBarContainer = styled(Toolbar)`
- z-index: var(--pf-v5-global--ZIndex--xl);
-`;
diff --git a/src/Slices/CreateEnvironment/UI/CreateEnvironmentForm.test.tsx b/src/Slices/CreateEnvironment/UI/CreateEnvironmentForm.test.tsx
index ba74abe67..7bb77e9b4 100644
--- a/src/Slices/CreateEnvironment/UI/CreateEnvironmentForm.test.tsx
+++ b/src/Slices/CreateEnvironment/UI/CreateEnvironmentForm.test.tsx
@@ -97,27 +97,19 @@ test("Given CreateEnvironmentForm When no projects are known, THEN cannot add em
name: "Project Name-select-toggleFilterInput",
});
- await act(async () => {
- await userEvent.click(inputProject);
- });
+ await userEvent.click(inputProject);
expect(screen.queryByRole("option")).not.toBeInTheDocument();
- await act(async () => {
- await userEvent.type(inputProject, " ");
- });
+ await userEvent.type(inputProject, " ");
expect(screen.queryByRole("option")).not.toBeInTheDocument();
- await act(async () => {
- await userEvent.clear(inputProject);
- });
+ await userEvent.clear(inputProject);
expect(screen.queryByRole("option")).not.toBeInTheDocument();
- await act(async () => {
- await userEvent.type(inputProject, "test");
- });
+ await userEvent.type(inputProject, "test");
expect(screen.getByRole("option")).toBeInTheDocument();
@@ -140,27 +132,21 @@ test(`Given CreateEnvironmentForm When an existing project and valid environment
);
});
- await act(async () => {
- await userEvent.click(
- await screen.findByRole("combobox", {
- name: "Project Name-select-toggleFilterInput",
- }),
- );
- });
- await act(async () => {
- await userEvent.click(
- await screen.findByRole("option", { name: Project.filterable[0].name }),
- );
- });
+ await userEvent.click(
+ await screen.findByRole("combobox", {
+ name: "Project Name-select-toggleFilterInput",
+ }),
+ );
+
+ await userEvent.click(
+ await screen.findByRole("option", { name: Project.filterable[0].name }),
+ );
const textBox = await screen.findByRole("textbox", { name: "Name-input" });
- await act(async () => {
- await userEvent.clear(textBox);
- });
- await act(async () => {
- await userEvent.type(textBox, `dev{enter}`);
- });
+ await userEvent.clear(textBox);
+
+ await userEvent.type(textBox, `dev{enter}`);
await act(async () => {
const results = await axe(document.body);
@@ -168,11 +154,7 @@ test(`Given CreateEnvironmentForm When an existing project and valid environment
expect(results).toHaveNoViolations();
});
- await act(async () => {
- await userEvent.click(
- await screen.findByRole("button", { name: "submit" }),
- );
- });
+ await userEvent.click(await screen.findByRole("button", { name: "submit" }));
expect(apiHelper.pendingRequests).toHaveLength(1);
expect(apiHelper.pendingRequests[0]).toEqual({
@@ -198,27 +180,20 @@ test(`Given CreateEnvironmentForm When an existing project, a valid environment
);
});
- await act(async () => {
- await userEvent.click(
- await screen.findByRole("combobox", {
- name: "Project Name-select-toggleFilterInput",
- }),
- );
- });
- await act(async () => {
- await userEvent.click(
- await screen.findByRole("option", { name: Project.filterable[0].name }),
- );
- });
+ await userEvent.click(
+ await screen.findByRole("combobox", {
+ name: "Project Name-select-toggleFilterInput",
+ }),
+ );
+
+ await userEvent.click(
+ await screen.findByRole("option", { name: Project.filterable[0].name }),
+ );
const textBox = await screen.findByRole("textbox", { name: "Name-input" });
- await act(async () => {
- await userEvent.clear(textBox);
- });
- await act(async () => {
- await userEvent.type(textBox, `dev{enter}`);
- });
+ await userEvent.clear(textBox);
+ await userEvent.type(textBox, `dev{enter}`);
const repository = "github.com/test-env";
const branch = "dev";
@@ -226,22 +201,15 @@ test(`Given CreateEnvironmentForm When an existing project, a valid environment
name: "Branch-input",
});
- await act(async () => {
- await userEvent.clear(branchTextBox);
- });
- await act(async () => {
- await userEvent.type(branchTextBox, branch);
- });
+ await userEvent.clear(branchTextBox);
+ await userEvent.type(branchTextBox, branch);
+
const urlTextBox = await screen.findByRole("textbox", {
name: "Repository-input",
});
- await act(async () => {
- await userEvent.clear(urlTextBox);
- });
- await act(async () => {
- await userEvent.type(urlTextBox, repository);
- });
+ await userEvent.clear(urlTextBox);
+ await userEvent.type(urlTextBox, repository);
await act(async () => {
const results = await axe(document.body);
@@ -249,11 +217,7 @@ test(`Given CreateEnvironmentForm When an existing project, a valid environment
expect(results).toHaveNoViolations();
});
- await act(async () => {
- await userEvent.click(
- await screen.findByRole("button", { name: "submit" }),
- );
- });
+ await userEvent.click(await screen.findByRole("button", { name: "submit" }));
expect(apiHelper.pendingRequests).toHaveLength(1);
@@ -274,7 +238,9 @@ test(`Given CreateEnvironmentForm When an existing project, a valid environment
test(`Given CreateEnvironmentForm When a new project and valid environment are set and submit is clicked Then sends the correct requests`, async () => {
const { component, apiHelper } = setup();
- render(component);
+ await act(async () => {
+ render(component);
+ });
await act(async () => {
apiHelper.resolve(
@@ -284,26 +250,22 @@ test(`Given CreateEnvironmentForm When a new project and valid environment are s
);
});
- await act(async () => {
- await userEvent.click(
- await screen.findByRole("combobox", {
- name: "Project Name-select-toggleFilterInput",
- }),
- );
- });
- await act(async () => {
- await userEvent.type(
- await screen.findByRole("combobox", {
- name: "Project Name-select-toggleFilterInput",
- }),
- "new-project",
- );
- });
- await act(async () => {
- await userEvent.click(
- screen.getByRole("option", { name: 'Create "new-project"' }),
- );
- });
+ await userEvent.click(
+ await screen.findByRole("combobox", {
+ name: "Project Name-select-toggleFilterInput",
+ }),
+ );
+
+ await userEvent.type(
+ await screen.findByRole("combobox", {
+ name: "Project Name-select-toggleFilterInput",
+ }),
+ "new-project",
+ );
+
+ await userEvent.click(
+ await screen.findByRole("option", { name: 'Create "new-project"' }),
+ );
await act(async () => {
const results = await axe(document.body);
@@ -320,9 +282,11 @@ test(`Given CreateEnvironmentForm When a new project and valid environment are s
},
url: `/api/v2/project`,
});
+
await act(async () => {
await apiHelper.resolve(Either.right({ data: Project.a }));
});
+
expect(apiHelper.resolvedRequests).toHaveLength(2);
const updatedProjects = [
...Project.filterable,
@@ -335,17 +299,10 @@ test(`Given CreateEnvironmentForm When a new project and valid environment are s
const textBox = await screen.findByRole("textbox", { name: "Name-input" });
- await act(async () => {
- await userEvent.clear(textBox);
- });
- await act(async () => {
- await userEvent.type(textBox, `dev{enter}`);
- });
- await act(async () => {
- await userEvent.click(
- await screen.findByRole("button", { name: "submit" }),
- );
- });
+ await userEvent.clear(textBox);
+ await userEvent.type(textBox, `dev{enter}`);
+
+ await userEvent.click(await screen.findByRole("button", { name: "submit" }));
expect(apiHelper.pendingRequests).toHaveLength(1);
@@ -382,26 +339,23 @@ test("Given CreateEnvironmentForm When creating a new project is not successful
}),
);
});
- await act(async () => {
- await userEvent.click(
- await screen.findByRole("combobox", {
- name: "Project Name-select-toggleFilterInput",
- }),
- );
- });
- await act(async () => {
- await userEvent.type(
- await screen.findByRole("combobox", {
- name: "Project Name-select-toggleFilterInput",
- }),
- "new-project",
- );
- });
- await act(async () => {
- await userEvent.click(
- screen.getByRole("option", { name: 'Create "new-project"' }),
- );
- });
+
+ await userEvent.click(
+ await screen.findByRole("combobox", {
+ name: "Project Name-select-toggleFilterInput",
+ }),
+ );
+
+ await userEvent.type(
+ await screen.findByRole("combobox", {
+ name: "Project Name-select-toggleFilterInput",
+ }),
+ "new-project",
+ );
+
+ await userEvent.click(
+ screen.getByRole("option", { name: 'Create "new-project"' }),
+ );
const request = apiHelper.pendingRequests[0];
@@ -423,11 +377,9 @@ test("Given CreateEnvironmentForm When creating a new project is not successful
await screen.findByRole("generic", { name: "Project Name-error-message" }),
).toBeVisible();
- await act(async () => {
- await userEvent.click(
- screen.getByRole("button", { name: "Project Name-close-error" }),
- );
- });
+ await userEvent.click(
+ screen.getByRole("button", { name: "Project Name-close-error" }),
+ );
expect(
screen.queryByRole("generic", { name: "Project Name-error-message" }),
@@ -449,34 +401,23 @@ test(`Given CreateEnvironmentForm When an existing project and invalid environme
});
// Input data
- await act(async () => {
- await userEvent.click(
- await screen.findByRole("combobox", {
- name: "Project Name-select-toggleFilterInput",
- }),
- );
- });
- await act(async () => {
- await userEvent.click(
- await screen.findByRole("option", { name: Project.filterable[0].name }),
- );
- });
+ await userEvent.click(
+ await screen.findByRole("combobox", {
+ name: "Project Name-select-toggleFilterInput",
+ }),
+ );
+
+ await userEvent.click(
+ await screen.findByRole("option", { name: Project.filterable[0].name }),
+ );
const textBox = await screen.findByRole("textbox", { name: "Name-input" });
- await act(async () => {
- await userEvent.clear(textBox);
- });
+ await userEvent.clear(textBox);
+ await userEvent.type(textBox, `test-env1{enter}`);
- await act(async () => {
- await userEvent.type(textBox, `test-env1{enter}`);
- });
// Submit request
- await act(async () => {
- await userEvent.click(
- await screen.findByRole("button", { name: "submit" }),
- );
- });
+ await userEvent.click(await screen.findByRole("button", { name: "submit" }));
expect(apiHelper.pendingRequests).toHaveLength(1);
@@ -501,11 +442,9 @@ test(`Given CreateEnvironmentForm When an existing project and invalid environme
await screen.findByRole("generic", { name: "submit-error-message" }),
).toBeVisible();
- await act(async () => {
- await userEvent.click(
- screen.getByRole("button", { name: "submit-close-error" }),
- );
- });
+ await userEvent.click(
+ screen.getByRole("button", { name: "submit-close-error" }),
+ );
expect(
screen.queryByRole("generic", { name: "submit-error-message" }),
@@ -525,45 +464,30 @@ test(`Given CreateEnvironmentForm When an existing project, a valid environment
);
});
- await act(async () => {
- await userEvent.click(
- await screen.findByRole("combobox", {
- name: "Project Name-select-toggleFilterInput",
- }),
- );
- });
- await act(async () => {
- await userEvent.click(
- await screen.findByRole("option", { name: Project.filterable[0].name }),
- );
- });
+ await userEvent.click(
+ await screen.findByRole("combobox", {
+ name: "Project Name-select-toggleFilterInput",
+ }),
+ );
+
+ await userEvent.click(
+ await screen.findByRole("option", { name: Project.filterable[0].name }),
+ );
const textBox = await screen.findByRole("textbox", { name: "Name-input" });
- await act(async () => {
- await userEvent.clear(textBox);
- });
- await act(async () => {
- await userEvent.type(textBox, `dev{enter}`);
- });
+ await userEvent.clear(textBox);
+ await userEvent.type(textBox, `dev{enter}`);
const description = "description text";
const descriptionInput = screen.getByRole("textbox", {
name: "Description-input",
});
- await act(async () => {
- await userEvent.clear(descriptionInput);
- });
- await act(async () => {
- await userEvent.type(descriptionInput, description);
- });
+ await userEvent.clear(descriptionInput);
+ await userEvent.type(descriptionInput, description);
- await act(async () => {
- await userEvent.click(
- await screen.findByRole("button", { name: "submit" }),
- );
- });
+ await userEvent.click(await screen.findByRole("button", { name: "submit" }));
expect(apiHelper.pendingRequests).toHaveLength(1);
@@ -592,63 +516,43 @@ test(`Given CreateEnvironmentForm When an existing project, a valid environment
}),
);
});
- await act(async () => {
- await userEvent.click(
- await screen.findByRole("combobox", {
- name: "Project Name-select-toggleFilterInput",
- }),
- );
- });
- await act(async () => {
- await userEvent.click(
- await screen.findByRole("option", { name: Project.filterable[0].name }),
- );
- });
+
+ await userEvent.click(
+ await screen.findByRole("combobox", {
+ name: "Project Name-select-toggleFilterInput",
+ }),
+ );
+
+ await userEvent.click(
+ await screen.findByRole("option", { name: Project.filterable[0].name }),
+ );
const textBox = await screen.findByRole("textbox", { name: "Name-input" });
- await act(async () => {
- await userEvent.clear(textBox);
- });
- await act(async () => {
- await userEvent.type(textBox, `dev{enter}`);
- });
+ await userEvent.clear(textBox);
+ await userEvent.type(textBox, `dev{enter}`);
const branch = "dev";
const branchTextBox = await screen.findByRole("textbox", {
name: "Branch-input",
});
- await act(async () => {
- await userEvent.clear(branchTextBox);
- });
- await act(async () => {
- await userEvent.type(branchTextBox, branch);
- });
+ await userEvent.clear(branchTextBox);
+ await userEvent.type(branchTextBox, branch);
const repository = "github.com/test-env";
const urlTextBox = await screen.findByRole("textbox", {
name: "Repository-input",
});
- await act(async () => {
- await userEvent.clear(urlTextBox);
- });
- await act(async () => {
- await userEvent.type(urlTextBox, repository);
- });
+ await userEvent.clear(urlTextBox);
+ await userEvent.type(urlTextBox, repository);
- await act(async () => {
- await userEvent.clear(branchTextBox);
- });
- await act(async () => {
- await userEvent.clear(urlTextBox);
- });
- await act(async () => {
- await userEvent.click(
- await screen.findByRole("button", { name: "submit" }),
- );
- });
+ await userEvent.clear(branchTextBox);
+
+ await userEvent.clear(urlTextBox);
+
+ await userEvent.click(await screen.findByRole("button", { name: "submit" }));
expect(apiHelper.pendingRequests).toHaveLength(1);
diff --git a/src/Slices/CreateEnvironment/UI/CreateEnvironmentForm.tsx b/src/Slices/CreateEnvironment/UI/CreateEnvironmentForm.tsx
index dcf9df02d..258b3ffe7 100644
--- a/src/Slices/CreateEnvironment/UI/CreateEnvironmentForm.tsx
+++ b/src/Slices/CreateEnvironment/UI/CreateEnvironmentForm.tsx
@@ -1,6 +1,5 @@
import React, { useContext, useState } from "react";
import { Button, Flex, FlexItem, Form } from "@patternfly/react-core";
-import styled from "styled-components";
import { Either, ProjectModel } from "@/Core";
import { CreatableSelectInput, InlinePlainAlert } from "@/UI/Components";
import { DependencyContext } from "@/UI/Dependency";
@@ -146,7 +145,7 @@ const FormControls: React.FC<{
onSubmit: () => void;
onCancel: () => void;
}> = ({ isSubmitDisabled, onSubmit, onCancel }) => (
-
+
-
+
);
-
-const PaddedControls = styled(Flex)`
- padding-top: 1em;
-`;
diff --git a/src/Slices/CreateInstance/UI/CreateInstance.test.tsx b/src/Slices/CreateInstance/UI/CreateInstance.test.tsx
index e576f54d1..02fa8b30b 100644
--- a/src/Slices/CreateInstance/UI/CreateInstance.test.tsx
+++ b/src/Slices/CreateInstance/UI/CreateInstance.test.tsx
@@ -74,21 +74,15 @@ test("Given the CreateInstance View When creating an instance with attributes Th
expect(bandwidthField).toBeVisible();
- await act(async () => {
- await userEvent.type(bandwidthField, "2");
- });
+ await userEvent.type(bandwidthField, "2");
const customerLocationsField = screen.getByText("customer_locations");
- await act(async () => {
- await userEvent.type(customerLocationsField, "5");
- });
+ await userEvent.type(customerLocationsField, "5");
const orderIdField = screen.getByText("order_id");
- await act(async () => {
- await userEvent.type(orderIdField, "7007");
- });
+ await userEvent.type(orderIdField, "7007");
const networkField = screen.getByText("network");
@@ -100,11 +94,7 @@ test("Given the CreateInstance View When creating an instance with attributes Th
expect(results).toHaveNoViolations();
});
- await act(async () => {
- await userEvent.click(
- screen.getByRole("button", { name: words("confirm") }),
- );
- });
+ await userEvent.click(screen.getByText(words("confirm")));
expect(apiHelper.pendingRequests[0]).toEqual({
method: "POST",
@@ -162,9 +152,7 @@ test("Given the CreateInstance View When creating an instance with Inter-service
words("common.serviceInstance.relations")("test_entity"),
);
- await act(async () => {
- await userEvent.type(relationInputField, "a");
- });
+ await userEvent.type(relationInputField, "a");
await act(async () => {
apiHelper.resolve(Either.right({ data: [ServiceInstance.a] }));
@@ -174,9 +162,7 @@ test("Given the CreateInstance View When creating an instance with Inter-service
expect(options.length).toBe(1);
- await act(async () => {
- await userEvent.click(options[0]);
- });
+ await userEvent.click(options[0]);
expect(options[0]).toHaveClass("pf-m-selected");
@@ -186,11 +172,7 @@ test("Given the CreateInstance View When creating an instance with Inter-service
expect(results).toHaveNoViolations();
});
- await act(async () => {
- await userEvent.click(
- screen.getByRole("button", { name: words("confirm") }),
- );
- });
+ await userEvent.click(screen.getByText(words("confirm")));
expect(apiHelper.pendingRequests[0]).toEqual({
method: "POST",
@@ -227,9 +209,8 @@ test("Given the CreateInstance View When creating an instance with Inter-service
words("common.serviceInstance.relations")("test_entity"),
);
- await act(async () => {
- await userEvent.type(relationInputField, "a");
- });
+ await userEvent.type(relationInputField, "a");
+
expect(apiHelper.pendingRequests[0]).toEqual({
method: "GET",
url: `/lsm/v1/service_inventory/${InterServiceRelations.editable.entity_type}?include_deployment_progress=False&limit=250&filter.id_or_service_identity=a`,
@@ -239,22 +220,30 @@ test("Given the CreateInstance View When creating an instance with Inter-service
await act(async () => {
await apiHelper.resolve(Either.right({ data: [ServiceInstance.a] }));
});
- await act(async () => {
- await userEvent.type(relationInputField, "{selectall}{backspace}ab");
- });
- expect(apiHelper.pendingRequests[0]).toEqual({
+
+ await userEvent.type(relationInputField, "{selectall}{backspace}ab");
+
+ expect(apiHelper.pendingRequests[2]).toEqual({
method: "GET",
url: `/lsm/v1/service_inventory/${InterServiceRelations.editable.entity_type}?include_deployment_progress=False&limit=250&filter.id_or_service_identity=ab`,
environment: "env",
});
- await act(async () => {
- apiHelper.resolve(Either.right({ data: [] }));
- });
+ // clear all pending requests
await act(async () => {
- await userEvent.type(relationInputField, "{backspace}{backspace}");
+ while (apiHelper.pendingRequests.length > 0) {
+ apiHelper.resolve(Either.right({ data: [] }));
+ }
});
+
+ await userEvent.type(relationInputField, "{backspace}{backspace}");
+
expect(apiHelper.pendingRequests[0]).toEqual({
+ method: "GET",
+ url: `/lsm/v1/service_inventory/${InterServiceRelations.editable.entity_type}?include_deployment_progress=False&limit=250&filter.id_or_service_identity=a`,
+ environment: "env",
+ });
+ expect(apiHelper.pendingRequests[1]).toEqual({
method: "GET",
url: `/lsm/v1/service_inventory/${InterServiceRelations.editable.entity_type}?include_deployment_progress=False&limit=250&filter.id_or_service_identity=`,
environment: "env",
@@ -284,9 +273,8 @@ test("Given the CreateInstance View When creating an instance with Inter-service
words("common.serviceInstance.relations")("test_entity"),
);
- await act(async () => {
- await userEvent.type(relationInputField, "a");
- });
+ await userEvent.type(relationInputField, "a");
+
expect(apiHelper.pendingRequests[0]).toEqual({
method: "GET",
url: `/lsm/v1/service_inventory/${InterServiceRelations.editable.entity_type}?include_deployment_progress=False&limit=250&filter.id_or_service_identity=a`,
@@ -296,22 +284,30 @@ test("Given the CreateInstance View When creating an instance with Inter-service
await act(async () => {
await apiHelper.resolve(Either.right({ data: [ServiceInstance.a] }));
});
- await act(async () => {
- await userEvent.type(relationInputField, "{selectall}{backspace}ab");
- });
- expect(apiHelper.pendingRequests[0]).toEqual({
+
+ await userEvent.type(relationInputField, "{selectall}{backspace}ab");
+
+ expect(apiHelper.pendingRequests[2]).toEqual({
method: "GET",
url: `/lsm/v1/service_inventory/${InterServiceRelations.editable.entity_type}?include_deployment_progress=False&limit=250&filter.id_or_service_identity=ab`,
environment: "env",
});
- await act(async () => {
- apiHelper.resolve(Either.right({ data: [] }));
- });
+ // clear all pending requests
await act(async () => {
- await userEvent.type(relationInputField, "{backspace}{backspace}");
+ while (apiHelper.pendingRequests.length > 0) {
+ apiHelper.resolve(Either.right({ data: [] }));
+ }
});
+
+ await userEvent.type(relationInputField, "{backspace}{backspace}");
+
expect(apiHelper.pendingRequests[0]).toEqual({
+ method: "GET",
+ url: `/lsm/v1/service_inventory/${InterServiceRelations.editable.entity_type}?include_deployment_progress=False&limit=250&filter.id_or_service_identity=a`,
+ environment: "env",
+ });
+ expect(apiHelper.pendingRequests[1]).toEqual({
method: "GET",
url: `/lsm/v1/service_inventory/${InterServiceRelations.editable.entity_type}?include_deployment_progress=False&limit=250&filter.id_or_service_identity=`,
environment: "env",
@@ -405,19 +401,14 @@ test("Given the CreateInstance View When creating entity with default values The
"DictListFieldInput-embedded_base",
);
- await act(async () => {
- await userEvent.click(
- screen.getByRole("button", { name: "embedded_base" }),
- );
- });
+ await userEvent.click(screen.getByRole("button", { name: "embedded_base" }));
//check if direct attributes for embedded entities have correct default values
- await act(async () => {
- await userEvent.click(
- within(embedded_base).getByRole("button", { name: "0" }),
- );
- });
+ await userEvent.click(
+ within(embedded_base).getByRole("button", { name: "0" }),
+ );
+
expect(
within(embedded_base).queryByLabelText("TextInput-string"),
).toHaveValue("default_string");
diff --git a/src/Slices/Dashboard/UI/Charts/LineChart.tsx b/src/Slices/Dashboard/UI/Charts/LineChart.tsx
index 6bee90e5f..dea9b3ea6 100644
--- a/src/Slices/Dashboard/UI/Charts/LineChart.tsx
+++ b/src/Slices/Dashboard/UI/Charts/LineChart.tsx
@@ -9,10 +9,10 @@ import {
ChartStack,
ChartArea,
ChartLabel,
- ChartLabelProps,
ChartScatter,
ChartLegend,
ChartAxisProps,
+ ChartLabelProps,
} from "@patternfly/react-charts";
import styled, { css } from "styled-components";
import { LineChartProps } from "../../Core/Domain";
@@ -84,7 +84,7 @@ export const LineChart: React.FC = ({
chooseWhichLabelToUse(datum)}
diff --git a/src/Slices/Dashboard/UI/Dashboard.tsx b/src/Slices/Dashboard/UI/Dashboard.tsx
index 1e5e91a49..8d903c9e2 100644
--- a/src/Slices/Dashboard/UI/Dashboard.tsx
+++ b/src/Slices/Dashboard/UI/Dashboard.tsx
@@ -1,5 +1,5 @@
import React, { useContext, useState } from "react";
-import { Button } from "@patternfly/react-core";
+import { Button, Flex } from "@patternfly/react-core";
import moment from "moment";
import styled from "styled-components";
import { RemoteData } from "@/Core";
@@ -46,23 +46,28 @@ export const Dashboard: React.FC = () => {
{words("dashboard.refresh")}
- {featureManager.isLsmEnabled() && (
+
+ {featureManager.isLsmEnabled() && (
+
+ )}
- )}
-
-
+
+
),
},
diff --git a/src/Slices/Dashboard/UI/GraphCard.test.tsx b/src/Slices/Dashboard/UI/GraphCard.test.tsx
index 7367dc90e..df23da9ba 100644
--- a/src/Slices/Dashboard/UI/GraphCard.test.tsx
+++ b/src/Slices/Dashboard/UI/GraphCard.test.tsx
@@ -18,7 +18,8 @@ const axe = configureAxe({
describe("Test GraphCard with LineChart component", () => {
it("Line Chart version", async () => {
const availableKeys = Object.keys(mockedMetrics.metrics);
- const { container } = render(
+
+ render(
{
}),
).toBeVisible();
- expect(await container.querySelector(".pf-v5-c-chart")).toBeVisible();
+ expect(
+ screen.getByRole("img", {
+ name: /service counter/i,
+ }),
+ ).toBeVisible();
await act(async () => {
const results = await axe(document.body);
@@ -46,7 +51,8 @@ describe("Test GraphCard with LineChart component", () => {
it("Area Chart version", async () => {
const availableKeys = Object.keys(mockedMetrics.metrics);
- const { container } = render(
+
+ render(
{
}),
).toBeVisible();
- expect(await container.querySelector(".pf-v5-c-chart")).toBeVisible();
+ expect(
+ screen.getByRole("img", {
+ name: /agents count/i,
+ }),
+ ).toBeVisible();
await act(async () => {
const results = await axe(document.body);
diff --git a/src/Slices/Dashboard/UI/GraphCard.tsx b/src/Slices/Dashboard/UI/GraphCard.tsx
index 058a84caa..d7eba7e25 100644
--- a/src/Slices/Dashboard/UI/GraphCard.tsx
+++ b/src/Slices/Dashboard/UI/GraphCard.tsx
@@ -7,8 +7,8 @@ import {
Title,
Flex,
FlexItem,
+ Content,
} from "@patternfly/react-core";
-import styled from "styled-components";
import { words } from "@/UI";
import { GraphCardProps, Metric, MetricName } from "../Core/Domain";
import { LineChart } from "./Charts/LineChart";
@@ -22,7 +22,7 @@ export const GraphCard: React.FC = ({
const [formatedMetrics, max] = formatMetricsToStacked(metrics, isStacked);
return (
-
+
= ({
-
+
{words(`dashboard.${metrics.name as MetricName}.description`)}
-
+
@@ -61,6 +61,3 @@ export const GraphCard: React.FC = ({
);
};
-export const StyledDescription = styled.span`
- color: var(--pf-v5-global--Color--200);
-`;
diff --git a/src/Slices/Dashboard/UI/NumericCard.tsx b/src/Slices/Dashboard/UI/NumericCard.tsx
index f01b744c8..3abd02114 100644
--- a/src/Slices/Dashboard/UI/NumericCard.tsx
+++ b/src/Slices/Dashboard/UI/NumericCard.tsx
@@ -6,55 +6,58 @@ import {
CardTitle,
Flex,
FlexItem,
- Text,
+ Content,
Title,
+ Gallery,
+ GalleryItem,
} from "@patternfly/react-core";
-import styled from "styled-components";
import { words } from "@/UI";
import { Metric, MetricName } from "../Core/Domain";
-import { StyledDescription } from "./GraphCard";
export const NumericCard = ({ metrics }: { metrics: Metric }) => {
const lastData = metrics.data[metrics.data.length - 1];
return (
-
-
-
-
-
-
- {words(`dashboard.${metrics.name as MetricName}.title`)}
-
-
-
-
-
- {words(`dashboard.${metrics.name as MetricName}.description`)}
-
-
-
-
-
-
- {lastData == null ? "no data" : Math.round(lastData)}
-
-
-
+
+
+
+
+
+
+
+
+ {words(`dashboard.${metrics.name as MetricName}.title`)}
+
+
+
+
+
+ {words(`dashboard.${metrics.name as MetricName}.description`)}
+
+
+
+
+
+
+ {lastData == null ? "no data" : Math.round(lastData)}
+
+
+
+
+
);
};
-
-export default NumericCard;
-
-const StyledCard = styled(Card)`
- max-width: 300px;
-`;
diff --git a/src/Slices/Dashboard/UI/Section.tsx b/src/Slices/Dashboard/UI/Section.tsx
index a5648195f..48b08ba41 100644
--- a/src/Slices/Dashboard/UI/Section.tsx
+++ b/src/Slices/Dashboard/UI/Section.tsx
@@ -1,6 +1,5 @@
import React from "react";
import { Flex, FlexItem, Title } from "@patternfly/react-core";
-import styled from "styled-components";
import { BackendMetricData } from "../Core/Domain";
import { GraphCard } from "./GraphCard";
import { NumericCard } from "./NumericCard";
@@ -17,7 +16,7 @@ export const Section: React.FC = ({ title, metricType, metrics }) => {
);
return (
-
+
= ({ title, metricType, metrics }) => {
),
)}
</Flex>
- </Wrapper>
+ </FlexItem>
);
};
-
-const Wrapper = styled.div`
- padding-bottom: 40px;
-`;
diff --git a/src/Slices/Dashboard/UI/themes.ts b/src/Slices/Dashboard/UI/themes.ts
index 1d0b4cc72..152b4322f 100644
--- a/src/Slices/Dashboard/UI/themes.ts
+++ b/src/Slices/Dashboard/UI/themes.ts
@@ -3,23 +3,23 @@ import {
chart_color_black_400,
chart_color_blue_300,
chart_color_blue_500,
- chart_color_gold_300,
- chart_color_gold_400,
+ chart_color_yellow_300,
+ chart_color_yellow_400,
chart_color_green_100,
chart_color_green_300,
- chart_color_red_200,
- chart_color_red_300,
- chart_color_red_400,
+ chart_color_red_orange_200,
+ chart_color_red_orange_300,
+ chart_color_red_orange_400,
chart_theme_gray_ColorScale_300,
chart_theme_purple_ColorScale_300,
} from "@patternfly/react-tokens";
export const colorTheme = {
default: chart_color_green_300.var,
- down: chart_color_red_300.var,
- paused: chart_color_gold_300.var,
+ down: chart_color_red_orange_300.var,
+ paused: chart_color_yellow_300.var,
up: chart_color_green_300.var,
- deploying: chart_color_gold_400.var,
+ deploying: chart_color_yellow_400.var,
dry: chart_color_black_200.var,
unavailable: chart_color_black_400.var,
deployed: chart_color_green_300.var,
@@ -27,10 +27,10 @@ export const colorTheme = {
available: chart_color_green_100.var,
skipped_for_undefined: chart_color_blue_300.var,
skipped: chart_color_blue_500.var,
- failed: chart_color_red_300.var,
- cancelled: chart_color_red_400.var,
- danger: chart_color_red_200.var,
+ failed: chart_color_red_orange_300.var,
+ cancelled: chart_color_red_orange_400.var,
+ danger: chart_color_red_orange_200.var,
info: chart_color_blue_300.var,
- warning: chart_color_gold_300.var,
+ warning: chart_color_yellow_300.var,
no_label: chart_theme_gray_ColorScale_300.var,
};
diff --git a/src/Slices/DesiredState/Data/QueryManager.ts b/src/Slices/DesiredState/Data/QueryManager.ts
deleted file mode 100644
index c6f05c6bd..000000000
--- a/src/Slices/DesiredState/Data/QueryManager.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import {
- Scheduler,
- ApiHelper,
- StateHelperWithEnv,
- stringifyObjectOrUndefined,
-} from "@/Core";
-import { getPaginationHandlers, QueryManager } from "@/Data/Managers/Helpers";
-import { Filter } from "@S/DesiredState/Core/Query";
-import { getUrl } from "./getUrl";
-
-export function GetDesiredStatesQueryManager(
- apiHelper: ApiHelper,
- stateHelper: StateHelperWithEnv<"GetDesiredStates">,
- scheduler: Scheduler,
-) {
- return QueryManager.ContinuousWithEnv<"GetDesiredStates">(
- apiHelper,
- stateHelper,
- scheduler,
- ({ kind }, environment) => `${kind}_${environment}`,
- ({ pageSize, filter, currentPage }, environment) => [
- environment,
- pageSize.value,
- stringifyFilter(filter),
- stringifyObjectOrUndefined(currentPage.value),
- ],
- "GetDesiredStates",
- (query) => getUrl(query),
- ({ data, links, metadata }) => {
- if (typeof links === "undefined") {
- return { data: data, handlers: {}, metadata };
- }
-
- return {
- data: data,
- handlers: getPaginationHandlers(links, metadata),
- metadata,
- };
- },
- );
-}
-
-function stringifyFilter(filter: Filter | undefined): string {
- return typeof filter === "undefined" ? "undefined" : JSON.stringify(filter);
-}
diff --git a/src/Slices/DesiredState/Data/StateHelper.ts b/src/Slices/DesiredState/Data/StateHelper.ts
deleted file mode 100644
index c4eb90370..000000000
--- a/src/Slices/DesiredState/Data/StateHelper.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { RemoteData } from "@/Core";
-import { PrimaryStateHelperWithEnv } from "@/Data/Common";
-import { Store } from "@/Data/Store";
-
-export function GetDesiredStatesStateHelper(store: Store) {
- return PrimaryStateHelperWithEnv<"GetDesiredStates">(
- store,
- (data, query, environment) => {
- const value = RemoteData.mapSuccess((wrapped) => wrapped, data);
-
- store.dispatch.desiredStates.setList({
- environment,
- data: value,
- });
- },
- (state, query, environment) => state.desiredStates.listByEnv[environment],
- );
-}
diff --git a/src/Slices/DesiredState/Data/Store.ts b/src/Slices/DesiredState/Data/Store.ts
deleted file mode 100644
index 0ed77683a..000000000
--- a/src/Slices/DesiredState/Data/Store.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Action, action } from "easy-peasy";
-import { RemoteData, Query } from "@/Core";
-
-type Data = RemoteData.Type<
- Query.Error<"GetDesiredStates">,
- Query.Data<"GetDesiredStates">
->;
-
-export interface DesiredStatesSlice {
- listByEnv: Record<string, Data>;
- setList: Action<
- DesiredStatesSlice,
- {
- environment: string;
- data: Data;
- }
- >;
-}
-
-export const desiredStatesSlice: DesiredStatesSlice = {
- listByEnv: {},
- setList: action(({ listByEnv }, { environment, data }) => {
- listByEnv[environment] = data;
- }),
-};
diff --git a/src/Slices/DesiredState/Data/index.ts b/src/Slices/DesiredState/Data/index.ts
index ab9a987a3..504385fdb 100644
--- a/src/Slices/DesiredState/Data/index.ts
+++ b/src/Slices/DesiredState/Data/index.ts
@@ -1,2 +1,2 @@
-export * from "./QueryManager";
-export * from "./StateHelper";
+export * from "./getUrl";
+export * from "./Mock";
diff --git a/src/Slices/DesiredState/UI/Components/Actions.tsx b/src/Slices/DesiredState/UI/Components/Actions.tsx
index 16af36645..905c7310d 100644
--- a/src/Slices/DesiredState/UI/Components/Actions.tsx
+++ b/src/Slices/DesiredState/UI/Components/Actions.tsx
@@ -32,9 +32,8 @@ export const Actions: React.FC<Props> = ({ version, isPromoteDisabled }) => {
variant="plain"
onClick={onToggleClick}
isExpanded={isOpen}
- >
- <EllipsisVIcon />
- </MenuToggle>
+ icon={<EllipsisVIcon />}
+ />
)}
isOpen={isOpen}
onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
diff --git a/src/Slices/DesiredState/UI/Components/CompareSelectionLabel.tsx b/src/Slices/DesiredState/UI/Components/CompareSelectionLabel.tsx
index 50a5a7ef8..527d40e6e 100644
--- a/src/Slices/DesiredState/UI/Components/CompareSelectionLabel.tsx
+++ b/src/Slices/DesiredState/UI/Components/CompareSelectionLabel.tsx
@@ -1,7 +1,5 @@
import React from "react";
-import { Button, Icon } from "@patternfly/react-core";
-import { TimesIcon } from "@patternfly/react-icons";
-import styled from "styled-components";
+import { Label, LabelGroup } from "@patternfly/react-core";
import { Maybe } from "@/Core";
import { words } from "@/UI/words";
import { CompareSelection } from "../Utils";
@@ -16,47 +14,8 @@ export const CompareSelectionLabel: React.FC<Props> = ({
onDelete,
}) => {
return Maybe.isSome(selection) ? (
- <Container>
- <Title>{words("desiredState.compare.selectionLabel")}
-
-
- {selection.value} ;
-
-
-
-
-
-
-
+
+ {selection.value}
+
) : null;
};
-
-const Container = styled.div`
- display: inline-flex;
- font-size: var(--pf-v5-global--FontSize--md);
- line-height: 24px;
- height: 36px;
- padding: 6px 6px 6px 8px;
- background-color: var(--pf-v5-global--BackgroundColor--200);
-`;
-
-const Title = styled.span`
- display: inline-block;
- margin-right: 8px;
-`;
-
-const Selection = styled.div`
- background-color: var(--pf-v5-global--BackgroundColor--100);
- border-radius: 3px;
- font-size: var(--pf-v5-global--FontSize--sm);
-`;
-
-const SelectionText = styled.span`
- padding: 0 4px;
-`;
-
-const SelectionAction = styled(Button)`
- padding: 0 4px;
- line-height: 24px;
-`;
diff --git a/src/Slices/DesiredState/UI/Components/DeleteModal.tsx b/src/Slices/DesiredState/UI/Components/DeleteModal.tsx
deleted file mode 100644
index 6e983cd69..000000000
--- a/src/Slices/DesiredState/UI/Components/DeleteModal.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React, { useContext } from "react";
-import { Modal } from "@patternfly/react-core";
-import { DeleteVersion } from "@/Data/Managers/DeleteVersion/interface";
-import { ConfirmUserActionForm } from "@/UI/Components";
-import { DependencyContext } from "@/UI/Dependency";
-import { words } from "@/UI/words";
-import { GetDesiredStatesContext } from "../GetDesiredStatesContext";
-
-interface Props extends DeleteVersion {
- isDisabled?: boolean;
- isOpened: boolean;
-}
-
-export const DeleteModal: React.FC = ({ version, isOpened }) => {
- const { setDeleteModal } = useContext(GetDesiredStatesContext);
- const { commandResolver } = useContext(DependencyContext);
- const { filter, pageSize, currentPage } = useContext(GetDesiredStatesContext);
- const deleteVersionTrigger = commandResolver.useGetTrigger<"DeleteVersion">({
- kind: "DeleteVersion",
- version,
- });
-
- const onSubmit = async () => {
- await deleteVersionTrigger({
- kind: "GetDesiredStates",
- filter,
- pageSize,
- currentPage,
- });
- setDeleteModal(0, false);
- };
-
- return (
- setDeleteModal(0, false)}
- >
- {words("inventory.deleteVersion.header")(version)}
- setDeleteModal(0, false)}
- />
-
- );
-};
diff --git a/src/Slices/DesiredState/UI/Components/DesiredStateStatusLabel.tsx b/src/Slices/DesiredState/UI/Components/DesiredStateStatusLabel.tsx
new file mode 100644
index 000000000..d2171635b
--- /dev/null
+++ b/src/Slices/DesiredState/UI/Components/DesiredStateStatusLabel.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import { Label } from "@patternfly/react-core";
+import { InfoAltIcon } from "@patternfly/react-icons";
+import { DesiredStateVersionStatus } from "@S/DesiredState/Core/Domain";
+
+/**
+ * DesiredStateStatusLabel Component
+ *
+ * When the status is active, the label will be green.
+ * When the status is skipped_candidate, the label will be yellow.
+ * When the status is candidate, the label will be blue.
+ * When the status is retired, the label will be outlined.
+ *
+ * @param {DesiredStateVersionStatus} status - The Status of the desired state version.
+ * @returns A React label component with the status of the desired state version.
+ */
+export const DesiredStateStatusLabel: React.FC<{
+ status: DesiredStateVersionStatus;
+}> = ({ status }) => {
+ switch (status) {
+ case DesiredStateVersionStatus.active:
+ return (
+
+ {status}
+
+ );
+ case DesiredStateVersionStatus.skipped_candidate:
+ return (
+
+ {status}
+
+ );
+ case DesiredStateVersionStatus.candidate:
+ return (
+ {status} ;
+ }
+};
diff --git a/src/Slices/DesiredState/UI/Components/PromoteAction.tsx b/src/Slices/DesiredState/UI/Components/PromoteAction.tsx
index 89c013a4d..ebf529858 100644
--- a/src/Slices/DesiredState/UI/Components/PromoteAction.tsx
+++ b/src/Slices/DesiredState/UI/Components/PromoteAction.tsx
@@ -1,6 +1,7 @@
-import React, { useContext } from "react";
+import React, { useContext, useEffect } from "react";
import { DropdownItem } from "@patternfly/react-core";
-import { Maybe, ParsedNumber } from "@/Core";
+import { ParsedNumber } from "@/Core";
+import { usePromoteDesiredStateVersion } from "@/Data/Managers/V2/POST/PromoteDesiredStateVersion";
import { ActionDisabledTooltip } from "@/UI/Components";
import { DependencyContext } from "@/UI/Dependency";
import { words } from "@/UI/words";
@@ -11,31 +12,39 @@ interface Props {
isDisabled: boolean;
}
+/**
+ * PromoteAction component which holds the logic for promoting a desired state version.
+ *
+ * @note to be able to Promote a desired state version, we need to disable auto_deploy setting in the application.
+ *
+ * @props {Props} props - The props of the component.
+ * @prop version {ParsedNumber} - the version to promote
+ * @prop isDisabled {boolean} - if the action is disabled
+ * @returns {React.FC} - The dropdown item that has logic to promote the desired state version wrapped in tooltip.
+ */
export const PromoteAction: React.FC = ({ version, isDisabled }) => {
- const { commandResolver, environmentModifier } =
+ const { environmentModifier, environmentHandler } =
useContext(DependencyContext);
- const { filter, pageSize, currentPage, setErrorMessage } = useContext(
- GetDesiredStatesContext,
+ const { setErrorMessage } = useContext(GetDesiredStatesContext);
+ const { mutate, isError, error } = usePromoteDesiredStateVersion(
+ environmentHandler.useId(),
);
- const promoteVersionTrigger = commandResolver.useGetTrigger<"PromoteVersion">(
- {
- kind: "PromoteVersion",
- version,
- },
- );
- const onSubmit = async () => {
- const result = await promoteVersionTrigger({
- kind: "GetDesiredStates",
- filter,
- pageSize,
- currentPage,
- });
+ const isHalted = environmentModifier.useIsHalted();
- if (Maybe.isSome(result)) {
- setErrorMessage(result.value);
- }
+ /**
+ * method triggering mutation to promote the desired state version
+ *
+ * @returns {void}
+ * */
+ const onSubmit = () => {
+ mutate(version.toString());
};
- const isHalted = environmentModifier.useIsHalted();
+
+ useEffect(() => {
+ if (isError) {
+ setErrorMessage(error.message);
+ }
+ }, [isError, error, setErrorMessage]);
return (
= ({
- status,
-}) => {
- switch (status) {
- case DesiredStateVersionStatus.active:
- return {status} ;
- case DesiredStateVersionStatus.skipped_candidate:
- return (
-
- {status}
-
- );
- case DesiredStateVersionStatus.candidate:
- return {status} ;
- case DesiredStateVersionStatus.retired:
- return {status} ;
- }
-};
diff --git a/src/Slices/DesiredState/UI/Components/index.ts b/src/Slices/DesiredState/UI/Components/index.ts
index baae191cb..e06bde7a7 100644
--- a/src/Slices/DesiredState/UI/Components/index.ts
+++ b/src/Slices/DesiredState/UI/Components/index.ts
@@ -1,4 +1,4 @@
export * from "./Actions";
export * from "./TableControls";
export * from "./ResourcesLink";
-export * from "./StatusLabel";
+export * from "./DesiredStateStatusLabel";
diff --git a/src/Slices/DesiredState/UI/DesiredStatesTable.tsx b/src/Slices/DesiredState/UI/DesiredStatesTable.tsx
index 23fe98e71..f165a25a3 100644
--- a/src/Slices/DesiredState/UI/DesiredStatesTable.tsx
+++ b/src/Slices/DesiredState/UI/DesiredStatesTable.tsx
@@ -1,11 +1,5 @@
import React from "react";
-import {
- Table /* data-codemods */,
- TableVariant,
- Th,
- Thead,
- Tr,
-} from "@patternfly/react-table";
+import { Table, TableVariant, Th, Thead, Tr } from "@patternfly/react-table";
import { words } from "@/UI/words";
import { DesiredStateVersion } from "@S/DesiredState/Core/Domain";
import { DesiredStatesTableRow } from "./DesiredStatesTableRow";
diff --git a/src/Slices/DesiredState/UI/DesiredStatesTableRow.tsx b/src/Slices/DesiredState/UI/DesiredStatesTableRow.tsx
index 589d1446c..b982eed42 100644
--- a/src/Slices/DesiredState/UI/DesiredStatesTableRow.tsx
+++ b/src/Slices/DesiredState/UI/DesiredStatesTableRow.tsx
@@ -7,7 +7,7 @@ import {
DesiredStateVersion,
DesiredStateVersionStatus,
} from "@S/DesiredState/Core/Domain";
-import { Actions, ResourcesLink, StatusLabel } from "./Components";
+import { Actions, ResourcesLink, DesiredStateStatusLabel } from "./Components";
interface Props {
row: DesiredStateVersion;
@@ -23,7 +23,7 @@ export const DesiredStatesTableRow: React.FC = ({ row }) => (
{row.version as React.ReactNode}
-
{row.total as React.ReactNode}
diff --git a/src/Slices/DesiredState/UI/Page.test.tsx b/src/Slices/DesiredState/UI/Page.test.tsx
index 5bc6d007e..b38c1df10 100644
--- a/src/Slices/DesiredState/UI/Page.test.tsx
+++ b/src/Slices/DesiredState/UI/Page.test.tsx
@@ -1,20 +1,19 @@
import React, { act } from "react";
import { MemoryRouter } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { render, screen, within } from "@testing-library/react";
import { userEvent } from "@testing-library/user-event";
import { StoreProvider } from "easy-peasy";
import { configureAxe, toHaveNoViolations } from "jest-axe";
-import { Either, Maybe } from "@/Core";
+import { HttpResponse, http } from "msw";
+import { setupServer } from "msw/node";
import {
QueryResolverImpl,
getStoreInstance,
CommandResolverImpl,
- PromoteVersionCommandManager,
- DesiredStatesUpdater,
GetCompilerStatusQueryManager,
TriggerCompileCommandManager,
} from "@/Data";
-import { DeleteVersionCommandManager } from "@/Data/Managers/DeleteVersion";
import {
DynamicQueryManagerResolverImpl,
StaticScheduler,
@@ -24,10 +23,7 @@ import {
} from "@/Test";
import { words } from "@/UI";
import { DependencyProvider } from "@/UI/Dependency";
-import {
- GetDesiredStatesQueryManager,
- GetDesiredStatesStateHelper,
-} from "@S/DesiredState/Data";
+import { ModalProvider } from "@/UI/Root/Components/ModalProvider";
import * as DesiredStateVersions from "@S/DesiredState/Data/Mock";
import { Page } from "./Page";
@@ -41,807 +37,730 @@ const axe = configureAxe({
});
function setup() {
+ const queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ retry: false,
+ },
+ },
+ });
const store = getStoreInstance();
const scheduler = new StaticScheduler();
const apiHelper = new DeferredApiHelper();
- const getDesiredStatesStateHelper = GetDesiredStatesStateHelper(store);
- const desiredStatesUpdater = new DesiredStatesUpdater(
- getDesiredStatesStateHelper,
- apiHelper,
- );
const queryResolver = new QueryResolverImpl(
new DynamicQueryManagerResolverImpl([
- GetDesiredStatesQueryManager(
- apiHelper,
- getDesiredStatesStateHelper,
- scheduler,
- ),
GetCompilerStatusQueryManager(apiHelper, scheduler),
]),
);
const commandResolver = new CommandResolverImpl(
new DynamicCommandManagerResolverImpl([
- PromoteVersionCommandManager(apiHelper, desiredStatesUpdater),
- DeleteVersionCommandManager(apiHelper),
TriggerCompileCommandManager(apiHelper),
]),
);
const component = (
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
);
return { component, apiHelper, scheduler };
}
-test("DesiredStatesView shows empty table", async () => {
- const { component, apiHelper } = setup();
+describe("DesiredStatesView", () => {
+ let GETRequestsFired = 0;
+ let POSTRequestsFired = 0;
+ let DELETERequestsFired = 0;
- render(component);
+ const server = setupServer();
- await act(async () => {
- await apiHelper.resolve(204);
+ server.events.on("request:start", async ({ request }) => {
+ switch (request.method) {
+ case "GET":
+ GETRequestsFired++;
+ break;
+ case "POST":
+ POSTRequestsFired++;
+ break;
+ case "DELETE":
+ DELETERequestsFired++;
+ break;
+ default:
+ break;
+ }
});
- expect(
- await screen.findByRole("region", { name: "DesiredStatesView-Loading" }),
- ).toBeInTheDocument();
+ beforeAll(() => {
+ server.listen();
+ });
- await act(async () => {
- apiHelper.resolve(
- Either.right({
- data: [],
- links: { self: "" },
- metadata: { total: 0, before: 0, after: 0, page_size: 1000 },
- }),
- );
+ afterEach(() => {
+ server.resetHandlers();
+ GETRequestsFired = 0;
+ POSTRequestsFired = 0;
+ DELETERequestsFired = 0;
});
- expect(
- await screen.findByRole("generic", { name: "DesiredStatesView-Empty" }),
- ).toBeInTheDocument();
+ afterAll(() => {
+ server.close();
+ });
- await act(async () => {
- const results = await axe(document.body);
+ it("DesiredStatesView shows empty table", async () => {
+ server.use(
+ http.get("/api/v2/desiredstate", async () => {
+ return HttpResponse.json({
+ data: [],
+ links: { self: "" },
+ metadata: { total: 0, before: 0, after: 0, page_size: 1000 },
+ });
+ }),
+ );
- expect(results).toHaveNoViolations();
- });
-});
+ const { component } = setup();
-test("DesiredStatesView shows failed table", async () => {
- const { component, apiHelper } = setup();
+ render(component);
- render(component);
+ expect(
+ await screen.findByRole("region", { name: "DesiredStatesView-Loading" }),
+ ).toBeInTheDocument();
- await act(async () => {
- await apiHelper.resolve(204);
- });
+ expect(
+ await screen.findByRole("generic", { name: "DesiredStatesView-Empty" }),
+ ).toBeInTheDocument();
- expect(
- await screen.findByRole("region", { name: "DesiredStatesView-Loading" }),
- ).toBeInTheDocument();
+ await act(async () => {
+ const results = await axe(document.body);
- await act(async () => {
- await apiHelper.resolve(Either.left("error"));
+ expect(results).toHaveNoViolations();
+ });
});
- expect(
- await screen.findByRole("region", { name: "DesiredStatesView-Failed" }),
- ).toBeInTheDocument();
-
- await act(async () => {
- const results = await axe(document.body);
+ it("DesiredStatesView shows failed table", async () => {
+ server.use(
+ http.get("/api/v2/desiredstate", async () => {
+ return HttpResponse.json({ message: "Not Found" }, { status: 404 });
+ }),
+ );
- expect(results).toHaveNoViolations();
- });
-});
+ const { component } = setup();
-test("AgentsView shows success table", async () => {
- const { component, apiHelper } = setup();
+ render(component);
- render(component);
+ expect(
+ await screen.findByRole("region", { name: "DesiredStatesView-Loading" }),
+ ).toBeInTheDocument();
- await act(async () => {
- await apiHelper.resolve(204);
- });
+ expect(
+ await screen.findByRole("region", { name: "DesiredStatesView-Failed" }),
+ ).toBeInTheDocument();
- expect(
- await screen.findByRole("region", { name: "DesiredStatesView-Loading" }),
- ).toBeInTheDocument();
+ await act(async () => {
+ const results = await axe(document.body);
- await act(async () => {
- await apiHelper.resolve(Either.right(DesiredStateVersions.response));
+ expect(results).toHaveNoViolations();
+ });
});
- expect(
- await screen.findByRole("grid", { name: "DesiredStatesView-Success" }),
- ).toBeInTheDocument();
+ it("AgentsView shows success table", async () => {
+ server.use(
+ http.get("/api/v2/desiredstate", async () => {
+ return HttpResponse.json(DesiredStateVersions.response);
+ }),
+ );
- await act(async () => {
- const results = await axe(document.body);
+ const { component } = setup();
- expect(results).toHaveNoViolations();
- });
-});
+ render(component);
-test("When using the status filter then only the matching desired states should be fetched and shown", async () => {
- const { component, apiHelper } = setup();
+ expect(
+ await screen.findByRole("region", { name: "DesiredStatesView-Loading" }),
+ ).toBeInTheDocument();
- render(component);
+ expect(
+ await screen.findByRole("grid", { name: "DesiredStatesView-Success" }),
+ ).toBeInTheDocument();
- await act(async () => {
- await apiHelper.resolve(204);
- });
+ await act(async () => {
+ const results = await axe(document.body);
- await act(async () => {
- await apiHelper.resolve(Either.right(DesiredStateVersions.response));
+ expect(results).toHaveNoViolations();
+ });
});
- const initialRows = await screen.findAllByRole("row", {
- name: "DesiredStates Table Row",
- });
+ it("When using the status filter then only the matching desired states should be fetched and shown", async () => {
+ server.use(
+ http.get("/api/v2/desiredstate", async ({ request }) => {
+ //we are expecting that at some point the request will have the filters applied for status and we mock the adequate response
+ if (
+ request.url.split("?")[1] ===
+ "limit=20&sort=version.desc&filter.status=skipped_candidate"
+ ) {
+ return HttpResponse.json({
+ ...DesiredStateVersions.response,
+ data: DesiredStateVersions.response.data.slice(0, 3),
+ });
+ } else {
+ return HttpResponse.json(DesiredStateVersions.response);
+ }
+ }),
+ );
- expect(initialRows).toHaveLength(9);
+ const { component } = setup();
+
+ render(component);
+
+ const initialRows = await screen.findAllByRole("row", {
+ name: "DesiredStates Table Row",
+ });
+
+ expect(initialRows).toHaveLength(9);
- await act(async () => {
await userEvent.click(
within(screen.getByRole("toolbar", { name: "FilterBar" })).getByRole(
"button",
{ name: "FilterPicker" },
),
);
- });
- await act(async () => {
+
await userEvent.click(
screen.getByRole("option", {
name: words("desiredState.columns.status"),
}),
);
- });
- const input = screen.getByRole("combobox", { name: "StatusFilterInput" });
+ const input = screen.getByRole("combobox", { name: "StatusFilterInput" });
- await act(async () => {
await userEvent.click(input);
- });
- const statusOptions = screen.getAllByRole("option");
+ const statusOptions = screen.getAllByRole("option");
- expect(statusOptions).toHaveLength(4);
+ expect(statusOptions).toHaveLength(4);
- const candidateSkippedOption = await screen.findByRole("option", {
- name: words("desiredState.test.skippedCandidate"),
- });
+ const candidateSkippedOption = await screen.findByRole("option", {
+ name: words("desiredState.test.skippedCandidate"),
+ });
- await act(async () => {
await userEvent.click(candidateSkippedOption);
- });
-
- expect(apiHelper.pendingRequests[0].url).toEqual(
- `/api/v2/desiredstate?limit=20&sort=version.desc&filter.status=skipped_candidate`,
- );
- await act(async () => {
- await apiHelper.resolve(
- Either.right({
- ...DesiredStateVersions.response,
- data: DesiredStateVersions.response.data.slice(0, 3),
- }),
- );
- });
-
- const rowsAfter = await screen.findAllByRole("row", {
- name: "DesiredStates Table Row",
- });
+ const rowsAfter = await screen.findAllByRole("row", {
+ name: "DesiredStates Table Row",
+ });
- expect(rowsAfter).toHaveLength(3);
+ expect(rowsAfter).toHaveLength(3);
- await act(async () => {
- const results = await axe(document.body);
+ await act(async () => {
+ const results = await axe(document.body);
- expect(results).toHaveNoViolations();
+ expect(results).toHaveNoViolations();
+ });
});
-});
-
-test("When using the Date filter then the desired state versions within the range selected range should be fetched and shown", async () => {
- const { component, apiHelper } = setup();
- render(component);
+ it("When using the Date filter then the desired state versions within the range selected range should be fetched and shown", async () => {
+ server.use(
+ http.get("/api/v2/desiredstate", async ({ request }) => {
+ //we are expecting that at some point the request will have the filters applied for date and we mock the adequate response
+ if (
+ request.url.split("?")[1] ===
+ "limit=20&sort=version.desc&filter.status=active&filter.status=candidate&filter.status=retired&filter.date=ge%3A2021-12-05%2B23%3A00%3A00&filter.date=le%3A2021-12-06%2B23%3A00%3A00"
+ ) {
+ return HttpResponse.json({
+ ...DesiredStateVersions.response,
+ data: DesiredStateVersions.response.data.slice(0, 3),
+ });
+ } else {
+ return HttpResponse.json(DesiredStateVersions.response);
+ }
+ }),
+ );
- await act(async () => {
- await apiHelper.resolve(204);
- });
+ const { component } = setup();
- await act(async () => {
- await apiHelper.resolve(Either.right(DesiredStateVersions.response));
- });
+ render(component);
- const initialRows = await screen.findAllByRole("row", {
- name: "DesiredStates Table Row",
- });
+ const initialRows = await screen.findAllByRole("row", {
+ name: "DesiredStates Table Row",
+ });
- expect(initialRows).toHaveLength(9);
+ expect(initialRows).toHaveLength(9);
- await act(async () => {
await userEvent.click(
within(screen.getByRole("toolbar", { name: "FilterBar" })).getByRole(
"button",
{ name: "FilterPicker" },
),
);
- });
- await act(async () => {
+
await userEvent.click(
- screen.getByRole("option", { name: words("desiredState.columns.date") }),
+ screen.getByRole("option", {
+ name: words("desiredState.columns.date"),
+ }),
);
- });
- const fromDatePicker = screen.getByLabelText("From Date Picker");
+ const fromDatePicker = screen.getByLabelText("From Date Picker");
- await act(async () => {
- await userEvent.click(fromDatePicker);
- });
- await act(async () => {
await userEvent.type(fromDatePicker, `2021-12-06`);
- });
- const toDatePicker = screen.getByLabelText("To Date Picker");
+ const toDatePicker = screen.getByLabelText("To Date Picker");
- await act(async () => {
- await userEvent.click(toDatePicker);
- });
- await act(async () => {
await userEvent.type(toDatePicker, "2021-12-07");
- });
- await act(async () => {
await userEvent.click(screen.getByLabelText("Apply date filter"));
- });
- expect(apiHelper.pendingRequests[0].url).toMatch(
- `/api/v2/desiredstate?limit=20&sort=version.desc&filter.status=active&filter.status=candidate&filter.status=retired&filter.date=ge%3A2021-12-05%2B23%3A00%3A00&filter.date=le%3A2021-12-06%2B23%3A00%3A00`,
- );
-
- await act(async () => {
- await apiHelper.resolve(
- Either.right({
- ...DesiredStateVersions.response,
- data: DesiredStateVersions.response.data.slice(0, 3),
- }),
- );
- });
- const rowsAfter = await screen.findAllByRole("row", {
- name: "DesiredStates Table Row",
- });
+ const rowsAfter = await screen.findAllByRole("row", {
+ name: "DesiredStates Table Row",
+ });
- expect(rowsAfter).toHaveLength(3);
+ expect(rowsAfter).toHaveLength(3);
- // The chips are hidden in small windows, so resize it
- window = Object.assign(window, { innerWidth: 1200 });
- await act(async () => {
- window.dispatchEvent(new Event("resize"));
- });
+ // The chips are hidden in small windows, so resize it
+ window = Object.assign(window, { innerWidth: 1200 });
+ await act(async () => {
+ window.dispatchEvent(new Event("resize"));
+ });
- expect(
- await screen.findByText("from | 2021/12/06 00:00:00", { exact: false }),
- ).toBeVisible();
- expect(
- await screen.findByText("to | 2021/12/07 00:00:00", { exact: false }),
- ).toBeVisible();
+ expect(
+ await screen.findByText("from | 2021/12/06 00:00:00", { exact: false }),
+ ).toBeVisible();
+ expect(
+ await screen.findByText("to | 2021/12/07 00:00:00", { exact: false }),
+ ).toBeVisible();
- await act(async () => {
- const results = await axe(document.body);
+ await act(async () => {
+ const results = await axe(document.body);
- expect(results).toHaveNoViolations();
+ expect(results).toHaveNoViolations();
+ });
});
-});
-
-test("When using the Version filter then the desired state versions within the range selected range should be fetched and shown", async () => {
- const { component, apiHelper } = setup();
- render(component);
+ it("When using the Version filter then the desired state versions within the range selected range should be fetched and shown", async () => {
+ server.use(
+ http.get("/api/v2/desiredstate", async ({ request }) => {
+ //we are expecting that at some point the request will have the filters applied for version and we mock the adequate response
+ if (
+ request.url.split("?")[1] ===
+ "limit=20&sort=version.desc&filter.status=active&filter.status=candidate&filter.status=retired&filter.version=ge%3A3&filter.version=le%3A5"
+ ) {
+ return HttpResponse.json({
+ ...DesiredStateVersions.response,
+ data: DesiredStateVersions.response.data.slice(0, 3),
+ });
+ } else {
+ return HttpResponse.json(DesiredStateVersions.response);
+ }
+ }),
+ );
- await act(async () => {
- await apiHelper.resolve(204);
- });
+ const { component } = setup();
- await act(async () => {
- await apiHelper.resolve(Either.right(DesiredStateVersions.response));
- });
+ render(component);
- const initialRows = await screen.findAllByRole("row", {
- name: "DesiredStates Table Row",
- });
+ const initialRows = await screen.findAllByRole("row", {
+ name: "DesiredStates Table Row",
+ });
- expect(initialRows).toHaveLength(9);
+ expect(initialRows).toHaveLength(9);
- await act(async () => {
await userEvent.click(
within(screen.getByRole("toolbar", { name: "FilterBar" })).getByRole(
"button",
{ name: "FilterPicker" },
),
);
- });
- await act(async () => {
+
await userEvent.click(
screen.getByRole("option", {
name: words("desiredState.columns.version"),
}),
);
- });
- const fromDatePicker = await screen.findByLabelText("Version range from");
+ const fromDatePicker = await screen.findByLabelText("Version range from");
- await act(async () => {
- await userEvent.click(fromDatePicker);
- });
- await act(async () => {
await userEvent.type(fromDatePicker, `3`);
- });
- const toDatePicker = await screen.findByLabelText("Version range to");
+ const toDatePicker = await screen.findByLabelText("Version range to");
- await act(async () => {
- await userEvent.click(toDatePicker);
- });
- await act(async () => {
await userEvent.type(toDatePicker, `5`);
- });
- await act(async () => {
await userEvent.click(await screen.findByLabelText("Apply Version filter"));
- });
- expect(apiHelper.pendingRequests[0].url).toMatch(
- `/api/v2/desiredstate?limit=20&sort=version.desc&filter.status=active&filter.status=candidate&filter.status=retired&filter.version=ge%3A3&filter.version=le%3A5`,
- );
-
- await act(async () => {
- await apiHelper.resolve(
- Either.right({
- ...DesiredStateVersions.response,
- data: DesiredStateVersions.response.data.slice(0, 3),
- }),
- );
- });
- const rowsAfter = await screen.findAllByRole("row", {
- name: "DesiredStates Table Row",
- });
+ const rowsAfter = await screen.findAllByRole("row", {
+ name: "DesiredStates Table Row",
+ });
- expect(rowsAfter).toHaveLength(3);
+ expect(rowsAfter).toHaveLength(3);
- // The chips are hidden in small windows, so resize it
- window = Object.assign(window, { innerWidth: 1200 });
- await act(async () => {
- await window.dispatchEvent(new Event("resize"));
- });
+ // The chips are hidden in small windows, so resize it
+ window = Object.assign(window, { innerWidth: 1200 });
+ await act(async () => {
+ await window.dispatchEvent(new Event("resize"));
+ });
- expect(await screen.findByText("from | 3", { exact: false })).toBeVisible();
- expect(await screen.findByText("to | 5", { exact: false })).toBeVisible();
+ expect(await screen.findByText("from | 3", { exact: false })).toBeVisible();
+ expect(await screen.findByText("to | 5", { exact: false })).toBeVisible();
- await act(async () => {
- const results = await axe(document.body);
+ await act(async () => {
+ const results = await axe(document.body);
- expect(results).toHaveNoViolations();
+ expect(results).toHaveNoViolations();
+ });
});
-});
-test("Given the Desired states view When promoting a version, then the correct request is be fired", async () => {
- const { component, apiHelper } = setup();
+ it("Given the Desired states view When promoting a version, then the correct request is be fired", async () => {
+ server.use(
+ http.get("/api/v2/desiredstate", async () => {
+ return HttpResponse.json(DesiredStateVersions.response);
+ }),
+ http.post("/api/v2/desiredstate/9/promote", async () => {
+ return HttpResponse.json({ status: 200 });
+ }),
+ );
- render(component);
+ const { component } = setup();
- await act(async () => {
- await apiHelper.resolve(204);
- });
+ render(component);
- await act(async () => {
- await apiHelper.resolve(Either.right(DesiredStateVersions.response));
- });
- const rows = await screen.findAllByRole("row", {
- name: "DesiredStates Table Row",
- });
+ const rows = await screen.findAllByRole("row", {
+ name: "DesiredStates Table Row",
+ });
+
+ expect(POSTRequestsFired).toBe(0);
+ expect(GETRequestsFired).toBe(1);
- await act(async () => {
await userEvent.click(
within(rows[8]).getByRole("button", {
name: "actions-toggle",
}),
);
- });
- expect(
- within(rows[8]).getByRole("button", {
- name: "actions-toggle",
- }),
- ).toHaveAttribute("aria-expanded", "true");
+ expect(
+ within(rows[8]).getByRole("button", {
+ name: "actions-toggle",
+ }),
+ ).toHaveAttribute("aria-expanded", "true");
- expect(
- screen.getByRole("menuitem", {
- name: words("desiredState.actions.promote"),
- }),
- ).toBeDisabled();
+ expect(
+ screen.getByRole("menuitem", {
+ name: words("desiredState.actions.promote"),
+ }),
+ ).toBeDisabled();
- await act(async () => {
+ // close first opened popup, to avoid conflict with the next one.
await userEvent.click(
- within(rows[0]).getByRole("button", {
+ within(rows[8]).getByRole("button", {
name: "actions-toggle",
}),
);
- });
- await act(async () => {
await userEvent.click(
- screen.getByRole("menuitem", {
- name: words("desiredState.actions.promote"),
+ within(rows[0]).getByRole("button", {
+ name: "actions-toggle",
}),
);
- });
- expect(apiHelper.pendingRequests).toHaveLength(1);
+ await userEvent.click(screen.getByRole("menuitem", { name: /promote/i }));
- const request = apiHelper.pendingRequests[0];
-
- expect(request).toEqual({
- method: "POST",
- environment: "env",
- url: "/api/v2/desiredstate/9/promote",
- body: null,
- });
-
- await act(async () => {
- await apiHelper.resolve(Maybe.none());
- });
-
- expect(apiHelper.resolvedRequests).toHaveLength(3);
- expect(apiHelper.pendingRequests).toHaveLength(1);
+ const rowsAfter = await screen.findAllByRole("row", {
+ name: "DesiredStates Table Row",
+ });
- await act(async () => {
- await apiHelper.resolve(Either.right(DesiredStateVersions.response));
- });
+ expect(rowsAfter).toHaveLength(9);
- expect(apiHelper.resolvedRequests).toHaveLength(4);
- expect(apiHelper.pendingRequests).toHaveLength(0);
+ await act(async () => {
+ const results = await axe(document.body);
- await act(async () => {
- const results = await axe(document.body);
+ expect(results).toHaveNoViolations();
+ });
- expect(results).toHaveNoViolations();
- });
-});
+ expect(POSTRequestsFired).toBe(1);
+ expect(GETRequestsFired).toBe(2);
+ });
+
+ it("Given the Desired states view with filters When promoting a version, then the correct request is be fired", async () => {
+ server.use(
+ http.get("/api/v2/desiredstate", async ({ request }) => {
+ //we are expecting that at some point the request will have the filters applied for status and we mock the adequate response
+ if (
+ request.url.split("?")[1] ===
+ "limit=20&sort=version.desc&filter.status=candidate"
+ ) {
+ return HttpResponse.json({
+ ...DesiredStateVersions.response,
+ data: DesiredStateVersions.response.data.slice(0, 3),
+ });
+ } else {
+ return HttpResponse.json(DesiredStateVersions.response);
+ }
+ }),
+ http.post("/api/v2/desiredstate/9/promote", async () => {
+ return HttpResponse.json({ status: 200 });
+ }),
+ );
-test("Given the Desired states view with filters When promoting a version, then the correct request is be fired", async () => {
- const { component, apiHelper } = setup();
+ const { component } = setup();
- render(component);
+ render(component);
- await act(async () => {
- await apiHelper.resolve(204);
- });
+ const initialRows = await screen.findAllByRole("row", {
+ name: "DesiredStates Table Row",
+ });
- await act(async () => {
- await apiHelper.resolve(Either.right(DesiredStateVersions.response));
- });
+ expect(initialRows).toHaveLength(9);
- await act(async () => {
await userEvent.click(
within(screen.getByRole("toolbar", { name: "FilterBar" })).getByRole(
"button",
{ name: "FilterPicker" },
),
);
- });
- await act(async () => {
+
await userEvent.click(
screen.getByRole("option", {
name: words("desiredState.columns.status"),
}),
);
- });
- const input = screen.getByPlaceholderText(
- words("desiredState.filters.status.placeholder"),
- );
+ const input = screen.getByPlaceholderText(
+ words("desiredState.filters.status.placeholder"),
+ );
- await act(async () => {
await userEvent.click(input);
- });
- const option = await screen.findByRole("option", {
- name: words("desiredState.test.candidate"),
- });
+ const option = await screen.findByRole("option", {
+ name: words("desiredState.test.candidate"),
+ });
- await act(async () => {
await userEvent.click(option);
- });
- await act(async () => {
- await apiHelper.resolve(Either.right(DesiredStateVersions.response));
- });
- const rows = await screen.findAllByRole("row", {
- name: "DesiredStates Table Row",
- });
+ expect(POSTRequestsFired).toBe(0);
+ expect(GETRequestsFired).toBe(2);
+
+ const rows = await screen.findAllByRole("row", {
+ name: "DesiredStates Table Row",
+ });
- await act(async () => {
await userEvent.click(
within(rows[0]).getByRole("button", {
name: "actions-toggle",
}),
);
- });
- await act(async () => {
await userEvent.click(
screen.getByRole("menuitem", {
name: words("desiredState.actions.promote"),
}),
);
- });
- expect(apiHelper.pendingRequests).toHaveLength(1);
-
- const request = apiHelper.pendingRequests[0];
-
- expect(request).toEqual({
- method: "POST",
- environment: "env",
- url: "/api/v2/desiredstate/9/promote",
- body: null,
- });
-
- await act(async () => {
- await apiHelper.resolve(Maybe.none());
- });
- expect(apiHelper.resolvedRequests).toHaveLength(4);
- expect(apiHelper.pendingRequests).toHaveLength(1);
- expect(apiHelper.pendingRequests[0]).toEqual({
- method: "GET",
- environment: "env",
- url: "/api/v2/desiredstate?limit=20&sort=version.desc&filter.status=candidate",
- });
-
- await act(async () => {
- await apiHelper.resolve(Either.right(DesiredStateVersions.response));
- });
+ const rowsAfter = await screen.findAllByRole("row", {
+ name: "DesiredStates Table Row",
+ });
- expect(apiHelper.resolvedRequests).toHaveLength(5);
- expect(apiHelper.pendingRequests).toHaveLength(0);
+ expect(rowsAfter).toHaveLength(3);
- await act(async () => {
- const results = await axe(document.body);
+ await act(async () => {
+ const results = await axe(document.body);
- expect(results).toHaveNoViolations();
+ expect(results).toHaveNoViolations();
+ });
+ expect(POSTRequestsFired).toBe(1);
+ expect(GETRequestsFired).toBe(3);
});
-});
-test("Given the Desired states view When promoting a version results in an error, then the error is shown", async () => {
- const { component, apiHelper } = setup();
-
- render(component);
+ it("Given the Desired states view When promoting a version results in an error, then the error is shown", async () => {
+ server.use(
+ http.get("/api/v2/desiredstate", async () => {
+ return HttpResponse.json(DesiredStateVersions.response);
+ }),
+ http.post("/api/v2/desiredstate/9/promote", async () => {
+ return HttpResponse.json(
+ { message: "something happened" },
+ { status: 500 },
+ );
+ }),
+ );
+ const { component } = setup();
- await act(async () => {
- await apiHelper.resolve(204);
- });
+ render(component);
- await act(async () => {
- await apiHelper.resolve(Either.right(DesiredStateVersions.response));
- });
- const rows = await screen.findAllByRole("row", {
- name: "DesiredStates Table Row",
- });
+ const rows = await screen.findAllByRole("row", {
+ name: "DesiredStates Table Row",
+ });
- await act(async () => {
await userEvent.click(
within(rows[0]).getByRole("button", {
name: "actions-toggle",
}),
);
- });
- await act(async () => {
await userEvent.click(
screen.getByRole("menuitem", {
name: words("desiredState.actions.promote"),
}),
);
- });
-
- expect(apiHelper.pendingRequests).toHaveLength(1);
-
- const request = apiHelper.pendingRequests[0];
- expect(request).toEqual({
- method: "POST",
- environment: "env",
- url: "/api/v2/desiredstate/9/promote",
- body: null,
+ expect(await screen.findByText("something happened")).toBeVisible();
});
- await act(async () => {
- await apiHelper.resolve(Maybe.some("something happened"));
- await apiHelper.resolve(Either.right(DesiredStateVersions.response));
- });
-
- expect(await screen.findByText("something happened")).toBeVisible();
-});
-
-test("DesiredStatesView shows CompileWidget", async () => {
- const { component } = setup();
-
- render(component);
-
- expect(screen.getByRole("button", { name: "RecompileButton" })).toBeVisible();
-});
-
-describe("DeleteModal ", () => {
- it("Shows form when clicking on modal button", async () => {
- const { component, apiHelper } = setup();
+ it("DesiredStatesView shows CompileWidget", async () => {
+ server.use(
+ http.get("/api/v2/desiredstate", async () => {
+ return HttpResponse.json(DesiredStateVersions.response);
+ }),
+ );
+ const { component } = setup();
render(component);
- await act(async () => {
- await apiHelper.resolve(204);
- });
+ expect(
+ await screen.findByRole("button", { name: "RecompileButton" }),
+ ).toBeVisible();
+ });
- await act(async () => {
- await apiHelper.resolve(Either.right(DesiredStateVersions.response));
- });
- const rows = await screen.findAllByRole("row", {
- name: "DesiredStates Table Row",
- });
+ describe("DeleteModal ", () => {
+ it("Shows form when clicking on modal button", async () => {
+ server.use(
+ http.get("/api/v2/desiredstate", async () => {
+ return HttpResponse.json(DesiredStateVersions.response);
+ }),
+ );
+ const { component } = setup();
+
+ render(component);
+ const rows = await screen.findAllByRole("row", {
+ name: "DesiredStates Table Row",
+ });
- await act(async () => {
await userEvent.click(
within(rows[0]).getByRole("button", {
name: "actions-toggle",
}),
);
- });
- await act(async () => {
await userEvent.click(screen.getByRole("menuitem", { name: "Delete" }));
- });
- expect(
- await screen.findByText(words("inventory.deleteVersion.header")(9)),
- ).toBeVisible();
- expect(await screen.findByText("Yes")).toBeVisible();
- expect(await screen.findByText("No")).toBeVisible();
+ expect(
+ await screen.findByText(words("inventory.deleteVersion.header")(9)),
+ ).toBeVisible();
+ expect(await screen.findByText("Yes")).toBeVisible();
+ expect(await screen.findByText("No")).toBeVisible();
- await act(async () => {
- const results = await axe(document.body);
+ await act(async () => {
+ const results = await axe(document.body);
- expect(results).toHaveNoViolations();
+ expect(results).toHaveNoViolations();
+ });
});
- });
- it("Closes modal when cancelled(both cancel buttons scenario)", async () => {
- const { component, apiHelper } = setup();
+ it("Closes modal when cancelled(both cancel buttons scenario)", async () => {
+ server.use(
+ http.get("/api/v2/desiredstate", async () => {
+ return HttpResponse.json(DesiredStateVersions.response);
+ }),
+ );
- render(component);
+ const { component } = setup();
- await act(async () => {
- await apiHelper.resolve(204);
- });
+ render(component);
- await act(async () => {
- await apiHelper.resolve(Either.right(DesiredStateVersions.response));
- });
- const rows = await screen.findAllByRole("row", {
- name: "DesiredStates Table Row",
- });
+ const rows = await screen.findAllByRole("row", {
+ name: "DesiredStates Table Row",
+ });
- //close by "no" button scenario
- await act(async () => {
+ //close by "no" button scenario
await userEvent.click(
within(rows[0]).getByRole("button", {
name: "actions-toggle",
}),
);
- });
- await act(async () => {
await userEvent.click(screen.getByRole("menuitem", { name: "Delete" }));
- });
- const noButton = await screen.findByText("No");
- await act(async () => {
+ const noButton = await screen.findByText("No");
+
await userEvent.click(noButton);
- });
- expect(screen.queryByText("Yes")).not.toBeInTheDocument();
+ expect(screen.queryByText("Yes")).not.toBeInTheDocument();
- //close by close button scenario
- await act(async () => {
+ //close by close button scenario
await userEvent.click(
within(rows[0]).getByRole("button", {
name: "actions-toggle",
}),
);
- });
- await act(async () => {
+
await userEvent.click(screen.getByRole("menuitem", { name: "Delete" }));
- });
- const closeButton = await screen.findByLabelText("Close");
+ const closeButton = await screen.findByLabelText("Close");
- await act(async () => {
await userEvent.click(closeButton);
- });
- expect(screen.queryByText("Yes")).not.toBeInTheDocument();
+ expect(screen.queryByText("Yes")).not.toBeInTheDocument();
- await act(async () => {
- const results = await axe(document.body);
+ await act(async () => {
+ const results = await axe(document.body);
- expect(results).toHaveNoViolations();
+ expect(results).toHaveNoViolations();
+ });
});
- });
- it("Sends request when submitted then request is executed and modal closed", async () => {
- const { component, apiHelper } = setup();
+ it("Sends request when submitted then request is executed and modal closed", async () => {
+ server.use(
+ http.get("/api/v2/desiredstate", async () => {
+ return HttpResponse.json(DesiredStateVersions.response);
+ }),
+ http.delete("/api/v1/version/9", async () => {
+ return HttpResponse.json({ status: 204 });
+ }),
+ );
- render(component);
+ const { component } = setup();
- await act(async () => {
- await apiHelper.resolve(204);
- });
+ render(component);
- await act(async () => {
- await apiHelper.resolve(Either.right(DesiredStateVersions.response));
- });
- const rows = await screen.findAllByRole("row", {
- name: "DesiredStates Table Row",
- });
+ const rows = await screen.findAllByRole("row", {
+ name: "DesiredStates Table Row",
+ });
- expect(rows).toHaveLength(9);
+ expect(rows).toHaveLength(9);
+
+ expect(DELETERequestsFired).toBe(0);
+ expect(GETRequestsFired).toBe(1);
- await act(async () => {
await userEvent.click(
within(rows[0]).getByRole("button", {
name: "actions-toggle",
}),
);
- });
- await act(async () => {
await userEvent.click(screen.getByRole("menuitem", { name: "Delete" }));
- });
- const yesButton = await screen.findByText("Yes");
-
- await act(async () => {
- await userEvent.click(yesButton);
- });
- expect(apiHelper.pendingRequests[0]).toEqual({
- environment: "env",
- method: "DELETE",
- url: `/api/v1/version/9`,
- });
+ const yesButton = await screen.findByText("Yes");
- await act(async () => {
- await apiHelper.resolve(Either.right(null));
- });
+ await userEvent.click(yesButton);
- expect(screen.queryByText("No")).not.toBeInTheDocument();
+ expect(screen.queryByText("No")).not.toBeInTheDocument();
- await act(async () => {
- const results = await axe(document.body);
+ //delete request is fired and it will retrigger the get request,
+ expect(DELETERequestsFired).toBe(1);
+ expect(GETRequestsFired).toBe(3);
+ await act(async () => {
+ const results = await axe(document.body);
- expect(results).toHaveNoViolations();
+ expect(results).toHaveNoViolations();
+ });
});
});
});
diff --git a/src/Slices/DesiredState/UI/Page.tsx b/src/Slices/DesiredState/UI/Page.tsx
index 91da0fcf2..8107c59ea 100644
--- a/src/Slices/DesiredState/UI/Page.tsx
+++ b/src/Slices/DesiredState/UI/Page.tsx
@@ -1,28 +1,40 @@
-import React, { useContext, useState } from "react";
-import { ParsedNumber } from "@/Core";
+import React, { useContext, useEffect, useState } from "react";
+import { ParsedNumber, RemoteData } from "@/Core";
import { useUrlStateWithFilter, useUrlStateWithPageSize } from "@/Data";
import { useUrlStateWithCurrentPage } from "@/Data/Common/UrlState/useUrlStateWithCurrentPage";
+import { getPaginationHandlers } from "@/Data/Managers/Helpers";
+import { useDeleteDesiredStateVersion } from "@/Data/Managers/V2/DELETE/DeleteDesiredStateVersion";
+import { useGetDesiredStates } from "@/Data/Managers/V2/GETTERS/GetDesiredStates";
import {
- EmptyView,
ToastAlert,
PageContainer,
PaginationWidget,
- RemoteDataView,
+ ConfirmUserActionForm,
+ EmptyView,
+ LoadingView,
+ ErrorView,
} from "@/UI/Components";
import { DependencyContext } from "@/UI/Dependency";
+import { ModalContext } from "@/UI/Root/Components/ModalProvider";
import { words } from "@/UI/words";
import { Filter } from "@S/DesiredState/Core/Query";
import { TableControls } from "./Components";
-import { DeleteModal } from "./Components/DeleteModal";
import { DesiredStatesTable } from "./DesiredStatesTable";
import { GetDesiredStatesContext } from "./GetDesiredStatesContext";
import { CompareSelection } from "./Utils";
+/**
+ * The Page component that renders the desired state page.
+ *
+ * @returns {React.FC} The rendered desired state page.
+ */
export const Page: React.FC = () => {
- const [isModalOpened, setIsModalOpened] = useState(false);
- const [versionToDelete, setVersionToDelete] = useState(0);
+ const { environmentHandler } = useContext(DependencyContext);
+ const envId = environmentHandler.useId();
+ const { triggerModal, closeModal } = useContext(ModalContext);
+ const deleteVersion = useDeleteDesiredStateVersion(envId);
+
const [errorMessage, setErrorMessage] = useState("");
- const { queryResolver } = useContext(DependencyContext);
const [currentPage, setCurrentPage] = useUrlStateWithCurrentPage({
route: "DesiredState",
@@ -34,76 +46,112 @@ export const Page: React.FC = () => {
route: "DesiredState",
keys: { date: "DateRange", version: "IntRange" },
});
- const [data, retry] = queryResolver.useContinuous<"GetDesiredStates">({
- kind: "GetDesiredStates",
- filter,
- pageSize,
- currentPage,
- });
+
const [compareSelection, setCompareSelection] = useState({
kind: "None",
});
- function setDeleteModal(version: ParsedNumber, modalState: boolean) {
- setIsModalOpened(modalState);
- setVersionToDelete(modalState ? version : 0);
+ const { data, refetch, isError, error, isSuccess } = useGetDesiredStates(
+ envId,
+ ).useContinuous(pageSize, filter, currentPage);
+
+ /**
+ * function that will open a modal to confirm action to delete a version
+ * @param {ParsedNumber} version - the version to delete
+ *
+ * @returns {Promise} A Promise that resolves when the operation is complete.
+ */
+ const setDeleteModal = (version: ParsedNumber) => {
+ const onSubmit = async () => {
+ await deleteVersion.mutate(version.toString());
+ refetch();
+ closeModal();
+ };
+
+ triggerModal({
+ title: words("inventory.deleteVersion.title"),
+ content: (
+ <>
+ {words("inventory.deleteVersion.header")(version)}
+
-
-
- desiredStates.data.length <= 0 ? (
-
+
+
-
- );
+ }
+ />
+ = ({ from, to }) => {
return (
<>
-
- {words("desiredState.compare.title")}
-
-
-
+
+
+
+ {words("desiredState.compare.title")}
+
+
+
+
+
= ({ from, to }) => {
setSearchFilter={setSearchFilter}
/>
-
+
-
+
= ({ from, to }) => {
to={to}
/>
-
-
-
- resources.length <= 0 ? (
-
+
+
+ resources.length <= 0 ? (
+
);
};
-
-const StyledPageSection = styled(PageSection)`
- padding-bottom: 0;
-`;
-
-const ToolBarContainer = styled(Toolbar)`
- z-index: var(--pf-v5-global--ZIndex--xl);
-`;
diff --git a/src/Slices/DesiredStateDetails/UI/Page.test.tsx b/src/Slices/DesiredStateDetails/UI/Page.test.tsx
index cb07974b2..2f94928b8 100644
--- a/src/Slices/DesiredStateDetails/UI/Page.test.tsx
+++ b/src/Slices/DesiredStateDetails/UI/Page.test.tsx
@@ -168,9 +168,7 @@ test("GIVEN DesiredStateDetails page WHEN sorting changes AND we are not on the
expect(screen.getByLabelText("Go to next page")).toBeEnabled();
- await act(async () => {
- await userEvent.click(screen.getByLabelText("Go to next page"));
- });
+ await userEvent.click(screen.getByLabelText("Go to next page"));
//expect the api url to contain start and end keywords that are used for pagination when we are moving to the next page
expect(apiHelper.pendingRequests[0].url).toMatch(/(&start=|&end=)/);
@@ -195,9 +193,7 @@ test("GIVEN DesiredStateDetails page WHEN sorting changes AND we are not on the
});
//sort on the second page
- await act(async () => {
- await userEvent.click(screen.getByRole("button", { name: "Type" }));
- });
+ await userEvent.click(screen.getByRole("button", { name: "Type" }));
// expect the api url to not contain start and end keywords that are used for pagination to assert we are back on the first page.
// we are asserting on the second request as the first request is for the updated sorting event, and second is chained to back to the first page with still correct sorting
diff --git a/src/Slices/DesiredStateDetails/UI/VersionResourceTable.tsx b/src/Slices/DesiredStateDetails/UI/VersionResourceTable.tsx
index de05e5635..7a810d037 100644
--- a/src/Slices/DesiredStateDetails/UI/VersionResourceTable.tsx
+++ b/src/Slices/DesiredStateDetails/UI/VersionResourceTable.tsx
@@ -1,13 +1,12 @@
import React from "react";
import {
OnSort,
- Table /* data-codemods */,
+ Table,
TableVariant,
Th,
Thead,
Tr,
} from "@patternfly/react-table";
-import styled from "styled-components";
import { Resource, Sort } from "@/Core";
import { Row } from "./Row";
import { VersionResourceTablePresenter } from "./VersionResourceTablePresenter";
@@ -55,14 +54,9 @@ export const VersionResourceTable: React.FC = ({
: {};
return (
-
+
{displayName}
-
+
);
});
@@ -77,21 +71,3 @@ export const VersionResourceTable: React.FC = ({
);
};
-
-interface HeaderProps {
- $characters: number;
- $hasSort: boolean;
-}
-
-const getWidth = ({ $characters, $hasSort }: HeaderProps) => {
- const base = `${$characters}ch`;
- const extra = $hasSort ? "60px" : "16px";
-
- return `calc(${base} + ${extra})`;
-};
-
-const StyledTh = styled(Th)`
- &&& {
- min-width: ${getWidth};
- }
-`;
diff --git a/src/Slices/DesiredStateResourceDetails/UI/Details.tsx b/src/Slices/DesiredStateResourceDetails/UI/Details.tsx
index 8ea81a0d0..1c1e42101 100644
--- a/src/Slices/DesiredStateResourceDetails/UI/Details.tsx
+++ b/src/Slices/DesiredStateResourceDetails/UI/Details.tsx
@@ -12,7 +12,7 @@ interface Props {
export const Details: React.FC = ({ details, ...props }) => (
{words("resources.attributes.title")}
-
+
diff --git a/src/Slices/DesiredStateResourceDetails/UI/Page.tsx b/src/Slices/DesiredStateResourceDetails/UI/Page.tsx
index b7b510f2b..b1861be4c 100644
--- a/src/Slices/DesiredStateResourceDetails/UI/Page.tsx
+++ b/src/Slices/DesiredStateResourceDetails/UI/Page.tsx
@@ -1,5 +1,4 @@
import React from "react";
-import styled from "styled-components";
import { Description, PageContainer } from "@/UI/Components";
import { useRouteParams } from "@/UI/Routing";
import { words } from "@/UI/words";
@@ -11,12 +10,8 @@ export const Page: React.FC = () => {
return (
- {resourceId}
+ {resourceId}
);
};
-
-const StyledDescription = styled(Description)`
- margin-bottom: 16px;
-`;
diff --git a/src/Slices/Diagnose/Data/QueryManager.ts b/src/Slices/Diagnose/Data/QueryManager.ts
deleted file mode 100644
index 3f7b8baf4..000000000
--- a/src/Slices/Diagnose/Data/QueryManager.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { identity } from "lodash-es";
-import { StateHelper, Scheduler, ApiHelper } from "@/Core";
-import { QueryManager } from "@/Data/Managers/Helpers";
-
-export function DiagnosticsQueryManager(
- apiHelper: ApiHelper,
- stateHelper: StateHelper<"GetDiagnostics">,
- scheduler: Scheduler,
-) {
- return QueryManager.ContinuousWithEnv<"GetDiagnostics">(
- apiHelper,
- stateHelper,
- scheduler,
- ({ kind, id }) => `${kind}_${id}`,
- ({ id, service_entity }) => [id, service_entity],
- "GetDiagnostics",
- ({ service_entity, id }) =>
- `/lsm/v1/service_inventory/${service_entity}/${id}/diagnose`,
- identity,
- );
-}
diff --git a/src/Slices/Diagnose/Data/StateHelper.ts b/src/Slices/Diagnose/Data/StateHelper.ts
deleted file mode 100644
index 1d0d9e415..000000000
--- a/src/Slices/Diagnose/Data/StateHelper.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { RemoteData } from "@/Core";
-import { PrimaryStateHelper } from "@/Data/Common";
-import { Store } from "@/Data/Store";
-
-export function DiagnosticsStateHelper(store: Store) {
- return PrimaryStateHelper<"GetDiagnostics">(
- store,
- (data, { id }) => {
- const value = RemoteData.mapSuccess((data) => {
- return {
- failures: data.data.failures,
- rejections: data.data.rejections.map((rejection) => {
- // The backend always returns maximum one error
- return {
- ...rejection,
- error:
- rejection.errors.length > 0 ? rejection.errors[0] : undefined,
- };
- }),
- };
- }, data);
-
- store.dispatch.diagnostics.setData({ id, value });
- },
- (state, { id }) => state.diagnostics.byServiceInstanceId[id],
- );
-}
diff --git a/src/Slices/Diagnose/Data/Store.ts b/src/Slices/Diagnose/Data/Store.ts
deleted file mode 100644
index 9b0534a18..000000000
--- a/src/Slices/Diagnose/Data/Store.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Action, action } from "easy-peasy";
-import { RemoteData } from "@/Core";
-import { Diagnostics } from "@S/Diagnose/Core/Domain";
-
-/**
- * The DiagnosticsSlice stores the Diagnostic status for service instances, by service instance id.
- */
-export interface DiagnosticsSlice {
- byServiceInstanceId: Record>;
- setData: Action<
- DiagnosticsSlice,
- { id: string; value: RemoteData.Type }
- >;
-}
-
-export const diagnosticsSlice: DiagnosticsSlice = {
- byServiceInstanceId: {},
- setData: action((state, payload) => {
- state.byServiceInstanceId[payload.id] = payload.value;
- }),
-};
diff --git a/src/Slices/Diagnose/Data/index.ts b/src/Slices/Diagnose/Data/index.ts
index ab9a987a3..557e2be45 100644
--- a/src/Slices/Diagnose/Data/index.ts
+++ b/src/Slices/Diagnose/Data/index.ts
@@ -1,2 +1 @@
-export * from "./QueryManager";
-export * from "./StateHelper";
+export * from "./Mock";
diff --git a/src/Slices/Diagnose/UI/Diagnose.test.tsx b/src/Slices/Diagnose/UI/Diagnose.test.tsx
index fd752013a..5cdb38218 100644
--- a/src/Slices/Diagnose/UI/Diagnose.test.tsx
+++ b/src/Slices/Diagnose/UI/Diagnose.test.tsx
@@ -1,24 +1,19 @@
import React, { act } from "react";
-import { MemoryRouter } from "react-router-dom";
+import { useLocation } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { render, screen } from "@testing-library/react";
import { StoreProvider } from "easy-peasy";
import { configureAxe, toHaveNoViolations } from "jest-axe";
-import { Either } from "@/Core";
-import { QueryResolverImpl, getStoreInstance } from "@/Data";
-import {
- DynamicQueryManagerResolverImpl,
- Service,
- StaticScheduler,
- DeferredApiHelper,
- dependencies,
-} from "@/Test";
-import { DependencyProvider } from "@/UI/Dependency";
-import {
- DiagnosticsQueryManager,
- DiagnosticsStateHelper,
-} from "@S/Diagnose/Data";
-import * as Diagnose from "@S/Diagnose/Data/Mock";
-import { Diagnose as DiagnoseComponent } from "./Diagnose";
+import { HttpResponse, http } from "msw";
+import { setupServer } from "msw/node";
+import { RemoteData } from "@/Core";
+import { getStoreInstance } from "@/Data";
+import { Service, dependencies } from "@/Test";
+import { DependencyProvider, EnvironmentHandlerImpl } from "@/UI/Dependency";
+import CustomRouter from "@/UI/Routing/CustomRouter";
+import history from "@/UI/Routing/history";
+import { failureAndRejection } from "@S/Diagnose/Data/Mock";
+import { Diagnose } from "./Diagnose";
expect.extend(toHaveNoViolations);
@@ -31,46 +26,81 @@ const axe = configureAxe({
function setup() {
const store = getStoreInstance();
- const scheduler = new StaticScheduler();
- const apiHelper = new DeferredApiHelper();
- const queryResolver = new QueryResolverImpl(
- new DynamicQueryManagerResolverImpl([
- DiagnosticsQueryManager(
- apiHelper,
- DiagnosticsStateHelper(store),
- scheduler,
- ),
+ const queryClient = new QueryClient();
+
+ const environmentHandler = EnvironmentHandlerImpl(
+ useLocation,
+ dependencies.routeManager,
+ );
+
+ store.dispatch.environment.setEnvironments(
+ RemoteData.success([
+ {
+ id: "aaa",
+ name: "env-a",
+ project_id: "ppp",
+ repo_branch: "branch",
+ repo_url: "repo",
+ projectName: "project",
+ },
]),
);
+ history.push("/?env=aaa");
const component = (
-
-
-
-
-
-
+
+
+ {" "}
+
+
+
+
+
+
);
- return { component, apiHelper, scheduler };
+ return { component };
}
+const server = setupServer(
+ http.get(
+ "/lsm/v1/service_inventory/service_name_a/4a4a6d14-8cd0-4a16-bc38-4b768eb004e3/diagnose",
+ () => {
+ return HttpResponse.json({
+ data: {
+ failures: [],
+ rejections: [],
+ },
+ });
+ },
+ ),
+);
+
+// Establish API mocking before all tests.
+beforeAll(() => server.listen());
+// Reset any request handlers that we may add during the tests,
+// so they don't affect other tests.
+afterEach(() => server.resetHandlers());
+// Clean up after the tests are finished.
+afterAll(() => server.close());
+
test("Diagnose View shows empty table", async () => {
- const { component, apiHelper } = setup();
+ const { component } = setup();
render(component);
expect(
- await screen.findByRole("region", { name: "Diagnostics-Loading" }),
+ screen.getByRole("region", { name: "Diagnostics-Loading" }),
).toBeInTheDocument();
- apiHelper.resolve(Either.right({ data: { failures: [], rejections: [] } }));
-
expect(
await screen.findByRole("generic", { name: "Diagnostics-Empty" }),
).toBeInTheDocument();
@@ -83,40 +113,28 @@ test("Diagnose View shows empty table", async () => {
});
test("Diagnose View shows failed table", async () => {
- const { component, apiHelper } = setup();
-
- render(component);
-
- expect(
- await screen.findByRole("region", { name: "Diagnostics-Loading" }),
- ).toBeInTheDocument();
-
- apiHelper.resolve(Either.left("error"));
-
- expect(
- await screen.findByRole("region", { name: "Diagnostics-Failed" }),
- ).toBeInTheDocument();
-
- await act(async () => {
- const results = await axe(document.body);
-
- expect(results).toHaveNoViolations();
- });
-});
+ server.use(
+ http.get(
+ "/lsm/v1/service_inventory/service_name_a/4a4a6d14-8cd0-4a16-bc38-4b768eb004e3/diagnose",
+ () => {
+ return HttpResponse.json(
+ {
+ message: "Something went wrong",
+ },
+ {
+ status: 400,
+ },
+ );
+ },
+ ),
+ );
-test("Diagnose View shows success table", async () => {
- const { component, apiHelper } = setup();
+ const { component } = setup();
render(component);
expect(
- await screen.findByRole("region", { name: "Diagnostics-Loading" }),
- ).toBeInTheDocument();
-
- apiHelper.resolve(Either.right({ data: Diagnose.failure }));
-
- expect(
- await screen.findByRole("generic", { name: "Diagnostics-Success" }),
+ await screen.findByRole("region", { name: "Diagnostics-Error" }),
).toBeInTheDocument();
await act(async () => {
@@ -126,25 +144,19 @@ test("Diagnose View shows success table", async () => {
});
});
-test("Diagnose View shows updated table", async () => {
- const { component, apiHelper, scheduler } = setup();
+test("Diagnose View shows success table", async () => {
+ server.use(
+ http.get(
+ "/lsm/v1/service_inventory/service_name_a/4a4a6d14-8cd0-4a16-bc38-4b768eb004e3/diagnose",
+ () => {
+ return HttpResponse.json({ data: failureAndRejection });
+ },
+ ),
+ );
+ const { component } = setup();
render(component);
- expect(
- await screen.findByRole("region", { name: "Diagnostics-Loading" }),
- ).toBeInTheDocument();
-
- apiHelper.resolve(Either.right({ data: { rejections: [], failures: [] } }));
-
- expect(
- await screen.findByRole("generic", { name: "Diagnostics-Empty" }),
- ).toBeInTheDocument();
-
- scheduler.executeAll();
-
- apiHelper.resolve(Either.right({ data: Diagnose.failure }));
-
expect(
await screen.findByRole("generic", { name: "Diagnostics-Success" }),
).toBeInTheDocument();
diff --git a/src/Slices/Diagnose/UI/Diagnose.tsx b/src/Slices/Diagnose/UI/Diagnose.tsx
index 00e768f62..9aa9272f1 100644
--- a/src/Slices/Diagnose/UI/Diagnose.tsx
+++ b/src/Slices/Diagnose/UI/Diagnose.tsx
@@ -1,5 +1,6 @@
import React, { useContext } from "react";
-import { EmptyView, RemoteDataView } from "@/UI/Components";
+import { useGetDiagnostics } from "@/Data/Managers/V2/GETTERS/GetDiagnostics";
+import { EmptyView, ErrorView, LoadingView } from "@/UI/Components";
import { DependencyContext } from "@/UI/Dependency";
import { words } from "@/UI/words";
import { DiagnoseCardLayout } from "./DiagnoseCardLayout";
@@ -7,44 +8,43 @@ import { DiagnoseCardLayout } from "./DiagnoseCardLayout";
interface Props {
serviceName: string;
instanceId: string;
+ lookBehind: string;
instanceIdentity: string;
}
export const Diagnose: React.FC = ({
serviceName,
instanceId,
+ lookBehind,
instanceIdentity,
}) => {
- const { queryResolver } = useContext(DependencyContext);
+ const { environmentHandler } = useContext(DependencyContext);
+ const env = environmentHandler.useId();
+ const { data, error, isError, isSuccess } = useGetDiagnostics(
+ serviceName,
+ instanceId,
+ env,
+ ).useOneTime(lookBehind);
- const [data] = queryResolver.useContinuous<"GetDiagnostics">({
- kind: "GetDiagnostics",
- id: instanceId,
- service_entity: serviceName,
- });
+ if (isError) {
+ return {
- if (
- diagnostics.failures.length <= 0 &&
- diagnostics.rejections.length === 0
- ) {
- return (
-
-
- );
- }
+ if (isSuccess) {
+ if (data.failures.length <= 0 && data.rejections.length === 0) {
+ return (
+
+
+ );
+ }
- return (
-
-
- );
- }}
- />
- );
+ return (
+
+
+ );
+ }
+
+ return = ({ resourceId, failure }) => {
variant="plain"
onClick={onToggleClick}
isExpanded={isOpen}
- >
- = ({ resourceId, failure }) => {
>
{words("diagnose.failure.title")}
- {resourceId}
+ {resourceId}
{failure.message}
);
};
-
-const StyledCardTitle = styled(CardTitle)`
- ${greyText};
-`;
diff --git a/src/Slices/Diagnose/UI/LookBackSlider.test.tsx b/src/Slices/Diagnose/UI/LookBackSlider.test.tsx
new file mode 100644
index 000000000..dce72e46c
--- /dev/null
+++ b/src/Slices/Diagnose/UI/LookBackSlider.test.tsx
@@ -0,0 +1,80 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { LookBackSlider } from "./LookBackSlider";
+
+it("LookBackSlider calls callback with adequate value on apply", async () => {
+ const callback = jest.fn();
+
+ render(
+ = ({
+ instanceVersion,
+ initialLookBehind,
+ setSelectedVersion,
+}) => {
+ const [valueContinuous, setValueContinuous] = useState(initialLookBehind);
+ const [inputValueContinuous, setInputValueContinuous] =
+ useState(initialLookBehind);
+ const handleChange = (
+ _event: SliderOnChangeEvent,
+ value: number,
+ inputValue?: number,
+ setLocalInputValue?: React.Dispatch>,
+ ) => {
+ let newValue;
+
+ if (inputValue === undefined) {
+ newValue = value;
+ } else {
+ if (inputValue > instanceVersion - 1) {
+ newValue = instanceVersion - 1;
+ if (setLocalInputValue) {
+ setLocalInputValue(instanceVersion - 1);
+ }
+ } else if (inputValue < 1) {
+ newValue = 1;
+ if (setLocalInputValue) {
+ setLocalInputValue(1);
+ }
+ } else {
+ newValue = inputValue;
+ }
+ }
+ setInputValueContinuous(newValue);
+ setValueContinuous(newValue);
+ };
+
+ return (
+
+
+ {words("diagnose.slider.title")}
+
+ {words("diagnose.slider.description")}
+
+
+
+
+
+
+
+
+
+ setSelectedVersion(valueContinuous)}
+ >
+ {words("diagnose.action")}
+
+
+
+ );
+};
diff --git a/src/Slices/Diagnose/UI/Page.tsx b/src/Slices/Diagnose/UI/Page.tsx
index b987b37c8..e7ca5e29f 100644
--- a/src/Slices/Diagnose/UI/Page.tsx
+++ b/src/Slices/Diagnose/UI/Page.tsx
@@ -1,42 +1,66 @@
import React, { useContext } from "react";
-import { RemoteData } from "@/Core";
-import { PageContainer, ServiceInstanceDescription } from "@/UI/Components";
+
+import { useUrlStateWithString } from "@/Data";
+import { useGetInstance } from "@/Data/Managers/V2/GETTERS/GetInstance";
+import {
+ Description,
+ ErrorView,
+ LoadingView,
+ PageContainer,
+} from "@/UI/Components";
import { DependencyContext } from "@/UI/Dependency";
import { useRouteParams } from "@/UI/Routing";
import { words } from "@/UI/words";
import { Diagnose } from "./Diagnose";
+import { LookBackSlider } from "./LookBackSlider";
export const Page: React.FC = () => {
const { service, instance } = useRouteParams<"Diagnose">();
- const { queryResolver } = useContext(DependencyContext);
-
- const [data] = queryResolver.useContinuous<"GetServiceInstance">({
- kind: "GetServiceInstance",
- service_entity: service,
- id: instance,
- });
-
- return (
-
-
- instanceData.service_identity_attribute_value || instanceData.id,
- data,
- ),
- instance,
- )}
- />
-
- );
+ const { environmentHandler } = useContext(DependencyContext);
+
+ const [amountOfVersionToLookBehind, setAmountOfVersionToLookBehind] =
+ useUrlStateWithString({
+ default: "1",
+ key: `lookBehind`,
+ route: "Diagnose",
+ });
+ const { data, error, isError, isSuccess } = useGetInstance(
+ service,
+ instance,
+ environmentHandler.useId(),
+ ).useContinuous();
+
+ const handleSliding = (value: number) => {
+ setAmountOfVersionToLookBehind(value.toString());
+ };
+
+ if (isError) {
+ return
+
+ {words("diagnose.main.subtitle")(id)}
+
+
+ );
+ }
+
+ return = ({
variant="plain"
onClick={onToggleClick}
isExpanded={isOpen}
- >
- = ({
>
{words("diagnose.rejection.title")}
- {error && {error.type} }
+ {error && {error.type} }
{error && {error.message} }
{trace && = ({
);
};
-
-const StyledCardTitle = styled(CardTitle)`
- ${greyText}
-`;
diff --git a/src/Slices/DuplicateInstance/UI/DuplicateInstancePage.test.tsx b/src/Slices/DuplicateInstance/UI/DuplicateInstancePage.test.tsx
index a062c46d5..ff732ee24 100644
--- a/src/Slices/DuplicateInstance/UI/DuplicateInstancePage.test.tsx
+++ b/src/Slices/DuplicateInstance/UI/DuplicateInstancePage.test.tsx
@@ -120,12 +120,9 @@ test("DuplicateInstance View shows success form", async () => {
expect(bandwidthField).toBeVisible();
- await act(async () => {
- await userEvent.type(bandwidthField, "3");
- });
- await act(async () => {
- await userEvent.click(screen.getByText(words("confirm")));
- });
+ await userEvent.type(bandwidthField, "3");
+
+ await userEvent.click(screen.getByText(words("confirm")));
await act(async () => {
const results = await axe(document.body);
@@ -209,16 +206,11 @@ test("Given the DuplicateInstance View When changing a embedded entity Then the
expect(results).toHaveNoViolations();
});
- await act(async () => {
- await userEvent.click(screen.getByRole("button", { name: "circuits" }));
- });
- await act(async () => {
- await userEvent.click(screen.getByRole("button", { name: "1" }));
- });
+ await userEvent.click(screen.getByRole("button", { name: "circuits" }));
- await act(async () => {
- await userEvent.click(screen.getByRole("button", { name: "csp_endpoint" }));
- });
+ await userEvent.click(screen.getByRole("button", { name: "1" }));
+
+ await userEvent.click(screen.getByRole("button", { name: "csp_endpoint" }));
const bandwidthField = screen.getByText("bandwidth");
@@ -228,16 +220,11 @@ test("Given the DuplicateInstance View When changing a embedded entity Then the
"cloud_service_provider",
)[0];
- await act(async () => {
- await userEvent.type(firstCloudServiceProviderField, "2");
- });
+ await userEvent.type(firstCloudServiceProviderField, "2");
- await act(async () => {
- await userEvent.type(bandwidthField, "22");
- });
- await act(async () => {
- await userEvent.click(screen.getByText(words("confirm")));
- });
+ await userEvent.type(bandwidthField, "22");
+
+ await userEvent.click(screen.getByText(words("confirm")));
expect(apiHelper.pendingRequests).toHaveLength(1);
@@ -334,49 +321,57 @@ test("Given the DuplicateInstance View When changing an embedded entity Then the
"DictListFieldInput-editableOptionalEmbedded_base",
);
- await act(async () => {
- await userEvent.click(
- screen.getByRole("button", { name: "embedded_base" }),
- );
- });
- await act(async () => {
- await userEvent.click(
- screen.getByRole("button", { name: "editableEmbedded_base" }),
- );
- });
- await act(async () => {
- await userEvent.click(
- screen.getByRole("button", { name: "optionalEmbedded_base" }),
- );
- });
- await act(async () => {
- await userEvent.click(
- screen.getByRole("button", { name: "editableOptionalEmbedded_base" }),
- );
- });
+ await userEvent.click(screen.getByRole("button", { name: "embedded_base" }));
- expect(within(embedded_base).queryByText("Add")).toBeEnabled();
- expect(within(embedded_base).queryByText("Delete")).toBeDisabled();
+ await userEvent.click(
+ screen.getByRole("button", { name: "editableEmbedded_base" }),
+ );
- expect(within(editableEmbedded_base).queryByText("Add")).toBeEnabled();
- expect(within(editableEmbedded_base).queryByText("Delete")).toBeDisabled();
+ await userEvent.click(
+ screen.getByRole("button", { name: "optionalEmbedded_base" }),
+ );
- expect(within(optionalEmbedded_base).queryByText("Add")).toBeEnabled();
- expect(within(optionalEmbedded_base).queryByText("Delete")).toBeEnabled();
+ await userEvent.click(
+ screen.getByRole("button", { name: "editableOptionalEmbedded_base" }),
+ );
expect(
- within(editableOptionalEmbedded_base).queryByText("Add"),
+ within(embedded_base).queryByRole("button", { name: "Add" }),
).toBeEnabled();
expect(
- within(editableOptionalEmbedded_base).queryByText("Delete"),
+ within(embedded_base).queryByRole("button", { name: "Delete" }),
+ ).toBeDisabled();
+
+ expect(
+ within(editableEmbedded_base).queryByRole("button", { name: "Add" }),
+ ).toBeEnabled();
+ expect(
+ within(editableEmbedded_base).queryByRole("button", { name: "Delete" }),
+ ).toBeDisabled();
+
+ expect(
+ within(optionalEmbedded_base).queryByRole("button", { name: "Add" }),
+ ).toBeEnabled();
+ expect(
+ within(optionalEmbedded_base).queryByRole("button", { name: "Delete" }),
+ ).toBeEnabled();
+
+ expect(
+ within(editableOptionalEmbedded_base).queryByRole("button", {
+ name: "Add",
+ }),
+ ).toBeEnabled();
+ expect(
+ within(editableOptionalEmbedded_base).queryByRole("button", {
+ name: "Delete",
+ }),
).toBeEnabled();
//check if direct attributes for embedded entities are correctly displayed
- await act(async () => {
- await userEvent.click(
- within(embedded_base).getByRole("button", { name: "0" }),
- );
- });
+ await userEvent.click(
+ within(embedded_base).getByRole("button", { name: "0" }),
+ );
+
expect(within(embedded_base).queryByDisplayValue("string")).toBeEnabled();
expect(
within(embedded_base).queryByDisplayValue("editableString"),
@@ -408,31 +403,31 @@ test("Given the DuplicateInstance View When changing an embedded entity Then the
expect(
within(embedded_base).queryByLabelText("TextFieldInput-string[]"),
- ).not.toHaveClass("is-disabled");
+ ).toBeEnabled();
expect(
within(embedded_base).queryByLabelText("TextFieldInput-editableString[]"),
- ).not.toHaveClass("is-disabled");
+ ).toBeEnabled();
expect(
within(embedded_base).queryByLabelText("TextFieldInput-string[]?"),
- ).not.toHaveClass("is-disabled");
+ ).toBeEnabled();
expect(
within(embedded_base).queryByLabelText("TextFieldInput-editableString[]?"),
- ).not.toHaveClass("is-disabled");
+ ).toBeEnabled();
expect(
within(embedded_base).queryByTestId("enum-select-toggle"),
- ).not.toHaveClass("pf-m-disabled");
+ ).toBeEnabled();
expect(
within(embedded_base).queryByTestId("editableEnum-select-toggle"),
- ).not.toHaveClass("pf-m-disabled");
+ ).toBeEnabled();
expect(
within(embedded_base).queryByTestId("enum?-select-toggle"),
- ).not.toHaveClass("pf-m-disabled");
+ ).toBeEnabled();
expect(
within(embedded_base).queryByTestId("editableEnum?-select-toggle"),
- ).not.toHaveClass("pf-m-disabled");
+ ).toBeEnabled();
expect(
within(embedded_base).queryByLabelText("TextInput-dict"),
@@ -463,53 +458,61 @@ test("Given the DuplicateInstance View When changing an embedded entity Then the
"DictListFieldInput-embedded_base.0.editableEmbedded?",
);
- await act(async () => {
- await userEvent.click(
- within(embedded_base).getByRole("button", { name: "embedded" }),
- );
- });
+ await userEvent.click(
+ within(embedded_base).getByRole("button", { name: "embedded" }),
+ );
- await act(async () => {
- await userEvent.click(
- within(embedded_base).getByRole("button", {
- name: "editableEmbedded",
- }),
- );
- });
+ await userEvent.click(
+ within(embedded_base).getByRole("button", {
+ name: "editableEmbedded",
+ }),
+ );
- await act(async () => {
- await userEvent.click(
- within(embedded_base).getByRole("button", {
- name: "embedded?",
- }),
- );
- });
+ await userEvent.click(
+ within(embedded_base).getByRole("button", {
+ name: "embedded?",
+ }),
+ );
- await act(async () => {
- await userEvent.click(
- within(embedded_base).getByRole("button", {
- name: "editableEmbedded?",
- }),
- );
- });
+ await userEvent.click(
+ within(embedded_base).getByRole("button", {
+ name: "editableEmbedded?",
+ }),
+ );
- expect(within(nested_embedded_base).queryByText("Add")).toBeEnabled();
- expect(within(nested_embedded_base).queryByText("Delete")).toBeDisabled();
+ expect(
+ within(nested_embedded_base).queryByRole("button", { name: "Add" }),
+ ).toBeEnabled();
+ expect(
+ within(nested_embedded_base).queryByRole("button", { name: "Delete" }),
+ ).toBeDisabled();
- expect(within(nested_editableEmbedded_base).queryByText("Add")).toBeEnabled();
expect(
- within(nested_editableEmbedded_base).queryByText("Delete"),
+ within(nested_editableEmbedded_base).queryByRole("button", { name: "Add" }),
+ ).toBeEnabled();
+ expect(
+ within(nested_editableEmbedded_base).queryByRole("button", {
+ name: "Delete",
+ }),
).toBeDisabled();
- expect(within(nested_optionalEmbedded_base).queryByText("Add")).toBeEnabled();
expect(
- within(nested_optionalEmbedded_base).queryByText("Delete"),
+ within(nested_optionalEmbedded_base).queryByRole("button", { name: "Add" }),
+ ).toBeEnabled();
+ expect(
+ within(nested_optionalEmbedded_base).queryByRole("button", {
+ name: "Delete",
+ }),
).toBeEnabled();
expect(
- within(nested_editableOptionalEmbedded_base).queryByText("Add"),
+ within(nested_editableOptionalEmbedded_base).queryByRole("button", {
+ name: "Add",
+ }),
).toBeEnabled();
expect(
- within(nested_editableOptionalEmbedded_base).queryByText("Delete"),
+ within(nested_editableOptionalEmbedded_base).queryByRole("button", {
+ name: "Delete",
+ }),
).toBeEnabled();
});
diff --git a/src/Slices/EditInstance/UI/EditInstancePage.test.tsx b/src/Slices/EditInstance/UI/EditInstancePage.test.tsx
index 412a63c84..f59e09391 100644
--- a/src/Slices/EditInstance/UI/EditInstancePage.test.tsx
+++ b/src/Slices/EditInstance/UI/EditInstancePage.test.tsx
@@ -142,12 +142,9 @@ test("EditInstance View shows success form", async () => {
expect(bandwidthField).toBeVisible();
- await act(async () => {
- await userEvent.type(bandwidthField, "2");
- });
- await act(async () => {
- await userEvent.click(screen.getByText(words("confirm")));
- });
+ await userEvent.type(bandwidthField, "2");
+
+ await userEvent.click(screen.getByText(words("confirm")));
expect(apiHelper.pendingRequests).toHaveLength(1);
expect(apiHelper.pendingRequests[0]).toEqual({
@@ -184,12 +181,9 @@ test("Given the EditInstance View When changing a v1 embedded entity Then the co
await screen.findByRole("generic", { name: "EditInstance-Success" }),
).toBeInTheDocument();
- await act(async () => {
- await userEvent.click(screen.getByRole("button", { name: "circuits" }));
- });
- await act(async () => {
- await userEvent.click(screen.getByRole("button", { name: "0" }));
- });
+ await userEvent.click(screen.getByRole("button", { name: "circuits" }));
+
+ await userEvent.click(screen.getByRole("button", { name: "0" }));
expect(screen.getByLabelText("TextInput-service_id")).toBeDisabled();
@@ -197,12 +191,9 @@ test("Given the EditInstance View When changing a v1 embedded entity Then the co
expect(bandwidthField).toBeVisible();
- await act(async () => {
- await userEvent.type(bandwidthField, "22");
- });
- await act(async () => {
- await userEvent.click(screen.getByText(words("confirm")));
- });
+ await userEvent.type(bandwidthField, "22");
+
+ await userEvent.click(screen.getByText(words("confirm")));
expect(apiHelper.pendingRequests).toHaveLength(1);
@@ -240,12 +231,9 @@ test("Given the EditInstance View When changing a v2 embedded entity Then the co
await screen.findByRole("generic", { name: "EditInstance-Success" }),
).toBeInTheDocument();
- await act(async () => {
- await userEvent.click(screen.getByRole("button", { name: "circuits" }));
- });
- await act(async () => {
- await userEvent.click(screen.getByRole("button", { name: "0" }));
- });
+ await userEvent.click(screen.getByRole("button", { name: "circuits" }));
+
+ await userEvent.click(screen.getByRole("button", { name: "0" }));
expect(screen.getByLabelText("TextInput-service_id")).toBeDisabled();
@@ -253,12 +241,9 @@ test("Given the EditInstance View When changing a v2 embedded entity Then the co
expect(bandwidthField).toBeVisible();
- await act(async () => {
- await userEvent.type(bandwidthField, "24");
- });
- await act(async () => {
- await userEvent.click(screen.getByText(words("confirm")));
- });
+ await userEvent.type(bandwidthField, "24");
+
+ await userEvent.click(screen.getByText(words("confirm")));
expect(apiHelper.pendingRequests).toHaveLength(1);
@@ -365,50 +350,57 @@ test("Given the EditInstance View When changing an embedded entity Then the inpu
"DictListFieldInput-editableOptionalEmbedded_base",
);
- await act(async () => {
- await userEvent.click(
- screen.getByRole("button", { name: "embedded_base" }),
- );
- });
- await act(async () => {
- await userEvent.click(
- screen.getByRole("button", { name: "editableEmbedded_base" }),
- );
- });
- await act(async () => {
- await userEvent.click(
- screen.getByRole("button", { name: "optionalEmbedded_base" }),
- );
- });
- await act(async () => {
- await userEvent.click(
- screen.getByRole("button", { name: "editableOptionalEmbedded_base" }),
- );
- });
+ await userEvent.click(screen.getByRole("button", { name: "embedded_base" }));
+
+ await userEvent.click(
+ screen.getByRole("button", { name: "editableEmbedded_base" }),
+ );
- expect(within(embedded_base).queryByText("Add")).toBeDisabled();
- expect(within(embedded_base).queryByText("Delete")).toBeDisabled();
+ await userEvent.click(
+ screen.getByRole("button", { name: "optionalEmbedded_base" }),
+ );
- expect(within(editableEmbedded_base).queryByText("Add")).toBeEnabled();
- expect(within(editableEmbedded_base).queryByText("Delete")).toBeDisabled();
+ await userEvent.click(
+ screen.getByRole("button", { name: "editableOptionalEmbedded_base" }),
+ );
- expect(within(optionalEmbedded_base).queryByText("Add")).toBeDisabled();
- expect(within(optionalEmbedded_base).queryByText("Delete")).toBeDisabled();
+ expect(
+ within(embedded_base).queryByRole("button", { name: "Add" }),
+ ).toBeDisabled();
+ expect(
+ within(embedded_base).queryByRole("button", { name: "Delete" }),
+ ).toBeDisabled();
+
+ expect(
+ within(editableEmbedded_base).queryByRole("button", { name: "Add" }),
+ ).toBeEnabled();
+ expect(
+ within(editableEmbedded_base).queryByRole("button", { name: "Delete" }),
+ ).toBeDisabled();
+
+ expect(
+ within(optionalEmbedded_base).queryByRole("button", { name: "Add" }),
+ ).toBeDisabled();
+ expect(
+ within(optionalEmbedded_base).queryByRole("button", { name: "Delete" }),
+ ).toBeDisabled();
expect(
- within(editableOptionalEmbedded_base).queryByText("Add"),
+ within(editableOptionalEmbedded_base).queryByRole("button", {
+ name: "Add",
+ }),
).toBeEnabled();
expect(
- within(editableOptionalEmbedded_base).queryByText("Delete"),
+ within(editableOptionalEmbedded_base).queryByRole("button", {
+ name: "Delete",
+ }),
).toBeEnabled();
//check if direct attributes for embedded entities are correctly displayed
+ await userEvent.click(
+ within(embedded_base).getByRole("button", { name: "0" }),
+ );
- await act(async () => {
- await userEvent.click(
- within(embedded_base).getByRole("button", { name: "0" }),
- );
- });
expect(within(embedded_base).queryByDisplayValue("string")).toBeDisabled();
expect(
within(embedded_base).queryByDisplayValue("editableString"),
@@ -495,56 +487,62 @@ test("Given the EditInstance View When changing an embedded entity Then the inpu
"DictListFieldInput-embedded_base.0.editableEmbedded?",
);
- await act(async () => {
- await userEvent.click(
- within(embedded_base).getByRole("button", { name: "embedded" }),
- );
- });
+ await userEvent.click(
+ within(embedded_base).getByRole("button", { name: "embedded" }),
+ );
- await act(async () => {
- await userEvent.click(
- within(embedded_base).getByRole("button", {
- name: "editableEmbedded",
- }),
- );
- });
+ await userEvent.click(
+ within(embedded_base).getByRole("button", {
+ name: "editableEmbedded",
+ }),
+ );
- await act(async () => {
- await userEvent.click(
- within(embedded_base).getByRole("button", {
- name: "embedded?",
- }),
- );
- });
+ await userEvent.click(
+ within(embedded_base).getByRole("button", {
+ name: "embedded?",
+ }),
+ );
- await act(async () => {
- await userEvent.click(
- within(embedded_base).getByRole("button", {
- name: "editableEmbedded?",
- }),
- );
- });
+ await userEvent.click(
+ within(embedded_base).getByRole("button", {
+ name: "editableEmbedded?",
+ }),
+ );
- expect(within(nested_embedded_base).queryByText("Add")).toBeDisabled();
- expect(within(nested_embedded_base).queryByText("Delete")).toBeDisabled();
+ expect(
+ within(nested_embedded_base).queryByRole("button", { name: "Add" }),
+ ).toBeDisabled();
+ expect(
+ within(nested_embedded_base).queryByRole("button", { name: "Delete" }),
+ ).toBeDisabled();
- expect(within(nested_editableEmbedded_base).queryByText("Add")).toBeEnabled();
expect(
- within(nested_editableEmbedded_base).queryByText("Delete"),
+ within(nested_editableEmbedded_base).queryByRole("button", { name: "Add" }),
+ ).toBeEnabled();
+ expect(
+ within(nested_editableEmbedded_base).queryByRole("button", {
+ name: "Delete",
+ }),
).toBeDisabled();
expect(
- within(nested_optionalEmbedded_base).queryByText("Add"),
+ within(nested_optionalEmbedded_base).queryByRole("button", { name: "Add" }),
).toBeDisabled();
expect(
- within(nested_optionalEmbedded_base).queryByText("Delete"),
+ within(nested_optionalEmbedded_base).queryByRole("button", {
+ name: "Delete",
+ }),
).toBeDisabled();
expect(
- within(nested_editableOptionalEmbedded_base).queryByText("Add"),
+ within(nested_editableOptionalEmbedded_base).queryByRole("button", {
+ name: "Add",
+ }),
).toBeEnabled();
expect(
- within(nested_editableOptionalEmbedded_base).queryByText("Delete"),
+ within(nested_editableOptionalEmbedded_base).queryByRole("button", {
+ name: "Delete",
+ }),
).toBeEnabled();
await act(async () => {
@@ -573,23 +571,16 @@ test("Given the EditInstance View When adding new nested embedded entity Then th
"DictListFieldInput-editableOptionalEmbedded_base",
);
- await act(async () => {
- await userEvent.click(
- screen.getByRole("button", { name: "editableOptionalEmbedded_base" }),
- );
- });
+ await userEvent.click(
+ screen.getByRole("button", { name: "editableOptionalEmbedded_base" }),
+ );
- await act(async () => {
- await userEvent.click(
- within(editableOptionalEmbedded_base).getByText("Add"),
- );
- });
+ await userEvent.click(within(editableOptionalEmbedded_base).getByText("Add"));
+
+ await userEvent.click(
+ within(editableOptionalEmbedded_base).getByRole("button", { name: "1" }),
+ );
- await act(async () => {
- await userEvent.click(
- within(editableOptionalEmbedded_base).getByRole("button", { name: "1" }),
- );
- });
const addedOptionalEmbedded = screen.getByLabelText(
"DictListFieldInputItem-editableOptionalEmbedded_base.1",
);
@@ -662,65 +653,70 @@ test("Given the EditInstance View When adding new nested embedded entity Then th
"DictListFieldInput-editableOptionalEmbedded_base.1.editableEmbedded?",
);
- await act(async () => {
- await userEvent.click(
- within(addedOptionalEmbedded).getByRole("button", { name: "embedded" }),
- );
- });
+ await userEvent.click(
+ within(addedOptionalEmbedded).getByRole("button", { name: "embedded" }),
+ );
- await act(async () => {
- await userEvent.click(
- within(addedOptionalEmbedded).getByRole("button", {
- name: "editableEmbedded",
- }),
- );
- });
+ await userEvent.click(
+ within(addedOptionalEmbedded).getByRole("button", {
+ name: "editableEmbedded",
+ }),
+ );
- await act(async () => {
- await userEvent.click(
- within(addedOptionalEmbedded).getByRole("button", {
- name: "embedded?",
- }),
- );
- });
+ await userEvent.click(
+ within(addedOptionalEmbedded).getByRole("button", {
+ name: "embedded?",
+ }),
+ );
- await act(async () => {
- await userEvent.click(
- within(addedOptionalEmbedded).getByRole("button", {
- name: "editableEmbedded?",
- }),
- );
- });
+ await userEvent.click(
+ within(addedOptionalEmbedded).getByRole("button", {
+ name: "editableEmbedded?",
+ }),
+ );
- expect(within(nested_embedded_base).queryByText("Add")).toBeEnabled();
- expect(within(nested_embedded_base).queryByText("Delete")).toBeDisabled();
+ expect(
+ within(nested_embedded_base).queryByRole("button", { name: "Add" }),
+ ).toBeEnabled();
+ expect(
+ within(nested_embedded_base).queryByRole("button", { name: "Delete" }),
+ ).toBeDisabled();
- expect(within(nested_editableEmbedded_base).queryByText("Add")).toBeEnabled();
expect(
- within(nested_editableEmbedded_base).queryByText("Delete"),
+ within(nested_editableEmbedded_base).queryByRole("button", { name: "Add" }),
+ ).toBeEnabled();
+ expect(
+ within(nested_editableEmbedded_base).queryByRole("button", {
+ name: "Delete",
+ }),
).toBeDisabled();
- expect(within(nested_optionalEmbedded_base).queryByText("Add")).toBeEnabled();
- await act(async () => {
- await userEvent.click(
- within(nested_optionalEmbedded_base).getByText("Add"),
- );
- });
expect(
- within(nested_optionalEmbedded_base).queryByText("Delete"),
+ within(nested_optionalEmbedded_base).queryByRole("button", { name: "Add" }),
+ ).toBeEnabled();
+
+ await userEvent.click(within(nested_optionalEmbedded_base).getByText("Add"));
+
+ expect(
+ within(nested_optionalEmbedded_base).queryByRole("button", {
+ name: "Delete",
+ }),
).toBeEnabled();
expect(
- within(nested_editableOptionalEmbedded_base).queryByText("Add"),
+ within(nested_editableOptionalEmbedded_base).queryByRole("button", {
+ name: "Add",
+ }),
).toBeEnabled();
- await act(async () => {
- await userEvent.click(
- within(nested_editableOptionalEmbedded_base).getByText("Add"),
- );
- });
+
+ await userEvent.click(
+ within(nested_editableOptionalEmbedded_base).getByText("Add"),
+ );
expect(
- within(nested_editableOptionalEmbedded_base).queryByText("Delete"),
+ within(nested_editableOptionalEmbedded_base).queryByRole("button", {
+ name: "Delete",
+ }),
).toBeEnabled();
await act(async () => {
@@ -743,67 +739,45 @@ test("GIVEN the EditInstance View WHEN changing an embedded entity with nested e
await apiHelper.resolve(Either.right({ data: ServiceInstance.a }));
});
- await act(async () => {
- await userEvent.click(screen.getByRole("button", { name: "embedded" }));
- });
+ await userEvent.click(screen.getByRole("button", { name: "embedded" }));
- await act(async () => {
- await userEvent.click(screen.getByText("Add"));
- });
+ await userEvent.click(screen.getByText("Add"));
- await act(async () => {
- await userEvent.click(screen.getByRole("button", { name: "0" }));
- });
+ await userEvent.click(screen.getByRole("button", { name: "0" }));
- await act(async () => {
- await userEvent.click(screen.getAllByText("Add")[1]);
- });
+ await userEvent.click(screen.getAllByText("Add")[1]);
- await act(async () => {
- await userEvent.click(
- screen.getByRole("button", { name: "embedded_single" }),
- );
- });
+ await userEvent.click(
+ screen.getByRole("button", { name: "embedded_single" }),
+ );
- await act(async () => {
- await userEvent.click(screen.getAllByText("Add")[2]);
- });
+ await userEvent.click(screen.getAllByText("Add")[2]);
const another_embedded_group = screen.getByLabelText(
"DictListFieldInput-embedded.0.embedded_single.another_embedded",
);
- await act(async () => {
- await userEvent.click(
- screen.getByRole("button", { name: "another_embedded" }),
- );
- });
+ await userEvent.click(
+ screen.getByRole("button", { name: "another_embedded" }),
+ );
- await act(async () => {
- await userEvent.click(
- within(another_embedded_group).getByRole("button", { name: "0" }),
- );
- });
+ await userEvent.click(
+ within(another_embedded_group).getByRole("button", { name: "0" }),
+ );
const deep_nested_group = screen.getByLabelText(
"DictListFieldInput-embedded.0.embedded_single.another_embedded.0.another_deeper_embedded",
);
- await act(async () => {
- await userEvent.click(within(deep_nested_group).getByText("Add"));
- });
+ await userEvent.click(within(deep_nested_group).getByText("Add"));
- await act(async () => {
- await userEvent.click(
- screen.getByRole("button", { name: "another_deeper_embedded" }),
- );
- });
+ await userEvent.click(
+ screen.getByRole("button", { name: "another_deeper_embedded" }),
+ );
- await act(async () => {
- await userEvent.click(
- within(deep_nested_group).getByRole("button", { name: "0" }),
- );
- });
+ await userEvent.click(
+ within(deep_nested_group).getByRole("button", { name: "0" }),
+ );
// expect all fields in deep_nested_group to be enabled
const deep_nested_group_fields =
diff --git a/src/Slices/Events/UI/Events.test.tsx b/src/Slices/Events/UI/Events.test.tsx
index aea02963a..dd510ff3c 100644
--- a/src/Slices/Events/UI/Events.test.tsx
+++ b/src/Slices/Events/UI/Events.test.tsx
@@ -250,9 +250,8 @@ test("GIVEN EventsView WHEN sorting changes AND we are not on the first page THE
expect(nextPageButton).toBeEnabled();
- await act(async () => {
- await userEvent.click(nextPageButton);
- });
+ await userEvent.click(nextPageButton);
+
//expect the api url to contain start and end keywords that are used for pagination when we are moving to the next page
expect(apiHelper.pendingRequests[0].url).toMatch(/(&start=|&end=)/);
expect(apiHelper.pendingRequests[0].url).toMatch(/(&sort=timestamp.desc)/);
@@ -262,9 +261,7 @@ test("GIVEN EventsView WHEN sorting changes AND we are not on the first page THE
});
//sort on the second page
- await act(async () => {
- await userEvent.click(screen.getByText("Date"));
- });
+ await userEvent.click(screen.getByText("Date"));
// expect the api url to not contain start and end keywords that are used for pagination to assert we are back on the first page.
// we are asserting on the second request as the first request is for the updated sorting event, and second is chained to back to the first page with still correct sorting
diff --git a/src/Slices/Events/UI/FilterWidget/VersionFilter.tsx b/src/Slices/Events/UI/FilterWidget/VersionFilter.tsx
index 18591b698..cf692d1f8 100644
--- a/src/Slices/Events/UI/FilterWidget/VersionFilter.tsx
+++ b/src/Slices/Events/UI/FilterWidget/VersionFilter.tsx
@@ -35,8 +35,8 @@ export const VersionFilter: React.FC = ({
return (
@@ -55,12 +55,11 @@ export const VersionFilter: React.FC = ({
diff --git a/src/Slices/Events/UI/Spec/EventsPageIntegration.test.tsx b/src/Slices/Events/UI/Spec/EventsPageIntegration.test.tsx
index f88c9a178..20f96575a 100644
--- a/src/Slices/Events/UI/Spec/EventsPageIntegration.test.tsx
+++ b/src/Slices/Events/UI/Spec/EventsPageIntegration.test.tsx
@@ -45,33 +45,25 @@ describe("Given the Events Page", () => {
expect(initialRows).toHaveLength(14);
- await act(async () => {
- await userEvent.click(
- within(screen.getByRole("toolbar", { name: "FilterBar" })).getByRole(
- "button",
- { name: "FilterPicker" },
- ),
- );
- });
- await act(async () => {
- await userEvent.click(screen.getByRole("option", { name: filterName }));
- });
+ await userEvent.click(
+ within(screen.getByRole("toolbar", { name: "FilterBar" })).getByRole(
+ "button",
+ { name: "FilterPicker" },
+ ),
+ );
+
+ await userEvent.click(screen.getByRole("option", { name: filterName }));
const input = await screen.findByPlaceholderText(placeholderText);
- await act(async () => {
- await userEvent.click(input);
- });
+ await userEvent.click(input);
+
if (filterType === "select") {
const option = await screen.findByRole("option", { name: filterValue });
- await act(async () => {
- await userEvent.click(option);
- });
+ await userEvent.click(option);
} else {
- await act(async () => {
- await userEvent.type(input, `${filterValue}{enter}`);
- });
+ await userEvent.type(input, `${filterValue}{enter}`);
}
expect(apiHelper.pendingRequests[0].url).toEqual(
@@ -119,38 +111,25 @@ describe("Given the Events Page", () => {
expect(initialRows).toHaveLength(14);
- await act(async () => {
- await userEvent.click(
- within(screen.getByRole("toolbar", { name: "FilterBar" })).getByRole(
- "button",
- { name: "FilterPicker" },
- ),
- );
- });
- await act(async () => {
- await userEvent.click(screen.getByRole("option", { name: "Date" }));
- });
+ await userEvent.click(
+ within(screen.getByRole("toolbar", { name: "FilterBar" })).getByRole(
+ "button",
+ { name: "FilterPicker" },
+ ),
+ );
+
+ await userEvent.click(screen.getByRole("option", { name: "Date" }));
const fromDatePicker = await screen.findByLabelText("From Date Picker");
- await act(async () => {
- await userEvent.click(fromDatePicker);
- });
- await act(async () => {
- await userEvent.type(fromDatePicker, `2021-04-28`);
- });
+ await userEvent.type(fromDatePicker, `2021-04-28`);
+
const toDatePicker = await screen.findByLabelText("To Date Picker");
- await act(async () => {
- await userEvent.click(toDatePicker);
- });
- await act(async () => {
- await userEvent.type(toDatePicker, `2021-04-30`);
- });
+ await userEvent.type(toDatePicker, `2021-04-30`);
+
+ await userEvent.click(await screen.findByLabelText("Apply date filter"));
- await act(async () => {
- await userEvent.click(await screen.findByLabelText("Apply date filter"));
- });
expect(apiHelper.pendingRequests[0].url).toMatch(
`/lsm/v1/service_inventory/${Service.a.name}/id1/events?limit=20&sort=timestamp.desc&filter.timestamp=ge%3A2021-04-`,
);
@@ -213,33 +192,22 @@ describe("Given the Events Page", () => {
expect(initialRows).toHaveLength(14);
- await act(async () => {
- await userEvent.click(
- within(screen.getByRole("toolbar", { name: "FilterBar" })).getByRole(
- "button",
- { name: "FilterPicker" },
- ),
- );
- });
- await act(async () => {
- await userEvent.click(screen.getByRole("option", { name: "Date" }));
- });
+ await userEvent.click(
+ within(screen.getByRole("toolbar", { name: "FilterBar" })).getByRole(
+ "button",
+ { name: "FilterPicker" },
+ ),
+ );
+
+ await userEvent.click(screen.getByRole("option", { name: "Date" }));
const toDatePicker = await screen.findByLabelText(
`${filterType} Date Picker`,
);
- await act(async () => {
- await userEvent.click(toDatePicker);
- });
- await act(async () => {
- await userEvent.type(toDatePicker, value);
- });
- await act(async () => {
- await userEvent.click(
- await screen.findByLabelText("Apply date filter"),
- );
- });
+ await userEvent.type(toDatePicker, value);
+
+ await userEvent.click(await screen.findByLabelText("Apply date filter"));
expect(apiHelper.pendingRequests[0].url).toMatch(
`/lsm/v1/service_inventory/${Service.a.name}/id1/events?limit=20&sort=timestamp.desc&filter.timestamp=${operator}%3A2021-05-`,
@@ -268,9 +236,13 @@ describe("Given the Events Page", () => {
});
expect(await screen.findByText(chip, { exact: false })).toBeVisible();
- await act(async () => {
- await userEvent.click(await screen.findByLabelText("close"));
- });
+
+ await userEvent.click(
+ screen.getByRole("button", {
+ name: `Close ${chip}`,
+ }),
+ );
+
expect(apiHelper.pendingRequests[0].url).toMatch(
`/lsm/v1/service_inventory/${Service.a.name}/id1/events?limit=20&sort=timestamp.desc`,
);
diff --git a/src/Slices/Facts/UI/FactsRow.tsx b/src/Slices/Facts/UI/FactsRow.tsx
index e2ed11943..2eafa2dab 100644
--- a/src/Slices/Facts/UI/FactsRow.tsx
+++ b/src/Slices/Facts/UI/FactsRow.tsx
@@ -21,7 +21,7 @@ export const FactsRow: React.FC = ({ row }) => {
{row.value}
-
+
+
{displayName}
-
+
);
});
@@ -74,21 +68,3 @@ export const FactsTable: React.FC = ({
);
};
-
-interface HeaderProps {
- $characters: number;
- $hasSort: boolean;
-}
-
-const getWidth = ({ $characters, $hasSort }: HeaderProps) => {
- const base = `${$characters}ch`;
- const extra = $hasSort ? "60px" : "16px";
-
- return `calc(${base} + ${extra})`;
-};
-
-const StyledTh = styled(Th)`
- &&& {
- min-width: ${getWidth};
- }
-`;
diff --git a/src/Slices/Facts/UI/Page.test.tsx b/src/Slices/Facts/UI/Page.test.tsx
index cfade5614..41f8f0207 100644
--- a/src/Slices/Facts/UI/Page.test.tsx
+++ b/src/Slices/Facts/UI/Page.test.tsx
@@ -107,9 +107,9 @@ test("GIVEN Facts page THEN sets sorting parameters correctly on click", async (
});
expect(resourceIdButton).toBeVisible();
- await act(async () => {
- await userEvent.click(resourceIdButton);
- });
+
+ await userEvent.click(resourceIdButton);
+
expect(apiHelper.pendingRequests[0].url).toContain("&sort=resource_id.asc");
await act(async () => {
@@ -149,13 +149,7 @@ test.each`
const input = await screen.findByPlaceholderText(placeholderText);
- await act(async () => {
- await userEvent.click(input);
- });
-
- await act(async () => {
- await userEvent.type(input, `${filterValue}{enter}`);
- });
+ await userEvent.type(input, `${filterValue}{enter}`);
expect(apiHelper.pendingRequests[0].url).toEqual(
`/api/v2/facts?limit=20&filter.${filterUrlName}=${filterValue}&sort=name.asc`,
@@ -212,9 +206,7 @@ test("GIVEN FactsView WHEN sorting changes AND we are not on the first page THEN
expect(screen.getByLabelText("Go to next page")).toBeEnabled();
- await act(async () => {
- await userEvent.click(screen.getByLabelText("Go to next page"));
- });
+ await userEvent.click(screen.getByLabelText("Go to next page"));
//expect the api url to contain start and end keywords that are used for pagination when we are moving to the next page
expect(apiHelper.pendingRequests[0].url).toMatch(/(&start=|&end=)/);
@@ -243,9 +235,7 @@ test("GIVEN FactsView WHEN sorting changes AND we are not on the first page THEN
expect(resourceIdButton).toBeVisible();
- await act(async () => {
- await userEvent.click(resourceIdButton);
- });
+ await userEvent.click(resourceIdButton);
// expect the api url to not contain start and end keywords that are used for pagination to assert we are back on the first page.
// we are asserting on the second request as the first request is for the updated sorting event, and second is chained to back to the first page with still correct sorting
diff --git a/src/Slices/Home/UI/CardView.tsx b/src/Slices/Home/UI/CardView.tsx
index 69b54af0a..69de9e234 100644
--- a/src/Slices/Home/UI/CardView.tsx
+++ b/src/Slices/Home/UI/CardView.tsx
@@ -1,23 +1,25 @@
import React, { useContext } from "react";
import {
+ Brand,
Bullseye,
Card,
CardBody,
CardFooter,
+ CardHeader,
CardTitle,
+ Content,
EmptyState,
- EmptyStateIcon,
EmptyStateVariant,
Gallery,
+ Label,
PageSection,
Title,
} from "@patternfly/react-core";
import { PlusCircleIcon } from "@patternfly/react-icons";
-import styled from "styled-components";
import { FlatEnvironment } from "@/Core";
import { DependencyContext } from "@/UI";
-import { Link } from "@/UI/Components";
import { words } from "@/UI/words";
+import fallBackImage from "@images/inmanta-wings.svg";
interface Props {
environments: FlatEnvironment[];
@@ -28,17 +30,8 @@ export const CardView: React.FC = ({ environments, ...props }) => {
const pathname = routeManager.getUrl("Dashboard", undefined);
return (
-
-
+
+
= ({ environments, ...props }) => {
};
const CreateNewEnvironmentCard: React.FC<{ url: string }> = ({ url }) => (
-
+
+
-
-
-
- {words("home.create.env.desciption")}
-
-
-
-
+
+
+
+ {words("home.create.env.desciption")}
+
+
+
-
+
);
interface EnvironmentCardProps {
@@ -81,87 +78,33 @@ const EnvironmentCard: React.FC = ({
pathname,
}) => {
return (
-
-
+
-
- {environment.icon ? (
-
- {environment.name[0].toUpperCase()}
-
- )}
- {environment.name}
-
-
- {environment.description}
-
-
- {environment.projectName}
-
-
-
+
+ {environment.name}
+
+
+
+ {environment.description}
+
+
+ {environment.projectName}
+
+
);
};
-
-const StyledLink = styled(Link)`
- text-decoration: auto;
- color: var(--pf-v5-global--Color--100);
-`;
-
-const StyledCardContent = styled.div`
- white-space: pre-wrap;
- height: 20ch;
-`;
-
-const StyledFooterDiv = styled.div`
- color: var(--pf-v5-global--secondary-color--100);
-`;
-
-const StyledIcon = styled.img`
- width: 40px;
- height: 40px;
- object-fit: contain;
- display: inline-block;
-`;
-
-const FillerIcon = styled.div`
- display: inline-block;
- width: 40px;
- height: 40px;
- line-height: 40px;
- text-align: center;
- color: white;
- background-color: var(--pf-v5-global--custom-color--100);
- border-radius: 50%;
-`;
-
-const StyledTitle = styled(CardTitle)`
- display: flex;
- gap: 10px;
- flex-direction: row;
- flex-wrap: nowrap;
- align-items: center;
- font-weight: var(--pf-v5-global--FontWeight--bold);
-}
-`;
-
-const StyledCard = styled(Card)`
- height: 30ch;
- &.pf-m-clickable:hover {
- box-shadow: var(--pf-v5-global--BoxShadow--lg);
- }
-`;
-
-const AlignedEmptyState = styled(EmptyState)`
- margin-top: 54px;
-`;
diff --git a/src/Slices/Home/UI/EnvironmentsOverview.test.tsx b/src/Slices/Home/UI/EnvironmentsOverview.test.tsx
index 1cb84a6e5..1aa36a3a0 100644
--- a/src/Slices/Home/UI/EnvironmentsOverview.test.tsx
+++ b/src/Slices/Home/UI/EnvironmentsOverview.test.tsx
@@ -1,4 +1,4 @@
-import React, { act } from "react";
+import React from "react";
import { MemoryRouter } from "react-router-dom";
import { render, screen } from "@testing-library/react";
import { userEvent } from "@testing-library/user-event";
@@ -37,12 +37,7 @@ it.each`
words("home.filters.env.placeholder"),
);
- await act(async () => {
- await userEvent.click(input);
- });
- await act(async () => {
- await userEvent.type(input, filterValue);
- });
+ await userEvent.type(input, filterValue);
expect(screen.queryAllByTestId("Environment card")).toHaveLength(
numberOfResults,
@@ -62,15 +57,11 @@ test("Given environments overview When filtering by project Then only the matchi
words("home.filters.project.placeholder"),
);
- await act(async () => {
- await userEvent.click(input);
- });
+ await userEvent.click(input);
const option = await screen.findByRole("option", { name: "default" });
- await act(async () => {
- await userEvent.click(option);
- });
+ await userEvent.click(option);
expect(screen.queryAllByTestId("Environment card")).toHaveLength(2);
});
@@ -86,39 +77,35 @@ test("Given environments overview When filtering by name and project Then only t
words("home.filters.project.placeholder"),
);
- await act(async () => {
- await userEvent.click(projectInput);
- });
+ await userEvent.click(projectInput);
const option = await screen.findByRole("option", { name: "default" });
- await act(async () => {
- await userEvent.click(option);
- });
+ await userEvent.click(option);
+
const nameInput = await screen.findByPlaceholderText(
words("home.filters.env.placeholder"),
);
- await act(async () => {
- await userEvent.click(nameInput);
- });
- await act(async () => {
- await userEvent.type(nameInput, "test");
- });
+ await userEvent.type(nameInput, "test");
expect(await screen.findByTestId("Environment card")).toBeVisible();
});
-test("Given environments overview When rendering environment with icon Then the icon is shown", async () => {
+test("Given environments overview When rendering environment with icon Then the icon is shown, otherwise, show default icon", async () => {
const { component } = setup();
render(component);
- const cardWithIcon = await screen.findByRole("img", {
- name: "test-env1-icon",
+
+ const cardWithIcon = screen.getByRole("img", {
+ name: "test-env1-environment-logo",
});
expect(cardWithIcon).toBeVisible();
- const cardWithoutIcon = screen.queryByRole("img", { name: "dev-env2-icon" });
- expect(cardWithoutIcon).not.toBeInTheDocument();
+ const cardWithDefaultIcon = screen.getByRole("img", {
+ name: "dev-env2-environment-logo",
+ });
+
+ expect(cardWithDefaultIcon).toBeVisible();
});
diff --git a/src/Slices/Home/UI/EnvironmentsOverview.tsx b/src/Slices/Home/UI/EnvironmentsOverview.tsx
index b1d71a1b2..a3c37d651 100644
--- a/src/Slices/Home/UI/EnvironmentsOverview.tsx
+++ b/src/Slices/Home/UI/EnvironmentsOverview.tsx
@@ -1,4 +1,5 @@
import React from "react";
+import { PageSection } from "@patternfly/react-core";
import { FlatEnvironment } from "@/Core";
import { useUrlStateWithFilter } from "@/Data";
import { CardView } from "./CardView";
@@ -42,16 +43,22 @@ export const EnvironmentsOverview: React.FC = ({
return (
<>
-
- setFilter({ projectFilter: undefined, environmentFilter: undefined })
- }
- />
+
+
+ setFilter({
+ projectFilter: undefined,
+ environmentFilter: undefined,
+ })
+ }
+ />
+
+
= ({
aria-label="FilterBar"
role="toolbar"
>
-
+
= ({
searchEntry={environmentFilter}
/>
-
+
{
loading: () => (
<>
+
@@ -30,7 +30,7 @@ export const Page: React.FC = () => {
failed: (error) => (
<>
+
{
- const { service: serviceName } = useRouteParams<"InstanceComposer">();
- const { featureManager } = useContext(DependencyContext);
-
- return featureManager.isComposerEnabled() ? (
- (
-
-
- )}
- />
- ) : (
- > = ({
- children,
- ...props
-}) => (
-
- {children}
-
-);
diff --git a/src/Slices/InstanceComposer/Core/Route.ts b/src/Slices/InstanceComposerCreator/Core/Route.ts
similarity index 100%
rename from src/Slices/InstanceComposer/Core/Route.ts
rename to src/Slices/InstanceComposerCreator/Core/Route.ts
diff --git a/src/Slices/InstanceComposerCreator/UI/Page.tsx b/src/Slices/InstanceComposerCreator/UI/Page.tsx
new file mode 100644
index 000000000..a47939ede
--- /dev/null
+++ b/src/Slices/InstanceComposerCreator/UI/Page.tsx
@@ -0,0 +1,25 @@
+import React, { useContext } from "react";
+import { DependencyContext, useRouteParams, words } from "@/UI";
+import { EmptyView } from "@/UI/Components";
+import { ComposerCreatorProvider } from "@/UI/Components/Diagram/Context/ComposerCreatorProvider";
+
+/**
+ * Renders the Page component for the Instance Composer Creator Page.
+ * If the composer feature is enabled, it renders the Canvas.
+ * If the composer feature is disabled, it renders an EmptyView component with a message indicating that the composer is disabled.
+ *
+ * @returns {React.FC} The Page component.
+ */
+export const Page: React.FC = () => {
+ const { service: serviceName } = useRouteParams<"InstanceComposer">();
+ const { featureManager } = useContext(DependencyContext);
+
+ if (!featureManager.isComposerEnabled()) {
+ (
-
-
- )}
- />
- ) : (
- > = ({
- children,
- ...props
-}) => (
-
- {children}
-
-);
diff --git a/src/Slices/InstanceComposerViewer/UI/Page.tsx b/src/Slices/InstanceComposerViewer/UI/Page.tsx
index 802446e13..1a9e78679 100644
--- a/src/Slices/InstanceComposerViewer/UI/Page.tsx
+++ b/src/Slices/InstanceComposerViewer/UI/Page.tsx
@@ -1,53 +1,34 @@
import React, { useContext } from "react";
import { DependencyContext, useRouteParams, words } from "@/UI";
-import { EmptyView, PageContainer, ServicesProvider } from "@/UI/Components";
-import { InstanceProvider } from "@/UI/Components/InstanceProvider";
+import { EmptyView } from "@/UI/Components";
+import { ComposerEditorProvider } from "@/UI/Components/Diagram/Context/ComposerEditorProvider";
/**
* Renders the Page component for the Instance Composer Viewer Page.
* If the composer feature is enabled, it renders the Canvas component wrapped in a ServicesProvider.
* If the composer feature is disabled, it renders an EmptyView component with a message indicating that the composer is disabled.
+ *
+ * @returns {React.FC} The Page component.
*/
-export const Page = () => {
+export const Page: React.FC = () => {
const { service: serviceName, instance } =
useRouteParams<"InstanceComposerViewer">();
const { featureManager } = useContext(DependencyContext);
- return featureManager.isComposerEnabled() ? (
- (
-
-
- )}
- />
- ) : (
- > = ({
- children,
- ...props
-}) => (
-
- {children}
-
-);
diff --git a/src/Slices/Login/Page.test.tsx b/src/Slices/Login/Page.test.tsx
index 610ac98d9..0fc5354b7 100644
--- a/src/Slices/Login/Page.test.tsx
+++ b/src/Slices/Login/Page.test.tsx
@@ -82,20 +82,15 @@ describe("Login", () => {
const usernameInput = screen.getByLabelText("input-username");
- await act(async () => {
- await userEvent.type(usernameInput, "test_user");
- });
+ await userEvent.type(usernameInput, "test_user");
+
const passwordInput = screen.getByLabelText("input-password");
- await act(async () => {
- await userEvent.type(passwordInput, "test_password");
- });
+ await userEvent.type(passwordInput, "test_password");
const showPasswordButton = screen.getByLabelText("show-password");
- await act(async () => {
- await userEvent.click(showPasswordButton);
- });
+ await userEvent.click(showPasswordButton);
const passwordInput1 = screen.getByLabelText("input-password");
@@ -103,9 +98,7 @@ describe("Login", () => {
const hidePasswordButton = screen.getByLabelText("hide-password");
- await act(async () => {
- await userEvent.click(hidePasswordButton);
- });
+ await userEvent.click(hidePasswordButton);
const passwordInput2 = screen.getByLabelText("input-password");
@@ -113,9 +106,7 @@ describe("Login", () => {
const logInButton = screen.getByLabelText("login-button");
- await act(async () => {
- await userEvent.click(logInButton);
- });
+ await userEvent.click(logInButton);
await waitFor(() =>
expect(spiedCreateCookie).toHaveBeenCalledWith(
@@ -164,20 +155,15 @@ describe("Login", () => {
const usernameInput = screen.getByLabelText("input-username");
- await act(async () => {
- await userEvent.type(usernameInput, "test_user");
- });
+ await userEvent.type(usernameInput, "test_user");
+
const passwordInput = screen.getByLabelText("input-password");
- await act(async () => {
- await userEvent.type(passwordInput, "test_password");
- });
+ await userEvent.type(passwordInput, "test_password");
const logInButton = screen.getByLabelText("login-button");
- await act(async () => {
- await userEvent.click(logInButton);
- });
+ await userEvent.click(logInButton);
await waitFor(() => {
expect(screen.getByLabelText("error-message")).toHaveTextContent(
@@ -223,9 +209,7 @@ describe("Login", () => {
const logInButton = screen.getByLabelText("login-button");
- await act(async () => {
- await userEvent.click(logInButton);
- });
+ await userEvent.click(logInButton);
await waitFor(() => {
expect(screen.getByLabelText("error-message")).toHaveTextContent(
diff --git a/src/Slices/Login/Page.tsx b/src/Slices/Login/Page.tsx
index 99b43cb9c..f3145e57f 100644
--- a/src/Slices/Login/Page.tsx
+++ b/src/Slices/Login/Page.tsx
@@ -1,48 +1,30 @@
-import React, { useContext, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import React from "react";
import { LoginPage, ListVariant } from "@patternfly/react-core";
import styled from "styled-components";
-import { useLogin } from "@/Data/Managers/V2/POST/Login";
-import { DependencyContext, words } from "@/UI";
-import { UserCredentialsForm } from "@/UI/Components/UserCredentialsForm";
+import { words } from "@/UI";
import logo from "@images/logo.svg";
+import { LoginForm } from "./UI/LoginForm";
/**
+ * PF-MIGRATION TODO : UPDATE based on new guidelines
+ *
* Login component.
* This component is responsible for rendering the login page.
* @note This is being used only when database authentication is enabled.
- * @returns {React.FunctionComponent} The rendered component.
+ * @returns {React.FC} The rendered component.
*/
-export const Login: React.FunctionComponent = () => {
- const { authHelper } = useContext(DependencyContext);
- const navigate = useNavigate();
-
- const { mutate, isError, error, isSuccess, isPending, data } = useLogin();
-
- useEffect(() => {
- if (isSuccess) {
- authHelper.updateUser(data.data.user.username, data.data.token);
- navigate("/");
- }
- }, [data, isSuccess, authHelper, navigate]);
-
+export const Login: React.FC = () => {
return (
-
- mutate({ username, password })}
- submitButtonText={words("login.login")}
- />
-
+
);
};
@@ -55,15 +37,3 @@ const Wrapper = styled.div`
top: 0;
left: 0;
`;
-const StyledLogin = styled(LoginPage)`
- background-color: var(--pf-v5-global--BackgroundColor--dark-300);
- .pf-v5-c-login__container {
- @media (min-width: 1200px) {
- width: 100%;
- max-width: 500px !important;
- display: block !important;
- padding-inline-start: 0px;
- padding-inline-end: 0px;
- }
- }
-`;
diff --git a/src/UI/Components/UserCredentialsForm/UserCredentialsForm.tsx b/src/Slices/Login/UI/LoginForm.tsx
similarity index 58%
rename from src/UI/Components/UserCredentialsForm/UserCredentialsForm.tsx
rename to src/Slices/Login/UI/LoginForm.tsx
index 0d6697b3f..560b9ec63 100644
--- a/src/UI/Components/UserCredentialsForm/UserCredentialsForm.tsx
+++ b/src/Slices/Login/UI/LoginForm.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
import {
FormHelperText,
HelperText,
@@ -12,36 +13,38 @@ import {
ActionGroup,
ValidatedOptions,
Spinner,
- Text,
+ Content,
} from "@patternfly/react-core";
import {
ExclamationCircleIcon,
EyeIcon,
EyeSlashIcon,
} from "@patternfly/react-icons";
+import { useLogin } from "@/Data/Managers/V2/POST/Login";
+import { DependencyContext, words } from "@/UI";
-interface UserCredentialsFormProps {
- onSubmit: (username: string, password: string) => void;
- isPending: boolean;
- isError: boolean;
- error: Error | null;
+interface Props {
submitButtonText: string;
submitButtonLabel?: string;
}
/**
- * UserCredentialsForm component.
- * @param {UserCredentialsFormProps} props - The component props.
- * @returns {JSX.Element} The rendered component.
+ * LoginForm component.
+ * @props {Props} props - The component
+ * @prop {string} submitButtonText - The text to display on the submit button.
+ * @prop {string} submitButtonLabel - The aria-label for the submit button.
+ *
+ * @returns {React.FC} The rendered component.
*/
-export const UserCredentialsForm: React.FC = ({
- onSubmit,
- isPending,
- isError,
- error,
+export const LoginForm: React.FC = ({
submitButtonText,
submitButtonLabel = "login-button",
}) => {
+ const { authHelper } = useContext(DependencyContext);
+ const navigate = useNavigate();
+
+ const { data, mutate, isSuccess, isError, error, isPending } = useLogin();
+
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [isPasswordHidden, setIsPasswordHidden] = useState(true);
@@ -50,11 +53,13 @@ export const UserCredentialsForm: React.FC = ({
* Handle the change of the username input field.
* @param {React.FormEvent} _event - The event object.
* @param {string} value - The current value of the input field.
+ *
+ * @returns {void}
*/
const handleUsernameChange = (
_event: React.FormEvent,
value: string,
- ) => {
+ ): void => {
setUsername(value);
};
@@ -62,21 +67,47 @@ export const UserCredentialsForm: React.FC = ({
* Handle the change of the password input field.
* @param {React.FormEvent} _event The event object.
* @param {string} value The current value of the input field.
+ *
+ * @returns {void}
*/
const handlePasswordChange = (
_event: React.FormEvent,
value: string,
- ) => {
+ ): void => {
setPassword(value);
};
+ /**
+ * Handles the submission of the login form.
+ *
+ * This function is responsible for preventing the default form submission behavior and then calling the mutate function with the current username and password.
+ * @param {React.FormEvent | React.MouseEvent} event - The event that triggered the form submission.
+ *
+ * @returns {void} A Promise that resolves when the operation is complete.
+ */
+ const handleSubmit = (
+ event:
+ | React.FormEvent
+ | React.MouseEvent,
+ ): void => {
+ event.preventDefault();
+ mutate({ username, password });
+ };
+
+ useEffect(() => {
+ if (isSuccess) {
+ authHelper.updateUser(data.data.user.username, data.data.token);
+ navigate("/");
+ }
+ }, [isSuccess, navigate, data, authHelper]);
+
return (
-
diff --git a/src/Slices/Login/UI/index.ts b/src/Slices/Login/UI/index.ts
new file mode 100644
index 000000000..1cad6f418
--- /dev/null
+++ b/src/Slices/Login/UI/index.ts
@@ -0,0 +1 @@
+export * from "./LoginForm";
diff --git a/src/Slices/NotFound/UI/Page.tsx b/src/Slices/NotFound/UI/Page.tsx
index 7c5419fe8..daf83f73e 100644
--- a/src/Slices/NotFound/UI/Page.tsx
+++ b/src/Slices/NotFound/UI/Page.tsx
@@ -2,9 +2,7 @@ import * as React from "react";
import {
Button,
EmptyState,
- EmptyStateIcon,
PageSection,
- EmptyStateHeader,
EmptyStateFooter,
} from "@patternfly/react-core";
import { ExclamationTriangleIcon } from "@patternfly/react-icons";
@@ -18,13 +16,12 @@ export const Page: React.FC = () => {
const { routeManager } = React.useContext(DependencyContext);
return (
-
-
- {words("notFound.title")}}
- icon={
+ {words("notFound.title")}}
+ >
{words("notFound.home")}
diff --git a/src/Slices/Notification/UI/Badge/Badge.tsx b/src/Slices/Notification/UI/Badge/Badge.tsx
index 21604d681..675a744e6 100644
--- a/src/Slices/Notification/UI/Badge/Badge.tsx
+++ b/src/Slices/Notification/UI/Badge/Badge.tsx
@@ -3,7 +3,6 @@ import {
NotificationBadge,
NotificationBadgeVariant,
} from "@patternfly/react-core";
-import styled from "styled-components";
import { RemoteData } from "@/Core";
import { ToastAlert } from "@/UI/Components";
import { DependencyContext } from "@/UI/Dependency";
@@ -34,14 +33,14 @@ export const View: React.FC = ({ data, onClick }) => {
return RemoteData.fold(
{
notAsked: () => (
- = ({ data, onClick }) => {
title={words("error")}
setMessage={setError}
/>
-
notification.severity === "error";
const isUnread = (notification: Notification) => notification.read === false;
-
-const PlainBadge = styled(NotificationBadge)`
- --pf-v5-c-button--m-plain--hover--Color: var(--pf-v5-global--Color--200);
- --pf-v5-c-button--m-plain--focus--Color: var(--pf-v5-global--Color--200);
- --pf-v5-c-button--m-plain--active--Color: var(--pf-v5-global--Color--200);
-`;
diff --git a/src/Slices/Notification/UI/Center/ActionList.tsx b/src/Slices/Notification/UI/Center/ActionList.tsx
index 499f22464..0fb04e347 100644
--- a/src/Slices/Notification/UI/Center/ActionList.tsx
+++ b/src/Slices/Notification/UI/Center/ActionList.tsx
@@ -43,9 +43,8 @@ export const ActionList: React.FC = ({ read, id, onUpdate }) => {
variant="plain"
onClick={onToggleClick}
isExpanded={isOpen}
- >
- = ({ notification, onUpdate }) => {
{notification.message}
- = ({ notification, onUpdate }) => {
aria-labelledby="multi-actions-item1 multi-actions-action1"
id="multi-actions-action1"
aria-label="Actions"
- isPlainButtonAction
>
`
- --pf-v5-c-data-list__item-row--PaddingRight: 24px;
- --pf-v5-c-data-list__item-row--PaddingLeft: 24px;
- --pf-v5-c-data-list__item-content--md--PaddingBottom: 16px;
- --pf-v5-c-data-list__cell--PaddingTop: 16px;
- --pf-v5-c-data-list__item-action--PaddingBottom: 16px;
- --pf-v5-c-data-list__item-action--PaddingTop: 16px;
- --pf-v5-c-data-list__item--before--BackgroundColor: ${(p) =>
+ --pf-v6-c-data-list__item--before--BackgroundColor: ${(p) =>
p.$read ? "transparent" : getColorForVisualSeverity(p.$severity)};
`;
-
-const CustomDateWithTooltip = styled(DateWithTooltip)`
- color: var(--pf-v5-global--Color--200);
- font-size: var(--pf-v5-global--FontSize--sm);
-`;
diff --git a/src/Slices/Notification/UI/Center/Page.test.tsx b/src/Slices/Notification/UI/Center/Page.test.tsx
index 8dca8e29e..f47ef666a 100644
--- a/src/Slices/Notification/UI/Center/Page.test.tsx
+++ b/src/Slices/Notification/UI/Center/Page.test.tsx
@@ -4,7 +4,7 @@ import { Page } from "@patternfly/react-core";
import { render, screen } from "@testing-library/react";
import { userEvent } from "@testing-library/user-event";
import { StoreProvider } from "easy-peasy";
-import { axe, toHaveNoViolations } from "jest-axe";
+import { configureAxe, toHaveNoViolations } from "jest-axe";
import { Either } from "@/Core";
import {
CommandManagerResolverImpl,
@@ -21,6 +21,13 @@ import { NotificationCenterPage } from ".";
expect.extend(toHaveNoViolations);
+const axe = configureAxe({
+ rules: {
+ // disable landmark rules when testing isolated components.
+ region: { enabled: false },
+ },
+});
+
const setup = (entries?: string[]) => {
const apiHelper = new DeferredApiHelper();
const scheduler = new StaticScheduler();
@@ -83,14 +90,11 @@ test("Given Notification Center page When user filters on severity Then executes
await apiHelper.resolve(Either.right(Mock.response));
});
- await act(async () => {
- await userEvent.click(
- screen.getByRole("combobox", { name: "SeverityFilterInput" }),
- );
- });
- await act(async () => {
- await userEvent.click(screen.getByRole("option", { name: "message" }));
- });
+ await userEvent.click(
+ screen.getByRole("combobox", { name: "SeverityFilterInput" }),
+ );
+
+ await userEvent.click(screen.getByRole("option", { name: "message" }));
expect(apiHelper.pendingRequests).toEqual([
request("?limit=20&filter.severity=message"),
@@ -106,16 +110,13 @@ test("Given Notification Center page When user filters on severity Then executes
screen.getAllByRole("listitem", { name: "NotificationItem" }),
).toHaveLength(2);
- await act(async () => {
- await userEvent.click(
- screen.getByRole("combobox", { name: "SeverityFilterInput" }),
- );
- });
- await act(async () => {
- await userEvent.click(
- screen.getByRole("button", { name: "Clear input value" }),
- );
- });
+ await userEvent.click(
+ screen.getByRole("combobox", { name: "SeverityFilterInput" }),
+ );
+
+ await userEvent.click(
+ screen.getByRole("button", { name: "Clear input value" }),
+ );
expect(apiHelper.pendingRequests).toEqual([request("?limit=20")]);
@@ -134,14 +135,11 @@ test("Given Notification Center page When user filters on read Then executes cor
await apiHelper.resolve(Either.right(Mock.response));
});
- await act(async () => {
- await userEvent.click(
- screen.getByRole("combobox", { name: "ReadFilterInput" }),
- );
- });
- await act(async () => {
- await userEvent.click(screen.getByRole("option", { name: "read" }));
- });
+ await userEvent.click(
+ screen.getByRole("combobox", { name: "ReadFilterInput" }),
+ );
+
+ await userEvent.click(screen.getByRole("option", { name: "read" }));
expect(apiHelper.pendingRequests).toEqual([
request("?limit=20&filter.read=true"),
@@ -159,16 +157,14 @@ test("Given Notification Center page When user filters on read Then executes cor
}),
).toHaveLength(2);
- await act(async () => {
- await userEvent.click(
- screen.getByRole("combobox", { name: "ReadFilterInput" }),
- );
- });
- await act(async () => {
- await userEvent.click(
- screen.getByRole("button", { name: "Clear input value" }),
- );
- });
+ await userEvent.click(
+ screen.getByRole("combobox", { name: "ReadFilterInput" }),
+ );
+
+ await userEvent.click(
+ screen.getByRole("button", { name: "Clear input value" }),
+ );
+
expect(apiHelper.pendingRequests).toEqual([request("?limit=20")]);
await act(async () => {
@@ -186,12 +182,10 @@ test("Given Notification Center page When user filters on message Then executes
await apiHelper.resolve(Either.right(Mock.response));
});
- await act(async () => {
- await userEvent.type(
- screen.getByRole("searchbox", { name: "MessageFilter" }),
- "abc{enter}",
- );
- });
+ await userEvent.type(
+ screen.getByRole("textbox", { name: "MessageFilter" }),
+ "abc{enter}",
+ );
expect(apiHelper.pendingRequests).toEqual([
request("?limit=20&filter.message=abc"),
@@ -209,9 +203,8 @@ test("Given Notification Center page When user filters on message Then executes
}),
).toHaveLength(2);
- await act(async () => {
- await userEvent.click(screen.getByRole("button", { name: "close abc" }));
- });
+ await userEvent.click(screen.getByRole("button", { name: /close abc/i }));
+
expect(apiHelper.pendingRequests).toEqual([request("?limit=20")]);
await act(async () => {
@@ -229,12 +222,10 @@ test("Given Notification Center page When user filters on title Then executes co
await apiHelper.resolve(Either.right(Mock.response));
});
- await act(async () => {
- await userEvent.type(
- screen.getByRole("searchbox", { name: "TitleFilter" }),
- "abc{enter}",
- );
- });
+ await userEvent.type(
+ screen.getByRole("textbox", { name: "TitleFilter" }),
+ "abc{enter}",
+ );
expect(apiHelper.pendingRequests).toEqual([
request("?limit=20&filter.title=abc"),
@@ -251,9 +242,9 @@ test("Given Notification Center page When user filters on title Then executes co
name: "NotificationItem",
}),
).toHaveLength(2);
- await act(async () => {
- await userEvent.click(screen.getByRole("button", { name: "close abc" }));
- });
+
+ await userEvent.click(screen.getByRole("button", { name: /close abc/i }));
+
expect(apiHelper.pendingRequests).toEqual([request("?limit=20")]);
await act(async () => {
@@ -276,9 +267,7 @@ test("Given Notification Center page When user clicks next page Then fetches nex
expect(button).toBeEnabled();
- await act(async () => {
- await userEvent.click(button);
- });
+ await userEvent.click(button);
expect(apiHelper.pendingRequests).toEqual([
{
diff --git a/src/Slices/Notification/UI/Center/ReadFilter.tsx b/src/Slices/Notification/UI/Center/ReadFilter.tsx
index ddb735ad1..826bdabc3 100644
--- a/src/Slices/Notification/UI/Center/ReadFilter.tsx
+++ b/src/Slices/Notification/UI/Center/ReadFilter.tsx
@@ -31,8 +31,8 @@ export const ReadFilter: React.FC = ({ filter, setFilter }) => {
return (
= ({ filter, setFilter }) => {
return (
@@ -130,15 +130,11 @@ test("Given Drawer When clicking on 'Clear all' Then all notifications are clear
await apiHelper.resolve(Either.right(Mock.response));
});
- await act(async () => {
- await userEvent.click(
- screen.getByRole("button", { name: "NotificationListActions" }),
- );
- });
+ await userEvent.click(
+ screen.getByRole("button", { name: "NotificationListActions" }),
+ );
- await act(async () => {
- await userEvent.click(screen.getByRole("menuitem", { name: "Clear all" }));
- });
+ await userEvent.click(screen.getByRole("menuitem", { name: "Clear all" }));
expect(apiHelper.pendingRequests).toEqual([
updateRequest("abcdefgh01", { read: true, cleared: true }),
@@ -179,16 +175,14 @@ test("Given Drawer When user clicks on 'Read all' Then all notifications are rea
await act(async () => {
await apiHelper.resolve(Either.right(Mock.response));
});
- await act(async () => {
- await userEvent.click(
- screen.getByRole("button", { name: "NotificationListActions" }),
- );
- });
- await act(async () => {
- await userEvent.click(
- screen.getByRole("menuitem", { name: "Mark all as read" }),
- );
- });
+
+ await userEvent.click(
+ screen.getByRole("button", { name: "NotificationListActions" }),
+ );
+
+ await userEvent.click(
+ screen.getByRole("menuitem", { name: "Mark all as read" }),
+ );
expect(apiHelper.pendingRequests).toEqual([
updateRequest("abcdefgh01", { read: true }),
@@ -238,9 +232,7 @@ test("Given Drawer When user clicks a notification Then it becomes read", async
const items = screen.getAllByRole("listitem", { name: "NotificationItem" });
- await act(async () => {
- await userEvent.click(items[0]);
- });
+ await userEvent.click(items[0]);
expect(apiHelper.pendingRequests).toEqual([
updateRequest("abcdefgh01", { read: true }),
@@ -286,9 +278,7 @@ test("Given Drawer When user clicks a notification with an uri then go to the ur
const items = screen.getAllByRole("listitem", { name: "NotificationItem" });
- await act(async () => {
- await userEvent.click(items[0]);
- });
+ await userEvent.click(items[0]);
expect(history.location.pathname).toBe(
"/compilereports/f2c68117-24bd-43cf-a9dc-ce42b934a614",
@@ -311,9 +301,7 @@ test("Given Drawer When user clicks a notification without an uri then nothing h
expect(results).toHaveNoViolations();
});
- await act(async () => {
- await userEvent.click(items[3]);
- });
+ await userEvent.click(items[3]);
expect(history.location.pathname).toBe("/");
});
@@ -336,9 +324,7 @@ test("Given Drawer When user clicks a notification toggle with an uri then do no
expect(results).toHaveNoViolations();
});
- await act(async () => {
- await userEvent.click(items[0]);
- });
+ await userEvent.click(items[0]);
expect(history.location.pathname).toBe("/");
});
@@ -356,14 +342,11 @@ test("Given Drawer When user clicks on 'unread' for 1 notification Then it becom
name: "NotificationListItemActions",
});
- await act(async () => {
- await userEvent.click(actions);
- });
- await act(async () => {
- await userEvent.click(
- screen.getByRole("menuitem", { name: "Mark as unread" }),
- );
- });
+ await userEvent.click(actions);
+
+ await userEvent.click(
+ screen.getByRole("menuitem", { name: "Mark as unread" }),
+ );
expect(apiHelper.pendingRequests).toEqual([
updateRequest("abcdefgh03", { read: false }),
@@ -408,12 +391,9 @@ test("Given Drawer When user clicks on 'Clear' for 1 notification Then it is cle
name: "NotificationListItemActions",
});
- await act(async () => {
- await userEvent.click(actions);
- });
- await act(async () => {
- await userEvent.click(screen.getByRole("menuitem", { name: "Clear" }));
- });
+ await userEvent.click(actions);
+
+ await userEvent.click(screen.getByRole("menuitem", { name: "Clear" }));
expect(apiHelper.pendingRequests).toEqual([
updateRequest("abcdefgh03", { read: true, cleared: true }),
diff --git a/src/Slices/Notification/UI/Drawer/Drawer.tsx b/src/Slices/Notification/UI/Drawer/Drawer.tsx
index af65974c2..6249fcd11 100644
--- a/src/Slices/Notification/UI/Drawer/Drawer.tsx
+++ b/src/Slices/Notification/UI/Drawer/Drawer.tsx
@@ -16,7 +16,6 @@ import {
NotificationDrawerList,
} from "@patternfly/react-core";
import { EllipsisVIcon } from "@patternfly/react-icons";
-import styled from "styled-components";
import { RemoteData } from "@/Core";
import { DependencyContext } from "@/UI/Dependency";
import { useNavigateTo } from "@/UI/Routing";
@@ -115,8 +114,8 @@ export const View: React.FC = ({
onClose()}>
-
-
+
+
{RemoteData.fold(
{
notAsked: () => null,
@@ -134,21 +133,12 @@ export const View: React.FC = ({
},
data,
)}
-
-
+
+
);
};
-const CustomNotificationDrawerBody = styled(NotificationDrawerBody)`
- padding-bottom: 300px;
- background-color: var(--pf-v5-global--BackgroundColor--200);
-`;
-
-const CustomNotificationDrawerList = styled(NotificationDrawerList)`
- overflow-y: visible;
-`;
-
interface ActionListProps {
onClearAll(): void;
onReadAll(): void;
@@ -182,9 +172,8 @@ const ActionList: React.FC = ({
variant="plain"
onClick={onToggleClick}
isExpanded={isOpen}
- >
- = ({ notification, onUpdate }) => {
variant="plain"
isExpanded={isOpen}
onClick={onToggle}
- >
- = ({ notification, onUpdate }) => {
);
-
- // return (
- // setIsOpen(false)}
- // toggle={
- // , value: boolean) =>
- // onToggle(value, e)
- // }
- // aria-label="NotificationItemActions"
- // />
- // }
- // isOpen={isOpen}
- // isPlain
- // dropdownItems={[
- // {
- // event.stopPropagation();
- // onUpdate({ read: false });
- // }}
- // isDisabled={!notification.read}
- // >
- // {words("notification.unread")}
- // ,
- // {
- // event.stopPropagation();
- // onUpdate({ read: true, cleared: true });
- // }}
- // >
- // {words("notification.drawer.clear")}
- // ,
- // ]}
- // />
- // );
};
diff --git a/src/Slices/Notification/UI/Utils.ts b/src/Slices/Notification/UI/Utils.ts
index 972f44dea..5ffc3d7f4 100644
--- a/src/Slices/Notification/UI/Utils.ts
+++ b/src/Slices/Notification/UI/Utils.ts
@@ -1,9 +1,9 @@
import {
- global_danger_color_100,
- global_Color_200,
- global_info_color_100,
- global_success_color_100,
- global_warning_color_100,
+ t_global_icon_color_status_danger_default,
+ t_global_icon_color_status_custom_default,
+ t_global_color_brand_default,
+ t_global_icon_color_status_success_default,
+ t_global_icon_color_status_warning_default,
} from "@patternfly/react-tokens";
import { Severity } from "@S/Notification/Core/Domain";
@@ -30,14 +30,14 @@ export type VisualSeverity =
export const getColorForVisualSeverity = (severity: VisualSeverity): string => {
switch (severity) {
case "danger":
- return global_danger_color_100.var;
+ return t_global_icon_color_status_danger_default.var;
case "warning":
- return global_warning_color_100.var;
+ return t_global_icon_color_status_warning_default.var;
case "custom":
- return global_Color_200.var;
+ return t_global_icon_color_status_custom_default.var;
case "info":
- return global_info_color_100.var;
+ return t_global_color_brand_default.var;
case "success":
- return global_success_color_100.var;
+ return t_global_icon_color_status_success_default.var;
}
};
diff --git a/src/Slices/OrderDetails/UI/OrderDependencies.tsx b/src/Slices/OrderDetails/UI/OrderDependencies.tsx
index 3b6ea73f5..f67eac507 100644
--- a/src/Slices/OrderDetails/UI/OrderDependencies.tsx
+++ b/src/Slices/OrderDetails/UI/OrderDependencies.tsx
@@ -1,8 +1,7 @@
import React from "react";
import { Card, Label } from "@patternfly/react-core";
-import { ExclamationCircleIcon } from "@patternfly/react-icons";
+import { InfoAltIcon } from "@patternfly/react-icons";
import { Table, Tbody, Td, Tr } from "@patternfly/react-table";
-import styled from "styled-components";
import { ServiceOrderItemDependencies } from "@/Slices/Orders/Core/Query";
import { OrderStatusLabel } from "@/Slices/Orders/UI/OrderStatusLabel";
import { words } from "@/UI";
@@ -25,7 +24,7 @@ interface Props {
export const OrderDependencies: React.FC = ({ dependencies }) => {
if (!Object.keys(dependencies).length) {
return (
- = ({ dependencies }) => {
tooltipContent={words("serviceIdentity.copy")}
/>
-
+
))}