(feat):refresh feature with mutate in stock tables (openmrs#75)

* code cleanup

* Added delete User role feature

* refresh feature with mutate in stock Sources

* refresh feature with mutate in user role scope

src/index.ts

@@ -45,6 +45,15 @@ export const deleteStockModal = getAsyncLifecycle(
   }
 );
 
+export const deleteUserScopeModal = getAsyncLifecycle(
+  () =>
+    import("./stock-user-role-scopes/delete-stock-user-scope-modal.component"),
+  {
+    featureName: "delete-stock-user-scope-modal",
+    moduleName,
+  }
+);
+
 export const importBulkStockItemsDialog = getAsyncLifecycle(
   () =>
     import(

src/routes.json

@@ -26,6 +26,10 @@
     {
       "name": "delete-stock-modal",
       "component": "deleteStockModal"
+    },
+    {
+      "name": "delete-stock-user-scope-modal",
+      "component": "deleteUserScopeModal"
     }
   ],
   "pages": [

src/stock-items/stock-items-table.component.tsx

@@ -94,7 +94,13 @@ const StockItemsTableComponent: React.FC<StockItemsTableProps> = () => {
 
   return (
     <>
-      <TabPanel>Drugs and other stock items managed by the system.</TabPanel>
+      <TabPanel>
+        {t(
+          "panelDescription",
+          "Drugs and other stock items managed by the system."
+        )}
+      </TabPanel>
+
       <DataTable
         rows={tableRows}
         headers={tableHeaders}

src/stock-operations/add-stock-operation/base-operation-details.component.tsx

@@ -288,15 +288,6 @@ const BaseOperationDetails: React.FC<BaseOperationDetailsProps> = ({
             labelText={operation?.hasDestination ? "From:" : "From:"}
           />
         )}
-        {/* {(!canEdit || lockSource) && operation?.hasSource && (
-          <TextInput
-            id="sourceUuidLbl"
-            value={model?.sourceName ?? ""}
-            readOnly={true}
-            labelText={operation?.hasDestination ? "From:" : "Location:"}
-          />
-        )}        */}
-
         {canEdit && !lockDestination && operation?.hasDestination && (
           <PartySelector
             controllerName="destinationUuid"
@@ -324,14 +315,6 @@ const BaseOperationDetails: React.FC<BaseOperationDetailsProps> = ({
             labelText={operation?.hasSource ? "To:" : "To:"}
           />
         )}
-        {/* {(!canEdit || lockDestination) && operation?.hasDestination && (
-          <TextInput
-            id="destinationUuidLbl"
-            value={model?.destinationName ?? ""}
-            readOnly={true}
-            labelText={operation?.hasSource ? "To:" : "Location:"}
-          />
-        )} */}
 
         {canEdit && (
           <UsersSelector

src/stock-operations/stock-operations-table.component.tsx

@@ -266,7 +266,10 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
 
   return (
     <div className={styles.tableOverride}>
-      <TabPanel>Stock operations to track movement of stock.</TabPanel>
+      <TabPanel>
+        {t("panelDescription", "Stock operations to track movement of stock.")}
+      </TabPanel>
+
       <div id="table-tool-bar">
         <div></div>
         <div className="right-filters"></div>

src/stock-sources/add-stock-sources/add-stock-sources.component.tsx

@@ -9,6 +9,7 @@ import {
   SelectItem,
 } from "@carbon/react";
 import React, { ChangeEvent, useCallback, useState } from "react";
+import { handleMutate } from "../swr-revalidation";
 import styles from "./add-stock-sources.scss";
 import { useConceptById } from "../../stock-lookups/stock-lookups.resource";
 import { STOCK_SOURCE_TYPE_CODED_CONCEPT_ID } from "../../constants";
@@ -65,6 +66,9 @@ const StockSourcesAddOrUpdate: React.FC<AddStockSourceProps> = ({ model }) => {
                 "Stock Source Added Successfully"
               ),
             });
+
+            handleMutate("ws/rest/v1/stockmanagement/stocksource");
+
             closeOverlay();
           },
           (error) => {

src/stock-sources/stock-sources-delete/stock-sources-delete.component.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { handleMutate } from "../swr-revalidation";
 import { Button, InlineLoading } from "@carbon/react";
 import { useTranslation } from "react-i18next";
 import { TrashCan } from "@carbon/react/icons";
@@ -27,6 +28,8 @@ const StockSourcesDeleteActionMenu: React.FC<
           .then(
             () => {
               setDeletingSource(false);
+
+              handleMutate("ws/rest/v1/stockmanagement/stocksource");
               showToast({
                 critical: true,
                 title: t("deletingSource", "Delete Source"),

src/stock-sources/stock-sources-items-table.component.tsx

@@ -73,7 +73,12 @@ function StockSourcesItems() {
 
   return (
     <div className={styles.tableOverride}>
-      <TabPanel>List of partners who provide stock to the facility.</TabPanel>
+      <TabPanel>
+        {t(
+          "panelDescription",
+          "List of partners who provide stock to the facility."
+        )}
+      </TabPanel>
       <div id="table-tool-bar">
         <div></div>
         <div className="right-filters"></div>

src/stock-sources/swr-revalidation.ts

@@ -0,0 +1,7 @@
+import { mutate } from "swr";
+
+export const handleMutate = (url: string) => {
+  mutate((key) => typeof key === "string" && key.startsWith(url), undefined, {
+    revalidate: true,
+  });
+};

src/stock-user-role-scopes/add-stock-user-scope/add-stock-user-role-scope.component.tsx

@@ -41,6 +41,7 @@ import { debounce } from "lodash-es";
 import { User } from "../../core/api/types/identity/User";
 import { Role } from "../../core/api/types/identity/Role";
 import { StockOperationType } from "../../core/api/types/stockOperation/StockOperationType";
+import { handleMutate } from "../swr-revalidation";
 
 const MinDate: Date = today();
 
@@ -247,6 +248,7 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({
 
     createOrUpdateUserRoleScope(formModel).then(
       (res) => {
+        handleMutate("ws/rest/v1/stockmanagement/userrolescope");
         showToast({
           critical: true,
           title: t("addUserRole", "Add User role"),

src/stock-user-role-scopes/delete-stock-user-scope-modal.component.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Button, ModalHeader, ModalBody, ModalFooter } from "@carbon/react";
+import styles from "../root.scss";
+
+interface DeleteConfirmationProps {
+  uuid?: string;
+  close: () => void;
+  onConfirmation: () => void;
+}
+
+const DeleteConfirmation: React.FC<DeleteConfirmationProps> = ({
+  close,
+  onConfirmation,
+  uuid,
+}) => {
+  const { t } = useTranslation();
+  const handleCancel = () => close();
+  const handleDelete = () => onConfirmation?.();
+
+  return (
+    <>
+      <ModalHeader closeModal={close} className={styles.productiveHeading03}>
+        {t("deleteStockUserScope", "Delete Stock User Scope")}?
+      </ModalHeader>
+      <ModalBody>
+        <p className={styles.bodyLong01}>
+          {t(
+            "deleteConfirmationText",
+            `Are you sure you want to delete this User Scope? This action can't be undone.`,
+            { encounter: uuid }
+          )}
+        </p>
+      </ModalBody>
+      <ModalFooter>
+        <Button size="lg" kind="secondary" onClick={handleCancel}>
+          {t("cancel", "Cancel")}
+        </Button>
+        <Button autoFocus kind="danger" onClick={handleDelete} size="lg">
+          {t("delete", "Delete")}
+        </Button>
+      </ModalFooter>
+    </>
+  );
+};
+
+export default DeleteConfirmation;

src/stock-user-role-scopes/delete-stock-user-scope/delete-stock-user-scope.component.tsx

@@ -0,0 +1,73 @@
+import React, { useState } from "react";
+import { Button, InlineLoading } from "@carbon/react";
+import { useTranslation } from "react-i18next";
+import { TrashCan } from "@carbon/react/icons";
+import { deleteUserRoleScopes } from "../stock-user-role-scopes.resource";
+import { showModal, showNotification, showToast } from "@openmrs/esm-framework";
+import { handleMutate } from "../swr-revalidation";
+
+interface StockUserScopDeleteActionMenuProps {
+  uuid: string;
+}
+
+const StockUserScopeDeleteActionMenu: React.FC<
+  StockUserScopDeleteActionMenuProps
+> = ({ uuid }) => {
+  const { t } = useTranslation();
+
+  const [deletingUserScope, setDeletingUserScope] = useState(false);
+
+  const handleDeleteStockUserScope = React.useCallback(() => {
+    const close = showModal("delete-stock-user-scope-modal", {
+      close: () => close(),
+      uuid: uuid,
+      onConfirmation: () => {
+        const ids = [];
+        ids.push(uuid);
+        deleteUserRoleScopes(ids)
+          .then(
+            () => {
+              handleMutate("ws/rest/v1/stockmanagement/userrolescope");
+              setDeletingUserScope(false);
+              showToast({
+                critical: true,
+                title: t("deletingstockUserScope", "Delete Stock User Scope"),
+                kind: "success",
+                description: t(
+                  "stockuserscopedeletedsuccessfully",
+                  "Stock User Scope Deleted Successfully"
+                ),
+              });
+            },
+            (error) => {
+              setDeletingUserScope(false);
+              showNotification({
+                title: t(
+                  `errorDeletingUserScope', 'error deleting a user scope`
+                ),
+                kind: "error",
+                critical: true,
+                description: error?.message,
+              });
+            }
+          )
+          .catch();
+        close();
+      },
+    });
+  }, [t, uuid]);
+
+  const deleteButton = (
+    <Button
+      kind="ghost"
+      size="md"
+      onClick={handleDeleteStockUserScope}
+      iconDescription={t("deleteUserScope", "Delete Stock User Scope")}
+      renderIcon={(props) => <TrashCan size={16} {...props} />}
+    />
+  );
+
+  return deletingUserScope ? <InlineLoading /> : deleteButton;
+};
+
+export default StockUserScopeDeleteActionMenu;

src/stock-user-role-scopes/stock-user-role-scopes-items-table.component.tsx

@@ -29,6 +29,7 @@ import { URL_USER_ROLE_SCOPE } from "../stock-items/stock-items-table.component"
 import AddStockUserRoleScopeActionButton from "./add-stock-user-role-scope-button.component";
 import { formatDisplayDate } from "../core/utils/datetimeUtils";
 import EditStockUserRoleActionsMenu from "./edit-stock-user-scope/edit-stock-user-scope-action-menu.component";
+import StockUserScopeDeleteActionMenu from "./delete-stock-user-scope/delete-stock-user-scope.component";
 
 function StockUserRoleScopesItems() {
   const { t } = useTranslation();
@@ -88,7 +89,12 @@ function StockUserRoleScopesItems() {
         enabled: userRoleScope?.enabled
           ? t("stockmanagement.yes", "Yes")
           : t("stockmanagement.no", "No"),
-        actions: <EditStockUserRoleActionsMenu data={items[index]} />,
+        actions: (
+          <div style={{ display: "flex" }}>
+            <EditStockUserRoleActionsMenu data={items[index]} />
+            <StockUserScopeDeleteActionMenu uuid={items[index].uuid} />
+          </div>
+        ),
       };
     });
   }, [items, t]);
@@ -100,8 +106,10 @@ function StockUserRoleScopesItems() {
   return (
     <div className={styles.tableOverride}>
       <TabPanel>
-        To access stock management features, users must have assigned roles
-        specifying location and stock operation type scopes.
+        {t(
+          "panelDescription",
+          "To access stock management features, users must have assigned roles specifying location and stock operation type scopes."
+        )}
       </TabPanel>
       <div id="table-tool-bar">
         <div></div>

src/stock-user-role-scopes/swr-revalidation.ts

@@ -0,0 +1,7 @@
+import { mutate } from "swr";
+
+export const handleMutate = (url: string) => {
+  mutate((key) => typeof key === "string" && key.startsWith(url), undefined, {
+    revalidate: true,
+  });
+};