@orchestrator-ui/orchestrator-ui-components 0.9.0 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "0.9.0",
+    "version": "0.10.0",
     "license": "MIT",
     "scripts": {
         "test": "jest",
@@ -21,7 +21,7 @@
         "invariant": "^2.2.4",
         "moment": "^2.29.4",
         "moment-timezone": "^0.5.43",
-        "next-auth": "^4.23.1",
+        "next-auth": "^4.24.5",
         "next-intl": "^3.4.1",
         "next-query-params": "^5.0.0",
         "object-hash": "^3.0.0",

package/src/components/WfoAuth/WfoAuth.tsx

@@ -1,22 +1,50 @@
-import React, { JSX, useContext } from 'react';
-
-import { useSession } from 'next-auth/react';
+import React, { ReactNode, useContext } from 'react';
 
 import { WfoLoading } from '@/components';
 import { OrchestratorConfigContext } from '@/contexts';
+import { PolicyContextProvider } from '@/contexts/PolicyContext';
+import { useWfoSession } from '@/hooks';
 
 interface AuthProps {
-    children: JSX.Element;
+    children: ReactNode;
+    isAllowedHandler?: (routerPath: string, resource?: string) => boolean;
 }
 
-export const WfoAuth = ({ children }: AuthProps): JSX.Element => {
+/**
+ * The WfoAuth component exposes a function isAllowedHandler to apply policy checks.
+ * In components in this library a usePolicy hook is available that exposes a function isAllowed
+ * with 1 optional parameter "resource".
+ *
+ * For convenience there is also a WfoIsAllowedToRender component available. In both hook
+ * and component the current route is determined in the usePolicy hook and passed as
+ * first parameter in the isAllowedHandler function in this WfoAuth component.
+ *
+ * Example for usage in any component:
+ * const { isAllowed } = usePolicy();
+ * const isAllowedToDoOrSeeSomething: boolean = isAllowed('something')
+ *
+ * Example for implementing the isAllowed function:
+ * const isAllowed = (routerPath: string, resource?: string) => {
+ *     // Your own rules to determine if something is allowed or not
+ *     // The useWfoSession hook can be used to get the current user profile
+ * }
+ */
+export const WfoAuth = ({
+    children,
+    isAllowedHandler = () => true,
+}: AuthProps) => {
     const { authActive } = useContext(OrchestratorConfigContext);
-    const { status } = useSession({
+    const { status } = useWfoSession({
         required: authActive,
     });
 
     if (status === 'loading') {
         return <WfoLoading />;
     }
-    return children;
+
+    return (
+        <PolicyContextProvider isAllowedHandler={isAllowedHandler}>
+            {children}
+        </PolicyContextProvider>
+    );
 };

package/src/components/WfoAuth/WfoIsAllowedToRender.tsx

@@ -0,0 +1,17 @@
+import React, { FC, ReactNode } from 'react';
+
+import { usePolicy } from '@/hooks';
+
+export type WfoIsAllowedToRenderProps = {
+    resource?: string;
+    children: ReactNode;
+};
+
+export const WfoIsAllowedToRender: FC<WfoIsAllowedToRenderProps> = ({
+    resource,
+    children,
+}) => {
+    const { isAllowed } = usePolicy();
+
+    return isAllowed(resource) ? <>{children}</> : null;
+};

package/src/components/WfoAuth/index.ts

@@ -1 +1,2 @@
 export * from './WfoAuth';
+export * from './WfoIsAllowedToRender';

package/src/contexts/ApiClientContext.tsx

@@ -2,7 +2,7 @@ import React, { createContext, useContext } from 'react';
 import type { ReactNode } from 'react';
 
 import { ApiClient, getApiClient } from '@/api';
-import { useSessionWithToken } from '@/hooks';
+import { useWfoSession } from '@/hooks';
 
 import { OrchestratorConfigContext } from './OrchestratorConfigContext';
 
@@ -22,7 +22,7 @@ export const ApiClientContextProvider = ({
     children,
 }: ApiClientContextProviderProps) => {
     const { orchestratorApiBaseUrl } = useContext(OrchestratorConfigContext);
-    const { session } = useSessionWithToken();
+    const { session } = useWfoSession();
     const accessToken = session?.accessToken;
     const apiClient = getApiClient(orchestratorApiBaseUrl, accessToken);
 

package/src/contexts/PolicyContext.tsx

@@ -0,0 +1,23 @@
+import React, { FC, ReactNode, createContext } from 'react';
+
+export type Policy = {
+    isAllowedHandler: (routerPath: string, resource?: string) => boolean;
+};
+
+export const PolicyContext = createContext<Policy>({
+    isAllowedHandler: () => true,
+});
+
+export type PolicyProviderProps = {
+    isAllowedHandler: (routerPath: string, resource?: string) => boolean;
+    children: ReactNode;
+};
+
+export const PolicyContextProvider: FC<PolicyProviderProps> = ({
+    isAllowedHandler,
+    children,
+}) => (
+    <PolicyContext.Provider value={{ isAllowedHandler }}>
+        {children}
+    </PolicyContext.Provider>
+);

package/src/contexts/index.ts

@@ -1,4 +1,5 @@
+export * from './ApiClientContext';
 export * from './ConfirmationDialogProvider';
 export * from './OrchestratorConfigContext';
+export * from './PolicyContext';
 export * from './TreeContext';
-export * from './ApiClientContext';

package/src/hooks/DataFetchHooks.ts

@@ -5,7 +5,7 @@ import { OrchestratorConfigContext } from '@/contexts';
 import { GraphqlFilter, ProcessDetailResultRaw } from '@/types';
 
 import { useQueryWithFetch } from './useQueryWithFetch';
-import { useSessionWithToken } from './useSessionWithToken';
+import { useWfoSession } from './useWfoSession';
 
 export type CacheNames = { [key: string]: string };
 
@@ -48,7 +48,7 @@ export const useFilterQueryWithRest = <Type>(
     filters?: GraphqlFilter<Type>[],
     refetchInterval?: number,
 ) => {
-    const { session } = useSessionWithToken();
+    const { session } = useWfoSession();
 
     const fetchFromApi = async () => {
         const response = await fetch(url, {

package/src/hooks/index.ts

@@ -3,6 +3,7 @@ export * from './useQueryWithGraphql';
 export * from './useMutateProcess';
 export * from './useOrchestratorConfig';
 export * from './useOrchestratorTheme';
+export * from './usePolicy';
 export * from './useProcessStatusCountsQuery';
 export * from './DataFetchHooks';
 export * from './useSubscriptionActions';
@@ -10,5 +11,5 @@ export * from './useDataDisplayParams';
 export * from './useShowToastMessage';
 export * from './useStoredTableConfig';
 export * from './useWithOrchestratorTheme';
-export * from './useSessionWithToken';
+export * from './useWfoSession';
 export * from './useQueryWithFetch';

package/src/hooks/useMutateProcess.ts

@@ -4,11 +4,11 @@ import { useMutation, useQueryClient } from 'react-query';
 import { signOut } from 'next-auth/react';
 
 import { OrchestratorConfigContext } from '@/contexts';
-import { useSessionWithToken } from '@/hooks/index';
+import { useWfoSession } from '@/hooks/index';
 
 export const useMutateProcess = () => {
     const { processesEndpoint } = useContext(OrchestratorConfigContext);
-    const { session } = useSessionWithToken();
+    const { session } = useWfoSession();
     const queryClient = useQueryClient();
 
     const genericRequestHeaders = {

package/src/hooks/usePolicy.ts

@@ -0,0 +1,15 @@
+import { useContext } from 'react';
+
+import { useRouter } from 'next/router';
+
+import { PolicyContext } from '@/contexts';
+
+export const usePolicy = () => {
+    const { isAllowedHandler } = useContext(PolicyContext);
+    const router = useRouter();
+
+    return {
+        isAllowed: (resource?: string) =>
+            isAllowedHandler(router.asPath, resource),
+    };
+};

package/src/hooks/useQueryWithFetch.ts

@@ -3,14 +3,14 @@ import { useQuery } from 'react-query';
 import { Variables } from 'graphql-request/build/cjs/types';
 import { signOut } from 'next-auth/react';
 
-import { useSessionWithToken } from './useSessionWithToken';
+import { useWfoSession } from './useWfoSession';
 
 export const useQueryWithFetch = <T, V extends Variables>(
     url: string,
     queryVars: V,
     queryKey: string,
 ) => {
-    const { session } = useSessionWithToken();
+    const { session } = useWfoSession();
     const requestHeaders = {
         authorization: session ? `Bearer ${session.accessToken}` : '',
     };

package/src/hooks/useQueryWithGraphql.ts

@@ -8,7 +8,7 @@ import { TypedDocumentNode } from '@graphql-typed-document-node/core';
 
 import { OrchestratorConfigContext } from '@/contexts';
 
-import { useSessionWithToken } from './useSessionWithToken';
+import { useWfoSession } from './useWfoSession';
 
 export const useQueryWithGraphql = <U, V extends Variables>(
     query: TypedDocumentNode<U, V>,
@@ -17,7 +17,7 @@ export const useQueryWithGraphql = <U, V extends Variables>(
     options: UseQueryOptions<U> = {},
 ) => {
     const { graphqlEndpointCore } = useContext(OrchestratorConfigContext);
-    const { session } = useSessionWithToken();
+    const { session } = useWfoSession();
 
     const graphQLClient = new GraphQLClient(graphqlEndpointCore);
 

package/src/hooks/useSubscriptionActions.ts

@@ -2,7 +2,7 @@ import { useContext } from 'react';
 import { useQuery } from 'react-query';
 
 import { OrchestratorConfigContext } from '@/contexts';
-import { useSessionWithToken } from '@/hooks';
+import { useWfoSession } from '@/hooks';
 
 export interface SubscriptionAction {
     name: string;
@@ -28,7 +28,7 @@ export const useSubscriptionActions = (subscriptionId: string) => {
     const { subscriptionActionsEndpoint } = useContext(
         OrchestratorConfigContext,
     );
-    const { session } = useSessionWithToken();
+    const { session } = useWfoSession();
     const fetchSubscriptionActions = async () => {
         const response = await fetch(
             `${subscriptionActionsEndpoint}/${subscriptionId}`,

package/src/hooks/useWfoSession.ts

@@ -0,0 +1,28 @@
+import type { Session } from 'next-auth';
+import { useSession } from 'next-auth/react';
+import type { UseSessionOptions } from 'next-auth/react';
+
+export type WfoSession = Session & {
+    accessToken?: string;
+    profile?: WfoUserProfile;
+};
+
+export type WfoUserProfile = {
+    sub: string;
+    name: string;
+    preferred_username: string;
+    email: string;
+    [key: string]: unknown;
+};
+
+export const useWfoSession = <R extends boolean>(
+    options?: UseSessionOptions<R>,
+) => {
+    const sessionData = useSession(options);
+
+    // Data prop of type Session from NextAuth endpoint is not properly typed
+    const { data, ...updatedSessionData } = sessionData;
+    const dataWithToken = data as WfoSession | null;
+
+    return { ...updatedSessionData, session: dataWithToken };
+};

package/src/rtk/api.ts

@@ -3,7 +3,7 @@ import { getSession } from 'next-auth/react';
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 import { graphqlRequestBaseQuery } from '@rtk-query/graphql-request-base-query';
 
-import type { SessionWithToken } from '@/hooks';
+import type { WfoSession } from '@/hooks';
 
 import type { RootState } from './store';
 
@@ -18,7 +18,7 @@ type ExtraOptions = {
 };
 
 const prepareHeaders = async (headers: Headers) => {
-    const session = (await getSession()) as SessionWithToken;
+    const session = (await getSession()) as WfoSession;
     if (session?.accessToken) {
         headers.set('Authorization', `Bearer ${session.accessToken}`);
     }

package/src/hooks/useSessionWithToken.ts

@@ -1,12 +0,0 @@
-import type { Session } from 'next-auth';
-import { useSession } from 'next-auth/react';
-
-export type SessionWithToken = Session & {
-    accessToken?: string;
-};
-
-export const useSessionWithToken = () => {
-    const sessionData = useSession();
-    const dataWithToken = sessionData.data as SessionWithToken;
-    return { ...sessionData, session: dataWithToken };
-};