From 91703e8086287a882d1fdec8d2176da557bb0ec5 Mon Sep 17 00:00:00 2001
From: Joe Porpeglia <josephp@spotify.com>
Date: Wed, 16 Mar 2022 17:14:07 -0400
Subject: [PATCH] permission-react: use object instead of tuple for
 usePermission args

Co-authored-by: Mike Lewis <mtlewis@users.noreply.github.com>
Signed-off-by: Joe Porpeglia <josephp@spotify.com>
---
 .../src/hooks/useEntityPermission.ts          |  6 +++---
 .../src/components/PermissionedRoute.tsx      |  6 +++---
 .../src/hooks/usePermission.ts                | 19 ++++++++++++++-----
 .../ScaffolderPage/ScaffolderPage.tsx         |  4 +++-
 4 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/plugins/catalog-react/src/hooks/useEntityPermission.ts b/plugins/catalog-react/src/hooks/useEntityPermission.ts
index e1a8d2e420..3a2c12ff36 100644
--- a/plugins/catalog-react/src/hooks/useEntityPermission.ts
+++ b/plugins/catalog-react/src/hooks/useEntityPermission.ts
@@ -48,10 +48,10 @@ export function useEntityPermission(
     allowed,
     loading: loadingPermission,
     error: permissionError,
-  } = usePermission(
+  } = usePermission({
     permission,
-    entity ? stringifyEntityRef(entity) : undefined,
-  );
+    resourceRef: entity ? stringifyEntityRef(entity) : undefined,
+  });
 
   if (loadingEntity || loadingPermission) {
     return { loading: true, allowed: false };
diff --git a/plugins/permission-react/src/components/PermissionedRoute.tsx b/plugins/permission-react/src/components/PermissionedRoute.tsx
index 92b1830eca..dd39c5bb4f 100644
--- a/plugins/permission-react/src/components/PermissionedRoute.tsx
+++ b/plugins/permission-react/src/components/PermissionedRoute.tsx
@@ -47,9 +47,9 @@ export const PermissionedRoute = (
   const { permission, resourceRef, errorComponent, ...otherProps } = props;
 
   const permissionResult = usePermission(
-    ...(isResourcePermission(permission)
-      ? [permission, resourceRef]
-      : [permission]),
+    isResourcePermission(permission)
+      ? { permission, resourceRef }
+      : { permission },
   );
   const app = useApp();
   const { NotFoundErrorPage } = app.getComponents();
diff --git a/plugins/permission-react/src/hooks/usePermission.ts b/plugins/permission-react/src/hooks/usePermission.ts
index f2895ffdcb..6a00e07663 100644
--- a/plugins/permission-react/src/hooks/usePermission.ts
+++ b/plugins/permission-react/src/hooks/usePermission.ts
@@ -32,6 +32,17 @@ export type AsyncPermissionResult = {
   error?: Error;
 };
 
+/** @public */
+export type UsePermissionProps =
+  | {
+      permission: Exclude<Permission, ResourcePermission>;
+      resourceRef?: never;
+    }
+  | {
+      permission: ResourcePermission;
+      resourceRef: string | undefined;
+    };
+
 /**
  * React hook utility for authorization. Given either a non-resource
  * {@link @backstage/plugin-permission-common#Permission} or a
@@ -41,7 +52,7 @@ export type AsyncPermissionResult = {
  * {@link @backstage/plugin-permission-common/PermissionClient#authorize} for
  * more details.
  *
- * The resourceRef parameter is optional to allow calling this hook with an
+ * The resourceRef field is optional to allow calling this hook with an
  * entity that might be loading asynchronously, but when resourceRef is not
  * supplied, the value of `allowed` will always be false.
  *
@@ -51,12 +62,10 @@ export type AsyncPermissionResult = {
  * @public
  */
 export function usePermission(
-  ...[permission, resourceRef]:
-    | [ResourcePermission, string | undefined]
-    | [Exclude<Permission, ResourcePermission>]
+  props: UsePermissionProps,
 ): AsyncPermissionResult {
   const permissionApi = useApi(permissionApiRef);
-  const { data, error } = useSWR({ permission, resourceRef }, async args => {
+  const { data, error } = useSWR(props, async (args: UsePermissionProps) => {
     // We could make the resourceRef parameter required to avoid this check, but
     // it would make using this hook difficult in situations where the entity
     // must be asynchronously loaded, so instead we short-circuit to a deny when
diff --git a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx
index a1ceec194d..a68e320c13 100644
--- a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx
+++ b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx
@@ -63,7 +63,9 @@ export const ScaffolderPageContents = ({
     },
   };
 
-  const { allowed } = usePermission(catalogEntityCreatePermission);
+  const { allowed } = usePermission({
+    permission: catalogEntityCreatePermission,
+  });
 
   return (
     <Page themeId="home">