Hide/disable UI elements based on ability permissions

Author: mmtandoc

Diff for: components/chemical/ChemicalEntry.tsx

@@ -1,7 +1,7 @@
-import { useUser } from "@supabase/auth-helpers-react"
+import { subject } from "@casl/ability"
+import _ from "lodash"
 import { useEffect, useMemo } from "react"
 import { Controller, UseFormReturn, useFieldArray } from "react-hook-form"
-import { preload } from "swr"
 
 import { Button } from "components/ui"
 import {
@@ -12,11 +12,12 @@ import {
   RhfRadioGroup,
   TextArea,
 } from "components/ui/forms"
+import { useAbility } from "lib/contexts/AbilityContext"
 import { NullableChemicalFields } from "lib/fields"
 import { useCurrentUser } from "lib/hooks/useCurrentUser"
 import useUpdateFieldConditionally from "lib/hooks/useUpdateFieldConditionally"
+import ChemicalMapper from "lib/mappers/ChemicalMapper"
 import { isCentralPharmacy } from "lib/utils"
-import { multiFetcher } from "pages/_app"
 import { DataEntryComponent } from "types/common"
 
 type Props = {
@@ -26,9 +27,9 @@ type Props = {
 //preload("/api/users/current", multiFetcher)
 
 const ChemicalEntry: DataEntryComponent<NullableChemicalFields, Props> = (
-  props: Props,
+  props,
 ) => {
-  const { formMethods } = props
+  const { formMethods, action = "create" } = props
 
   const { user, error: userError } = useCurrentUser()
 
@@ -37,12 +38,20 @@ const ChemicalEntry: DataEntryComponent<NullableChemicalFields, Props> = (
     console.error(userError)
   }
 
-  const { register, control, watch, setValue, getFieldState, trigger } =
-    formMethods
+  const {
+    register,
+    control,
+    watch,
+    setValue,
+    getFieldState,
+    trigger,
+    getValues,
+  } = formMethods
 
   const additionalInfoArrayMethods = useFieldArray({
     control, // control props comes from useForm (optional: if you are using FormContext)
     name: "additionalInfo", // unique name for your Field Array
+    keyName: "key",
   })
 
   const hasNoCasNumber = watch("hasNoCasNumber") as boolean
@@ -54,10 +63,27 @@ const ChemicalEntry: DataEntryComponent<NullableChemicalFields, Props> = (
     [user?.pharmacyId],
   )
 
+  const ability = useAbility()
+
   const canFullEdit = useMemo(
+    () =>
+      ability.can(
+        action,
+        subject(
+          "Chemical",
+          ChemicalMapper.toModel({
+            pharmacyId: user?.pharmacyId,
+            ...getValues(),
+          } as any) as any,
+        ),
+      ),
+    [ability.rules, getValues, user?.pharmacyId],
+  )
+
+  /* const canFullEdit = useMemo(
     () => (user ? pharmacyId === user.pharmacyId : false),
     [user, pharmacyId],
-  )
+  ) */
 
   useUpdateFieldConditionally({
     updateCondition: hasNoCasNumber === true,
@@ -83,6 +109,8 @@ const ChemicalEntry: DataEntryComponent<NullableChemicalFields, Props> = (
     [additionalInfo, user?.pharmacyId],
   )
 
+  const chemicalId = watch("id")
+
   register("id")
   return (
     <div className="chemical-entry">
@@ -156,14 +184,23 @@ const ChemicalEntry: DataEntryComponent<NullableChemicalFields, Props> = (
       <Fieldset legend="Additional Info">
         {additionalInfoArrayMethods.fields.map((item, index) => (
           <Fieldset
-            key={item.id}
+            key={item.key}
             legend={
               // If add. info's pharmacyId is undefined, use user's pharmacyId
               isCentralPharmacy(item.pharmacyId ?? user?.pharmacyId ?? NaN)
                 ? "Central"
                 : "Local"
             }
-            disabled={isCentralPharmacy(item.pharmacyId ?? NaN) && !canFullEdit}
+            disabled={ability.cannot(
+              action,
+              subject(
+                "AdditionalChemicalInfo",
+                _.defaults(item, {
+                  chemicalId,
+                  pharmacyId: user?.pharmacyId,
+                }) as any,
+              ),
+            )}
           >
             <TextArea
               {...register(`additionalInfo.${index}.value`)}
@@ -172,19 +209,20 @@ const ChemicalEntry: DataEntryComponent<NullableChemicalFields, Props> = (
             />
           </Fieldset>
         ))}
-        {!hasLocalAdditionalInfo && (
-          <Button
-            onClick={() =>
-              additionalInfoArrayMethods.append({
-                value: "",
-                pharmacyId: undefined,
-              })
-            }
-            size="small"
-          >
-            Add {isCentralUser ? "central" : "local"} additional info
-          </Button>
-        )}
+        {!hasLocalAdditionalInfo &&
+          ability.can("create", "AdditionalChemicalInfo") && (
+            <Button
+              onClick={() =>
+                additionalInfoArrayMethods.append({
+                  value: "",
+                  pharmacyId: undefined,
+                })
+              }
+              size="small"
+            >
+              Add {isCentralUser ? "central" : "local"} additional info
+            </Button>
+          )}
       </Fieldset>
       <style jsx>{`
         .chemical-entry .info {

Diff for: components/chemical/ChemicalTable.tsx

@@ -1,9 +1,12 @@
+import { subject } from "@casl/ability"
 import { Chemical } from "@prisma/client"
 import { createColumnHelper } from "@tanstack/react-table"
 import { BsGlobe } from "react-icons/bs"
 
 import { Table } from "components/ui"
 import DataRowActions from "components/ui/Table/DataRowActions"
+import { useAbility } from "lib/contexts/AbilityContext"
+import { useCurrentUser } from "lib/hooks/useCurrentUser"
 import { isCentralPharmacy, toIsoDateString } from "lib/utils"
 
 type Props = {
@@ -46,13 +49,33 @@ const columns = [
   }),
   columnHelper.display({
     id: "actions",
-    cell: (info) => (
-      <DataRowActions
-        row={info.row}
-        viewButton={{ getUrl: (data) => `/chemicals/${data.id}` }}
-        editButton={{ getUrl: (data) => `/chemicals/${data.id}/edit` }}
-      />
-    ),
+    cell: function ActionsCell(info) {
+      const { user } = useCurrentUser()
+      const ability = useAbility()
+      const data = info.row.original
+      const canEditChemical = ability.can("update", subject("Chemical", data))
+      const canManageAdditionalInfo = ability.can(
+        "manage",
+        subject("AdditionalChemicalInfo", {
+          id: 0,
+          chemical: data,
+          chemicalId: data.id,
+          value: "PLACEHOLDER",
+          pharmacyId: user?.pharmacyId ?? NaN,
+        }),
+      )
+      return (
+        <DataRowActions
+          row={info.row}
+          viewButton={{ getUrl: (data) => `/chemicals/${data.id}` }}
+          editButton={
+            canEditChemical || canManageAdditionalInfo
+              ? { getUrl: (data) => `/chemicals/${data.id}/edit` }
+              : undefined
+          }
+        />
+      )
+    },
   }),
 ]
 

Diff for: components/common/data-pages/CreateForm.tsx

@@ -116,7 +116,7 @@ const CreateForm = <
             autoComplete="off"
             noValidate
           >
-            <EntryComponent formMethods={formMethods} />
+            <EntryComponent formMethods={formMethods} action="create" />
             <div className="action-row">
               <Button theme="primary" type="submit">
                 Submit

Diff for: components/common/data-pages/EditForm.tsx

@@ -108,6 +108,7 @@ const EditForm = <
         <EntryComponent
           values={values}
           formMethods={formMethods}
+          action="update"
           {...entryComponentProps}
         />
         <div>

Diff for: components/compound/CompoundDetails.tsx

@@ -1,12 +1,13 @@
+import { subject } from "@casl/ability"
 import Link from "next/link"
-import React, { useMemo } from "react"
+import { useMemo } from "react"
 import useSWR from "swr"
 
 import { IngredientDetails } from "components/compound/ingredient/IngredientDetails"
 import { Button, Spinner } from "components/ui"
 import { Fieldset, FormGroup, TextArea } from "components/ui/forms"
+import { useAbility } from "lib/contexts/AbilityContext"
 import { SettingsFields } from "lib/fields"
-import { useCurrentUser } from "lib/hooks/useCurrentUser"
 import { CompoundWithIngredients, MfrAll } from "types/models"
 
 import { getHwngShortcutString } from "./helpers"
@@ -150,18 +151,14 @@ const MfrsActions = (props: { data: CompoundWithIngredients }) => {
     console.error(mfrsError)
   }
 
-  const { user, error: userError, isLoading: isUserLoading } = useCurrentUser()
+  const ability = useAbility()
 
-  if (userError) {
-    console.error(userError)
-  }
-
-  const canCreateNewMfr = useMemo(
-    () => user?.pharmacyId === data.pharmacyId,
-    [data.pharmacyId, user?.pharmacyId],
+  const canCreateNewMfr = ability.can(
+    "create",
+    subject("Mfr", { compound: data } as any),
   )
 
-  const isLoading = (!mfrs && !mfrsError) || isUserLoading
+  const isLoading = !mfrs && !mfrsError
   return (
     <FormGroup row>
       {!isLoading ? (

Diff for: components/compound/CompoundsTable.tsx

@@ -1,3 +1,4 @@
+import { subject } from "@casl/ability"
 import { createColumnHelper } from "@tanstack/react-table"
 import Link from "next/link"
 import { useMemo } from "react"
@@ -6,7 +7,7 @@ import { BsGlobe } from "react-icons/bs"
 import { Button, Table } from "components/ui"
 import DataRowActions from "components/ui/Table/DataRowActions"
 import RowActions from "components/ui/Table/RowActions"
-import { useCurrentUser } from "lib/hooks/useCurrentUser"
+import { useAbility } from "lib/contexts/AbilityContext"
 import { isCentralPharmacy } from "lib/utils"
 import { CompoundWithMfrCount, IngredientAll } from "types/models"
 
@@ -167,23 +168,28 @@ const columns = [
   columnHelper.display({
     id: "mfr-actions",
     cell: function MfrActionsCell(info) {
-      const { user, error: userError } = useCurrentUser()
-      if (userError) {
-        console.error(userError)
-      }
+      const ability = useAbility()
 
       const data = info.row.original
-      const canEdit = user?.pharmacyId === data.pharmacyId
+
+      const canRead = ability.can(
+        "read",
+        subject("Mfr", { compound: data } as any),
+      )
+      const canCreate = ability.can(
+        "create",
+        subject("Mfr", { compound: data } as any),
+      )
 
       return (
         <RowActions>
-          {data._count.mfrs > 0 ? (
+          {data._count.mfrs > 0 && canRead ? (
             <Link href={`/compounds/${data.id}/mfrs/latest`}>
               <Button size="small" theme="primary">
                 View MFR
               </Button>
             </Link>
-          ) : canEdit ? (
+          ) : canCreate ? (
             <Link href={`/compounds/${data.id}/mfrs/new`}>
               <Button size="small">Create MFR</Button>
             </Link>

Diff for: components/links/LinkDirectoryDetails.tsx

@@ -4,6 +4,7 @@ import { BiEdit } from "react-icons/bi"
 
 import { IconButton } from "components/ui"
 import { Fieldset } from "components/ui/forms"
+import { Can } from "lib/contexts/AbilityContext"
 
 export type LinkDirectory = {
   centralLinks: LinkModel[]
@@ -38,11 +39,13 @@ export const LinkDirectoryDetails = ({ linkDirectory }: Props) => {
         </Fieldset>
       )}
       <div className="actions">
-        <Link href="/links/edit">
-          <IconButton icon={BiEdit} size="small">
-            Edit
-          </IconButton>
-        </Link>
+        <Can do="update" on="Link">
+          <Link href="/links/edit">
+            <IconButton icon={BiEdit} size="small">
+              Edit
+            </IconButton>
+          </Link>
+        </Can>
       </div>
       <style jsx global>{`
         .link-directory .actions {