Relocated prop types | refactored user role identifier - changed to s…

…ystemRoleZUID instead of role name

cypress/e2e/settings/workflows.spec.js

@@ -1,4 +1,13 @@
-import { colorMenu } from "../../../src/shell/services/types";
+import instanceZUID from "../../../src/utility/instanceZUID";
+import CONFIG from "../../../src/shell/app.config";
+import {
+  AUTHORIZED_ROLES,
+  colorMenu,
+} from "../../../src/apps/settings/src/app/views/User/Workflows/constants";
+
+const INSTANCE_API = `${
+  CONFIG?.[process.env.NODE_ENV]?.API_INSTANCE_PROTOCOL
+}${instanceZUID}${CONFIG?.[process.env.NODE_ENV]?.API_INSTANCE}`;
 
 const FOCUSED_LABEL_COLOR = "rgba(253, 133, 58, 0.1)";
 
@@ -101,7 +110,7 @@ describe("Workflow Status Labels: Restricted User", () => {
       .its("response.body")
       .then((body) => {
         const authorizedUsers = body?.data.filter((user) =>
-          ["Owner", "Admin"].includes(user?.role?.name)
+          AUTHORIZED_ROLES.includes(user?.role?.systemRoleZUID)
         );
         cy.get('[data-cy="user-profile-container"]')
           .children()
@@ -112,12 +121,16 @@ describe("Workflow Status Labels: Restricted User", () => {
 });
 
 describe("Workflow Status Labels: Authorized User", () => {
+  before(() => {
+    // DELETE TEST DATA IF EXISTS
+    cy.cleanTestData();
+  });
+
   context("Workflow Page", () => {
     before(() => {
-      cy.visit("/settings/user/workflows");
+      cy.waitUntilStatusLabelAreLoaded();
     });
     it("displays workflow page elements for authorized users", () => {
-      // cy.visit("/settings/user/workflows");
       cy.contains("Workflows").should("exist");
       cy.get("button").contains("Create Status").should("exist");
       cy.get('input[placeholder="Search Statuses"]').should("exist");
@@ -135,7 +148,7 @@ describe("Workflow Status Labels: Authorized User", () => {
 
   context("Create New Status Label", () => {
     before(() => {
-      cy.visit("/settings/user/workflows");
+      cy.waitUntilStatusLabelAreLoaded();
 
       cy.get("button").contains("Create Status").click();
     });
@@ -174,7 +187,6 @@ describe("Workflow Status Labels: Authorized User", () => {
 
       cy.wait(["@createStatusLabel", "@getAllStatusLabels"]).spread(
         (createStatusLabel, getAllStatusLabels) => {
-          // cy.wait("@createStatusLabel").then(({ response }) => {
           const responseData = createStatusLabel?.response?.body?.data;
           expect(createStatusLabel?.response?.statusCode).to.be.ok;
           expect(getAllStatusLabels?.response?.statusCode).to.be.ok;
@@ -210,10 +222,13 @@ describe("Workflow Status Labels: Authorized User", () => {
 
   context("Edit Status Label", () => {
     before(() => {
-      cy.visit("/settings/user/workflows");
+      cy.waitUntilStatusLabelAreLoaded();
     });
 
     it("Open Status Label and Edit Details", () => {
+      cy.intercept("PUT", `${ENDPOINTS?.statusLabels}/**`).as(
+        "editStatusLabel"
+      );
       cy.get(
         '[data-cy="active-labels-container"] [data-cy="status-label"]:visible'
       )
@@ -249,9 +264,6 @@ describe("Workflow Status Labels: Authorized User", () => {
 
       cy.get('[data-cy="status-label-submit-button"]').click();
 
-      cy.intercept("PUT", `${ENDPOINTS?.statusLabels}/**`).as(
-        "editStatusLabel"
-      );
       cy.intercept("GET", ENDPOINTS.allStatusLabels).as("getAllStatusLabels");
 
       cy.wait(["@editStatusLabel", "@getAllStatusLabels"]).spread(
@@ -280,7 +292,7 @@ describe("Workflow Status Labels: Authorized User", () => {
 
   context("Re-order Status Labels", () => {
     before(() => {
-      cy.visit("/settings/user/workflows");
+      cy.waitUntilStatusLabelAreLoaded();
     });
 
     it("Drag status label to a new position", () => {
@@ -316,29 +328,16 @@ describe("Workflow Status Labels: Authorized User", () => {
               updatedLabel.find((item) => item?.ZUID === label?.ZUID).sort
             ).to.eq(label.sort);
           });
-
-          console.log("reorderStatusLabel | getAllStatusLabels:", {
-            reorderStatusLabel,
-            getAllStatusLabels,
-          });
         }
       );
     });
   });
 
   context("Deactivate Status Label", () => {
+    before(() => {
+      cy.waitUntilStatusLabelAreLoaded();
+    });
     it("opens deactivation dialog and connfirms deactivation", () => {
-      cy.intercept("DELETE", `${ENDPOINTS?.statusLabels}/**`).as(
-        "deactivateStatusLabel"
-      );
-
-      cy.intercept("GET", ENDPOINTS.allStatusLabels).as("getAllStatusLabels");
-
-      cy.visit("/settings/user/workflows");
-      cy.wait("@getAllStatusLabels").then((interception) => {
-        cy.wrap(interception.response.body.data).as("oldStatusLabels");
-      });
-
       cy.get(
         '[data-cy="active-labels-container"] [data-cy="status-label"]:visible'
       )
@@ -356,29 +355,72 @@ describe("Workflow Status Labels: Authorized User", () => {
 
       cy.get("button").contains("Deactivate Status").click();
 
-      cy.wait(["@deactivateStatusLabel", "@getAllStatusLabels"]).spread(
-        (deactivateStatusLabel, newStatusLabels) => {
-          const targetLabelZUID = deactivateStatusLabel.response.body.data;
+      cy.intercept("DELETE", `${ENDPOINTS?.statusLabels}/**`).as(
+        "deactivateStatusLabel"
+      );
+      cy.intercept("GET", ENDPOINTS.allStatusLabels).as("getAllStatusLabels");
 
+      cy.wait(["@deactivateStatusLabel", "@getAllStatusLabels"]).spread(
+        (deactivateStatusLabel, getAllStatusLabels) => {
           expect(deactivateStatusLabel.response.statusCode).to.eq(200);
-          expect(newStatusLabels.response.statusCode).to.eq(200);
-
-          cy.get("@oldStatusLabels").then((oldStatusLabels) => {
-            const oldLabelCount = oldStatusLabels.filter(
-              (label) => !label?.deletedAt
-            ).length;
-            cy.get(".notistack-Snackbar")
-              .contains(`Status De-activated`)
-              .should("exist");
-            cy.get(".notistack-Snackbar")
-              .contains(FORM_DATA?.edit?.name)
-              .should("exist");
-            cy.get(
-              '[data-cy="active-labels-container"] [data-cy="status-label"]:visible'
-            ).should("have.length", oldLabelCount - 1);
-          });
+          expect(getAllStatusLabels.response.statusCode).to.eq(200);
+
+          cy.get(".notistack-Snackbar")
+            .contains(`Status De-activated`)
+            .should("exist");
+          cy.get(".notistack-Snackbar")
+            .contains(FORM_DATA?.edit?.name)
+            .should("exist");
         }
       );
     });
   });
 });
+
+Cypress.Commands.add("cleanTestData", () => {
+  cy.intercept("GET", ENDPOINTS.allStatusLabels).as("getAllStatusLabels");
+  cy.visit("/settings/user/workflows");
+  cy.wait("@getAllStatusLabels")
+    .its("response.body.data")
+    .then((data) => {
+      const testData = data.filter(
+        (label) =>
+          !label?.deletedAt &&
+          [FORM_DATA?.create?.name, FORM_DATA?.edit?.name]?.includes(
+            label?.name
+          )
+      );
+      if (testData?.length > 0) {
+        cy.getCookie(Cypress.env("COOKIE_NAME")).then((cookie) => {
+          const token = cookie?.value;
+          testData.forEach((label) => {
+            cy.request({
+              url: `${INSTANCE_API}/env/labels/${label?.ZUID}`,
+              method: "DELETE",
+              credentials: "include",
+              headers: {
+                authorization: `Bearer ${token}`,
+              },
+            });
+          });
+        });
+      }
+    });
+});
+
+Cypress.Commands.add("waitUntilStatusLabelAreLoaded", () => {
+  cy.intercept("GET", ENDPOINTS.allStatusLabels).as("getAllStatusLabels");
+  cy.visit("/settings/user/workflows");
+  cy.wait("@getAllStatusLabels", { timeout: 30000 }).then(
+    (xhr) => {
+      if (xhr) {
+        cy.log("Request for status labels was made.");
+      }
+    },
+    () => {
+      cy.log(
+        "No request made for @getAllStatusLabels, proceeding to the next step."
+      );
+    }
+  );
+});

src/apps/settings/src/app/views/User/Workflows/RestrictedPage.tsx

@@ -2,8 +2,8 @@ import { FC } from "react";
 import { Box, Typography, Avatar } from "@mui/material";
 import { useGetUsersRolesQuery } from "../../../../../../../shell/services/accounts";
 import restrictedImage from "../../../../../../../../public/images/restricted-image.svg";
+import { AUTHORIZED_ROLES } from "./constants";
 
-const AUTHORIZED_ROLES: string[] = ["Admin", "Owner"];
 const ROLE_ORDER_MAPPING = { Owner: 1, Admin: 2 };
 
 type ProfileInfoProps = {
@@ -44,7 +44,9 @@ const RestrictedPage = () => {
   const { isLoading, isError, data } = useGetUsersRolesQuery();
 
   const profileList = data
-    ?.filter((profile) => AUTHORIZED_ROLES.includes(profile?.role?.name))
+    ?.filter((profile) =>
+      AUTHORIZED_ROLES.includes(profile?.role?.systemRoleZUID)
+    )
     .map((item, index) => ({
       id: item?.ZUID,
       name: `${item?.firstName} ${item?.lastName}`,

src/apps/settings/src/app/views/User/Workflows/authorized/forms-dialogs/DeactivationDialog.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from "react";
+import { FC } from "react";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Dialog from "@mui/material/Dialog";

src/apps/settings/src/app/views/User/Workflows/authorized/forms-dialogs/StatusLabelForm.tsx

@@ -30,12 +30,10 @@ import { useDispatch } from "react-redux";
 import { notify } from "../../../../../../../../../shell/store/notifications";
 import { useGetUsersRolesQuery } from "../../../../../../../../../shell/services/accounts";
 import {
-  colorMenu,
   CreateStatusLabel,
   StatusLabel,
-  StatusLabelsColorMenu,
-  StatusLabelsRoleMenu,
 } from "../../../../../../../../../shell/services/types";
+import { ColorMenu, colorMenu, RoleMenu } from "../../constants";
 
 interface FormInputFieldWrapperProps {
   label: string;
@@ -129,8 +127,7 @@ const ColorSelectInput = ({
     availableColors?.[0] ||
     colorMenu?.[0];
 
-  const [selectedColor, setSelectedColor] =
-    useState<StatusLabelsColorMenu>(defaultColor);
+  const [selectedColor, setSelectedColor] = useState<ColorMenu>(defaultColor);
 
   return (
     <>
@@ -192,7 +189,7 @@ const RolesSelectInput = ({
   defaultValue = "",
 }: {
   name: string;
-  listData: StatusLabelsRoleMenu[];
+  listData: RoleMenu[];
   defaultValue?: string;
 }) => {
   const [value, setSelectedColor] = useState(defaultValue || "");
@@ -205,7 +202,7 @@ const RolesSelectInput = ({
           zuids.split(",").includes(item.value.trim())
         )
       : [];
-  const handleChange = (_: unknown, newValue: StatusLabelsRoleMenu[]) =>
+  const handleChange = (_: unknown, newValue: RoleMenu[]) =>
     setSelectedColor(newValue.map((item) => item.value).join(","));
 
   return (
@@ -276,9 +273,7 @@ const StatusLabelForm: FC<StatusLabelFormProps> = ({
   isDeactivated = false,
 }) => {
   const ZUID = values?.ZUID || undefined;
-  const [rolesMenuItems, setRolesMenuItems] = useState<StatusLabelsRoleMenu[]>(
-    []
-  );
+  const [rolesMenuItems, setRolesMenuItems] = useState<RoleMenu[]>([]);
   const {
     isLoading: rolesLoading,
     isFetching,
@@ -287,9 +282,10 @@ const StatusLabelForm: FC<StatusLabelFormProps> = ({
 
   const [formErrors, setFormErrors] = useState<Record<string, string>>({});
   const dispatch = useDispatch();
-  const [createWorkflowStatusLabel, { isLoading }] =
+  const [createWorkflowStatusLabel, { isLoading: createLabelIsLoading }] =
     useCreateWorkflowStatusLabelMutation();
-  const [updateWorkflowStatusLabel] = useUpdateWorkflowStatusLabelMutation();
+  const [updateWorkflowStatusLabel, { isLoading: editLabelIsLoading }] =
+    useUpdateWorkflowStatusLabelMutation();
   const { openDeactivationDialog, setFocusedLabel } = useFormDialogContext();
 
   const usedColors = labels.map((label) => label.color);
@@ -299,7 +295,6 @@ const StatusLabelForm: FC<StatusLabelFormProps> = ({
 
   const handleFormSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    // setIsLoading(true);
     const formData = Object.fromEntries(new FormData(e.currentTarget));
 
     const newStatusLabel: CreateStatusLabel = {
@@ -517,7 +512,7 @@ const StatusLabelForm: FC<StatusLabelFormProps> = ({
           type="submit"
           variant="contained"
           color="primary"
-          loading={isLoading}
+          loading={createLabelIsLoading || editLabelIsLoading}
           startIcon={<SaveIcon />}
         >
           {ZUID ? "Save" : "Create Status"}

src/apps/settings/src/app/views/User/Workflows/constants.tsx

@@ -0,0 +1,29 @@
+export type ColorMenu = {
+  label: string;
+  value: string;
+};
+
+export type RoleMenu = {
+  label: string;
+  value: string;
+};
+
+export const colorMenu: ColorMenu[] = [
+  { label: "Blue", value: "#0BA5EC" },
+  { label: "Deep Purple", value: "#4E5BA6" },
+  { label: "Green", value: "#12b76a" },
+  { label: "Orange", value: "#FF5C08" },
+  { label: "Pink", value: "#EE46BC" },
+  { label: "Purple", value: "#7A5AF8" },
+  { label: "Red", value: "#F04438" },
+  { label: "Rose", value: "#F63D68" },
+  { label: "Yellow", value: "#F79009" },
+  { label: "Grey", value: "#667085" },
+];
+
+const ADMIN_ZUID = "31-71cfc74-4dm13";
+const OWNER_ZUID = "31-71cfc74-0wn3r";
+
+export const AUTHORIZED_ROLES: string[] = [ADMIN_ZUID, OWNER_ZUID];
+
+export type AuthorizedRole = typeof AUTHORIZED_ROLES[number];

src/apps/settings/src/app/views/User/Workflows/index.tsx

@@ -5,20 +5,22 @@ import { useSelector } from "react-redux";
 import { AppState } from "../../../../../../../shell/store/types";
 import { AuthorizedUserPage } from "./authorized";
 import FormDialogContextProvider from "./authorized/forms-dialogs";
-import { AUTHORIZED_ROLES } from "../../../../../../../shell/services/types";
+import { AUTHORIZED_ROLES } from "./constants";
 
 type UserType = {
-  role: string;
+  systemRoleZUID: string;
   staff: boolean;
 };
 
 const Workflows = () => {
-  const { role, staff }: UserType = useSelector((state: AppState) => ({
-    role: state.userRole?.name,
-    staff: state.user?.staff,
-  }));
+  const { systemRoleZUID, staff }: UserType = useSelector(
+    (state: AppState) => ({
+      systemRoleZUID: state?.userRole?.systemRoleZUID,
+      staff: state.user?.staff,
+    })
+  );
 
-  const isAuthorized = AUTHORIZED_ROLES.includes(role) || staff;
+  const isAuthorized = AUTHORIZED_ROLES.includes(systemRoleZUID) || staff;
 
   return (
     <ThemeProvider theme={theme}>