Migrate editable attributes / can write permission extensions to overridable pattern

ui-frontend/packages/catalog-ui-search/src/main/webapp/component/overridable/overridable-can-write-permission.tsx

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) Codice Foundation
+ *
+ * This is free software: you can redistribute it and/or modify it under the terms of the GNU Lesser
+ * General Public License as published by the Free Software Foundation, either version 3 of the
+ * License, or any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without
+ * even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details. A copy of the GNU Lesser General Public License
+ * is distributed along with this program and can be found at
+ * <http://www.gnu.org/licenses/lgpl.html>.
+ *
+ **/
+import { Overridable } from '../../js/model/Base/base-classes'
+import { useOverridable } from '../../js/model/Base/base-classes.hooks'
+import type { LazyQueryResult } from '../../js/model/LazyQueryResult/LazyQueryResult'
+import type { TypedUserInstanceType } from '../singletons/TypedUser'
+import type { useConfigurationType } from '../../js/model/Startup/configuration.hooks'
+
+export type CanWritePermissionType = (props: {
+  attribute: string
+  lazyResult: LazyQueryResult
+  user: any
+  editableAttributes: string[]
+  typedUserInstance: TypedUserInstanceType
+  configuration: ReturnType<useConfigurationType>
+}) => boolean
+
+// export this as a fallback for downstream to use
+export const BaseCanWritePermission: CanWritePermissionType = (props) => {
+  const { attribute, lazyResult, typedUserInstance, configuration } = props
+  const canWrite =
+    !lazyResult.isRemote() &&
+    typedUserInstance.canWrite(lazyResult) &&
+    !configuration.isReadOnly(attribute)
+  return canWrite
+}
+
+export const OverridableCanWritePermission = new Overridable(
+  BaseCanWritePermission
+)
+
+export const useCanWritePermission = () => {
+  return useOverridable(OverridableCanWritePermission)
+}

ui-frontend/packages/catalog-ui-search/src/main/webapp/component/overridable/overridable-editable-attributes.tsx

@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) Codice Foundation
+ *
+ * This is free software: you can redistribute it and/or modify it under the terms of the GNU Lesser
+ * General Public License as published by the Free Software Foundation, either version 3 of the
+ * License, or any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without
+ * even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details. A copy of the GNU Lesser General Public License
+ * is distributed along with this program and can be found at
+ * <http://www.gnu.org/licenses/lgpl.html>.
+ *
+ **/
+import { Overridable } from '../../js/model/Base/base-classes'
+import { useOverridable } from '../../js/model/Base/base-classes.hooks'
+import React from 'react'
+
+export type BaseEditableAttributes = () => Promise<string[]>
+
+export const BaseFetchEditableAttributes: BaseEditableAttributes = async () => {
+  return []
+}
+
+export const OverridableFetchEditableAttributes = new Overridable(
+  BaseFetchEditableAttributes
+)
+
+export const useFetchEditableAttributes = () => {
+  return useOverridable(OverridableFetchEditableAttributes)
+}
+
+let cachedFetchEditableAttributesPromise = null as null | Promise<string[]>
+let cachedFetchEditableAttributesFunction = null as
+  | null
+  | (() => Promise<string[]>)
+
+export const useCustomEditableAttributes = () => {
+  const [customEditableAttributes, setCustomEditableAttributes] =
+    React.useState<null | string[]>(null)
+  const fetchEditableAttributes = useFetchEditableAttributes()
+
+  React.useEffect(() => {
+    if (
+      cachedFetchEditableAttributesPromise === null ||
+      cachedFetchEditableAttributesFunction !== fetchEditableAttributes
+    ) {
+      setCustomEditableAttributes(null)
+      cachedFetchEditableAttributesFunction = fetchEditableAttributes
+      cachedFetchEditableAttributesPromise = fetchEditableAttributes()
+    }
+    cachedFetchEditableAttributesPromise
+      .then((editableAttributes) => {
+        setCustomEditableAttributes(editableAttributes)
+      })
+      .catch(() => {
+        setCustomEditableAttributes([])
+      })
+  }, [fetchEditableAttributes])
+
+  return {
+    loading: customEditableAttributes === null,
+    customEditableAttributes,
+  }
+}

ui-frontend/packages/catalog-ui-search/src/main/webapp/component/singletons/TypedUser.tsx

@@ -223,3 +223,5 @@ type QuerySettingsModelType = {
   set: (attr: any, value?: any) => void
   toJSON: () => QuerySettingsType
 }
+
+export type TypedUserInstanceType = typeof TypedUserInstance

ui-frontend/packages/catalog-ui-search/src/main/webapp/component/tabs/metacard/summary.tsx

@@ -40,6 +40,7 @@ import { useMetacardDefinitions } from '../../../js/model/Startup/metacard-defin
 import Common from '../../../js/Common'
 import SummaryManageAttributes from '../../../react-component/summary-manage-attributes/summary-manage-attributes'
 import moment from 'moment-timezone'
+import CircularProgress from '@mui/material/CircularProgress'
 
 type Props = {
   result: LazyQueryResult
@@ -499,7 +500,7 @@ const AttributeComponent = ({
   }
   const { getAlias, getType } = useMetacardDefinitions()
   let label = getAlias(attr)
-  const { isNotWritable } = useCustomReadOnlyCheck()
+  const { isWritable, loading } = useCustomReadOnlyCheck()
   const dialogContext = useDialog()
   const convertToFormat = useCoordinateFormat()
   const convertToPrecision = (value: any) => {
@@ -540,7 +541,7 @@ const AttributeComponent = ({
         wrap={'nowrap'}
         className="group relative"
       >
-        {isNotWritable({ attribute: attr, lazyResult }) ? null : (
+        {!loading && isWritable({ attribute: attr, lazyResult }) ? (
           <div className="p-1 hidden group-hover:block absolute right-0 top-0">
             <Button
               onClick={() => {
@@ -568,8 +569,14 @@ const AttributeComponent = ({
               <EditIcon />
             </Button>
           </div>
-        )}
-
+        ) : null}
+        {loading ? (
+          <>
+            <div className="p-1 hidden group-hover:block absolute right-0 top-0">
+              <CircularProgress />
+            </div>
+          </>
+        ) : null}
         <Grid
           item
           xs={4}
@@ -703,7 +710,7 @@ const AttributeComponent = ({
         </Grid>
       </Grid>
     )
-  }, [summaryShown, forceRender, isNotWritable])
+  }, [summaryShown, forceRender, isWritable, loading])
   return (
     <div style={{ display: isFiltered ? 'none' : 'block' }}>{MemoItem}</div>
   )

ui-frontend/packages/catalog-ui-search/src/main/webapp/component/tabs/metacard/transfer-list.tsx

@@ -21,7 +21,6 @@ import {
   Droppable,
   Draggable,
 } from 'react-beautiful-dnd'
-import extension from '../../../extension-points'
 import { Elevations } from '../../theme/theme'
 import { DarkDivider } from '../../dark-divider/dark-divider'
 import LeftArrowIcon from '@mui/icons-material/ChevronLeft'
@@ -41,6 +40,8 @@ import ExtensionPoints from '../../../extension-points/extension-points'
 import { useMetacardDefinitions } from '../../../js/model/Startup/metacard-definitions.hooks'
 import { StartupDataStore } from '../../../js/model/Startup/startup'
 import { useConfiguration } from '../../../js/model/Startup/configuration.hooks'
+import { useCanWritePermission } from '../../overridable/overridable-can-write-permission'
+import { useCustomEditableAttributes } from '../../overridable/overridable-editable-attributes'
 const getAmountChecked = (items: CheckedType) => {
   return Object.values(items).filter((a) => a).length
 }
@@ -138,17 +139,17 @@ const ItemRow = ({
   const dialogContext = useDialog()
   const { setItems, items, filteredItemArray } =
     React.useContext(CustomListContext)
-  const { isNotWritable } = useCustomReadOnlyCheck()
+  const { isWritable } = useCustomReadOnlyCheck()
   React.useEffect(() => {
     if (measure) measure()
   }, [])
   const alias = MetacardDefinitions.getAlias(value)
-  const isReadonly = lazyResult
-    ? isNotWritable({
+  const isReadonly = !lazyResult
+    ? true
+    : isWritable({
         attribute: value,
         lazyResult,
       })
-    : true
   if (filter && !alias.toLowerCase().includes(filter.toLowerCase())) {
     return null
   }
@@ -600,50 +601,28 @@ const CustomList = ({
     </CustomListContext.Provider>
   )
 }
+
 export const useCustomReadOnlyCheck = () => {
   const Configuration = useConfiguration()
-  const [customEditableAttributes, setCustomEditableAttributes] =
-    React.useState([] as string[])
-  const isMounted = React.useRef<boolean>(true)
-  const [loading, setLoading] = React.useState(true)
-  const initializeCustomEditableAttributes = async () => {
-    const attrs = await extension.customEditableAttributes()
-    if (isMounted.current) {
-      if (attrs !== undefined) {
-        setCustomEditableAttributes(attrs)
-      }
-      setLoading(false)
-    }
-  }
-  React.useEffect(() => {
-    initializeCustomEditableAttributes()
-    return () => {
-      isMounted.current = false
-    }
-  }, [])
+  const canWritePermission = useCanWritePermission()
+  const { loading, customEditableAttributes } = useCustomEditableAttributes()
   return {
     loading,
-    isNotWritable: ({
+    isWritable: ({
       attribute,
       lazyResult,
     }: {
       attribute: string
       lazyResult: LazyQueryResult
     }) => {
-      const perm = extension.customCanWritePermission({
+      return canWritePermission({
         attribute,
         lazyResult,
         user,
-        editableAttributes: customEditableAttributes,
+        editableAttributes: customEditableAttributes || [],
+        typedUserInstance: TypedUserInstance,
+        configuration: Configuration,
       })
-      if (perm !== undefined) {
-        return !perm
-      }
-      const determination =
-        lazyResult.isRemote() ||
-        !TypedUserInstance.canWrite(lazyResult) ||
-        Configuration.isReadOnly(attribute)
-      return determination
     },
   }
 }

ui-frontend/packages/catalog-ui-search/src/main/webapp/extension-points/extension-points.tsx

@@ -42,13 +42,6 @@ export type ExtensionPointsType = {
     value: string
     onChange: (val: any) => void
   }) => React.ReactNode | undefined
-  customCanWritePermission: (props: {
-    attribute: string
-    lazyResult: LazyQueryResult
-    user: any
-    editableAttributes: string[]
-  }) => boolean | undefined
-  customEditableAttributes: () => Promise<any>
   resultItemTitleAddOn: ({
     lazyResult,
   }: {
@@ -128,8 +121,6 @@ const ExtensionPoints: ExtensionPointsType = {
   providers,
   metacardInteractions,
   customFilterInput: () => undefined,
-  customCanWritePermission: () => undefined,
-  customEditableAttributes: async () => undefined,
   resultItemTitleAddOn: () => null,
   resultTitleIconAddOn: () => null,
   resultItemRowAddOn: () => null,

ui-frontend/packages/catalog-ui-search/src/main/webapp/js/model/LazyQueryResult/LazyQueryResult.tsx

@@ -474,3 +474,5 @@ export class LazyQueryResult {
   }
   currentOverlayUrl?: string
 }
+
+export type LazyQueryResultType = typeof LazyQueryResult

ui-frontend/packages/catalog-ui-search/src/main/webapp/js/model/Startup/configuration.hooks.tsx

@@ -37,3 +37,5 @@ export const useConfiguration = () => {
   )
   return configuration
 }
+
+export type useConfigurationType = typeof useConfiguration