Tailwinds LinkFacilityDialog.tsx (#5665)

* tailwinds #5001

* Deletes unused Link Facility Dialog

* Revert "Deletes unused Link Facility Dialog"

This reverts commit 5e8db7e.

src/Components/Users/LinkFacilityDialog.tsx

@@ -1,23 +1,7 @@
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-} from "@material-ui/core";
 import React, { useState } from "react";
 import { FacilitySelect } from "../Common/FacilitySelect";
 import { FacilityModel } from "../Facility/models";
-import { makeStyles } from "@material-ui/core/styles";
-
-const useStyles = makeStyles({
-  paperFullWidth: {
-    overflowY: "visible",
-  },
-  dialogContentRoot: {
-    overflowY: "visible",
-  },
-});
+import ConfirmDialogV2 from "../Common/ConfirmDialogV2";
 
 interface Props {
   username: string;
@@ -28,35 +12,18 @@ interface Props {
   handleCancel: () => void;
 }
 
-const LinkFacilityDialog = (props: Props) => {
-  const { username, handleOk, handleCancel } = props;
+const LinkFacilityDialog = ({ username, handleOk, handleCancel }: Props) => {
   const [facility, setFacility] = useState<any>(null);
-  const classes = useStyles();
-
-  const okClicked = () => {
-    handleOk(username, facility);
-  };
-
-  const cancelClicked = () => {
-    handleCancel();
-  };
 
   return (
-    <Dialog
-      open={true}
-      onClose={cancelClicked}
-      classes={{
-        paper: classes.paperFullWidth,
-      }}
-    >
-      <DialogTitle id="alert-dialog-title">
-        Link new facility to {username}
-      </DialogTitle>
-      <DialogContent
-        classes={{
-          root: classes.dialogContentRoot,
-        }}
-      >
+    <ConfirmDialogV2
+      show
+      title={
+        <span>
+          Link new facility to <strong>{username}</strong>
+        </span>
+      }
+      description={
         <div className="md:min-w-[400px]">
           <FacilitySelect
             multiple={false}
@@ -69,21 +36,13 @@ const LinkFacilityDialog = (props: Props) => {
             className="z-40"
           />
         </div>
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={cancelClicked} color="secondary">
-          Cancel
-        </Button>
-        <Button
-          color="primary"
-          disabled={!facility}
-          onClick={okClicked}
-          autoFocus
-        >
-          Add
-        </Button>
-      </DialogActions>
-    </Dialog>
+      }
+      action="Link"
+      variant="primary"
+      onClose={handleCancel}
+      onConfirm={() => handleOk(username, facility)}
+      disabled={!facility}
+    />
   );
 };
 

src/Components/Users/ManageUsers.tsx

@@ -22,7 +22,6 @@ import ConfirmHomeFacilityUpdateDialog from "./ConfirmHomeFacilityUpdateDialog";
 import CountBlock from "../../CAREUI/display/Count";
 import { FacilityModel } from "../Facility/models";
 import { FacilitySelect } from "../Common/FacilitySelect";
-import LinkFacilityDialog from "./LinkFacilityDialog";
 import SearchInput from "../Form/SearchInput";
 import SkillsSlideOver from "./SkillsSlideOver";
 import SlideOverCustom from "../../CAREUI/interactive/SlideOver";
@@ -530,11 +529,6 @@ function UserFacilities(props: { user: any }) {
       newFacility: undefined,
     });
   };
-
-  const [linkFacility, setLinkFacility] = useState<{
-    show: boolean;
-    username: string;
-  }>({ show: false, username: "" });
   const hideUnlinkFacilityModal = () => {
     setUnlinkFacilityData({
       show: false,
@@ -583,15 +577,7 @@ function UserFacilities(props: { user: any }) {
     hideUnlinkFacilityModal();
   };
 
-  const hideLinkFacilityModal = () => {
-    setLinkFacility({
-      show: false,
-      username: "",
-    });
-  };
-
   const addFacility = async (username: string, facility: any) => {
-    hideLinkFacilityModal();
     setIsLoading(true);
     const res = await dispatch(addUserFacility(username, String(facility.id)));
     if (res?.status !== 201) {
@@ -610,13 +596,6 @@ function UserFacilities(props: { user: any }) {
 
   return (
     <div className="h-full">
-      {linkFacility.show && (
-        <LinkFacilityDialog
-          username={linkFacility.username}
-          handleOk={addFacility}
-          handleCancel={hideLinkFacilityModal}
-        />
-      )}
       {unlinkFacilityData.show && (
         <UnlinkFacilityDialog
           facilityName={unlinkFacilityData.facility?.name || ""}