@orchestrator-ui/orchestrator-ui-components 0.11.0 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "0.11.0",
+    "version": "0.12.0",
     "license": "MIT",
     "scripts": {
         "test": "jest",

package/src/api/index.ts

@@ -24,9 +24,9 @@ import { ProductDefinition } from '@/types';
 
 import { getAxiosInstance } from './axios';
 
-const CIM_FORMS_ENDPOINT = 'surf/cim/forms/';
 const PROCESS_ENDPOINT = 'processes/';
 const PRODUCTS_ENDPOINT = 'products/';
+const FORMS_ENDPOINT = 'surf/forms/';
 
 export class BaseApiClient {
     private _axiosInstance: AxiosInstance;
@@ -105,14 +105,20 @@ export class BaseApiClient {
     };
 }
 
-abstract class ApiClientInterface extends BaseApiClient {
-    abstract cimStartForm: (
+export class ApiClient extends BaseApiClient {
+    startForm = (
         formKey: string,
         userInputs: object[],
-    ) => Promise<object>;
-}
+    ): Promise<{ id: string }> => {
+        return this.postPutJson(
+            `${FORMS_ENDPOINT}${formKey}`,
+            userInputs,
+            'post',
+            false,
+            true,
+        );
+    };
 
-export class ApiClient extends ApiClientInterface {
     startProcess = (
         workflowName: string,
         processInput: object,
@@ -142,18 +148,6 @@ export class ApiClient extends ApiClientInterface {
     productById = (productId: string): Promise<ProductDefinition> => {
         return this.fetchJson(`${PRODUCTS_ENDPOINT}${productId}`);
     };
-    cimStartForm = (
-        formKey: string,
-        userInputs: object[],
-    ): Promise<{ id: string }> => {
-        return this.postPutJson(
-            `${CIM_FORMS_ENDPOINT}${formKey}`,
-            userInputs,
-            'post',
-            false,
-            true,
-        );
-    };
     prefix_filters = (): Promise<IpPrefix[]> => {
         return this.fetchJson('surf/ipam/prefix_filters');
     };

package/src/components/WfoAuth/WfoPageUnauthorized.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+import { useTranslations } from 'next-intl';
+
+export const WfoPageUnauthorized = () => {
+    const t = useTranslations('common');
+    return <p>{t('unauthorizedPage')}</p>;
+};

package/src/components/WfoAuth/WfoPolicyRenderPageFallback.tsx

@@ -0,0 +1,19 @@
+import React, { FC } from 'react';
+import { ReactNode } from 'react';
+
+import { WfoPageUnauthorized } from '@/components/WfoAuth/WfoPageUnauthorized';
+import { usePolicy } from '@/hooks';
+
+export type WfoPolicyRenderFallbackProps = {
+    resource?: string;
+    children: ReactNode;
+};
+
+export const WfoPolicyRenderPageFallback: FC<WfoPolicyRenderFallbackProps> = ({
+    resource,
+    children,
+}) => {
+    const { isAllowed } = usePolicy();
+
+    return isAllowed(resource) ? <>{children}</> : <WfoPageUnauthorized />;
+};

package/src/components/WfoAuth/index.ts

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

package/src/components/WfoForms/CreateForm.tsx

@@ -35,7 +35,7 @@ export function CreateForm(props: IProps) {
 
     const submit = useCallback(
         (userInputs: object[]) => {
-            return apiClient.cimStartForm(formKey, userInputs).then((form) => {
+            return apiClient.startForm(formKey, userInputs).then((form) => {
                 handleSubmit(form);
             });
         },

package/src/components/WfoForms/index.ts

@@ -1,5 +1,5 @@
-export * from './CreateForm';
 export * from './AutoFields';
 export * from './UserInputForm';
 export * from './UserInputFormWizard';
 export * from './formFields';
+export * from './CreateForm';

package/src/components/WfoPageTemplate/WfoSidebar/WfoSidebar.tsx

@@ -6,6 +6,10 @@ import { useRouter } from 'next/router';
 import { EuiSideNav, EuiSpacer } from '@elastic/eui';
 import { EuiSideNavItemType } from '@elastic/eui/src/components/side_nav/side_nav_types';
 
+import { WfoIsAllowedToRender } from '@/components';
+import { PolicyResource } from '@/configuration/policy-resources';
+import { usePolicy } from '@/hooks';
+
 import {
     PATH_METADATA,
     PATH_METADATA_PRODUCTS,
@@ -21,6 +25,17 @@ import {
 import { WfoCopyright } from './WfoCopyright';
 import { WfoStartCreateWorkflowButtonComboBox } from './WfoStartCreateWorkflowButtonComboBox';
 
+export const renderEmptyElementWhenNotAllowedByPolicy = (isAllowed: boolean) =>
+    isAllowed ? undefined : () => <></>;
+
+export const urlPolicyMap = new Map<string, PolicyResource>([
+    [PATH_WORKFLOWS, PolicyResource.NAVIGATION_WORKFLOWS],
+    [PATH_SUBSCRIPTIONS, PolicyResource.NAVIGATION_SUBSCRIPTIONS],
+    [PATH_METADATA, PolicyResource.NAVIGATION_METADATA],
+    [PATH_TASKS, PolicyResource.NAVIGATION_TASKS],
+    [PATH_SETTINGS, PolicyResource.NAVIGATION_SETTINGS],
+]);
+
 export type WfoSidebarProps = {
     overrideMenuItems?: (
         defaultMenuItems: EuiSideNavItemType<object>[],
@@ -31,6 +46,7 @@ export const WfoSidebar: FC<WfoSidebarProps> = ({ overrideMenuItems }) => {
     const t = useTranslations('main');
     const router = useRouter();
     const [isSideNavOpenOnMobile, setIsSideNavOpenOnMobile] = useState(false);
+    const { isAllowed } = usePolicy();
 
     const toggleMobile = () => {
         setIsSideNavOpenOnMobile((openState) => !openState);
@@ -69,6 +85,7 @@ export const WfoSidebar: FC<WfoSidebarProps> = ({ overrideMenuItems }) => {
         {
             name: t('metadata'),
             id: '5',
+            href: PATH_METADATA,
             onClick: () => {
                 router.push(PATH_METADATA);
             },
@@ -135,11 +152,27 @@ export const WfoSidebar: FC<WfoSidebarProps> = ({ overrideMenuItems }) => {
         },
     ];
 
+    const defaultMenuItemsFilteredByPolicy = defaultMenuItems.filter(
+        ({ href }) => {
+            if (!href) {
+                return true;
+            }
+
+            const policyResource = urlPolicyMap.get(href);
+
+            return policyResource ? isAllowed(policyResource) : true;
+        },
+    );
+
     const defaultMenu: EuiSideNavItemType<object>[] = [
         {
             renderItem: () => (
                 <>
-                    <WfoStartCreateWorkflowButtonComboBox />
+                    <WfoIsAllowedToRender
+                        resource={PolicyResource.SUBSCRIPTION_CREATE}
+                    >
+                        <WfoStartCreateWorkflowButtonComboBox />
+                    </WfoIsAllowedToRender>
                     <EuiSpacer size="m" />
                     <WfoCopyright />
                 </>
@@ -147,8 +180,8 @@ export const WfoSidebar: FC<WfoSidebarProps> = ({ overrideMenuItems }) => {
             name: 'Menu',
             id: '1',
             items: overrideMenuItems
-                ? overrideMenuItems(defaultMenuItems)
-                : defaultMenuItems,
+                ? overrideMenuItems(defaultMenuItemsFilteredByPolicy)
+                : defaultMenuItemsFilteredByPolicy,
         },
     ];
 

package/src/components/WfoSubscription/WfoSubscriptionActions.tsx

@@ -16,10 +16,12 @@ import {
 import { ReactJSXElement } from '@emotion/react/types/jsx-namespace';
 
 import { PATH_START_NEW_TASK, PATH_START_NEW_WORKFLOW } from '@/components';
+import { PolicyResource } from '@/configuration/policy-resources';
 import {
     SubscriptionAction,
     useCheckEngineStatus,
     useOrchestratorTheme,
+    usePolicy,
     useSubscriptionActions,
 } from '@/hooks';
 import { WfoXCircleFill } from '@/icons';
@@ -60,6 +62,7 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
     const { data: subscriptionActions } =
         useSubscriptionActions(subscriptionId);
     const { isEngineRunningNow } = useCheckEngineStatus();
+    const { isAllowed } = usePolicy();
 
     const onButtonClick = () => {
         setPopover(!isPopoverOpen);
@@ -193,50 +196,68 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
         >
             <EuiContextMenuPanel>
                 <EuiPanel color="transparent" paddingSize="s">
-                    {subscriptionActions && subscriptionActions.modify && (
-                        <>
-                            <MenuBlock title={t('modify')}></MenuBlock>
-                            {subscriptionActions.modify.map((action, index) => (
-                                <MenuItem
-                                    key={`m_${index}`}
-                                    action={action}
-                                    index={index}
-                                    target={WorkflowTarget.MODIFY}
-                                />
-                            ))}
-                        </>
-                    )}
-
-                    {subscriptionActions && subscriptionActions.system && (
-                        <>
-                            <MenuBlock title={t('tasks')}></MenuBlock>
-                            {subscriptionActions.system.map((action, index) => (
-                                <MenuItem
-                                    key={`s_${index}`}
-                                    action={action}
-                                    index={index}
-                                    target={WorkflowTarget.SYSTEM}
-                                    isTask={true}
-                                />
-                            ))}
-                        </>
-                    )}
-
-                    {subscriptionActions && subscriptionActions.terminate && (
-                        <>
-                            <MenuBlock title={t('terminate')}></MenuBlock>
-                            {subscriptionActions.terminate.map(
-                                (action, index) => (
-                                    <MenuItem
-                                        key={`t_${index}`}
-                                        action={action}
-                                        index={index}
-                                        target={WorkflowTarget.TERMINATE}
-                                    />
-                                ),
-                            )}
-                        </>
-                    )}
+                    {subscriptionActions &&
+                        isAllowed(
+                            PolicyResource.SUBSCRIPTION_MODIFY + subscriptionId,
+                        ) &&
+                        subscriptionActions.modify && (
+                            <>
+                                <MenuBlock title={t('modify')}></MenuBlock>
+                                {subscriptionActions.modify.map(
+                                    (action, index) => (
+                                        <MenuItem
+                                            key={`m_${index}`}
+                                            action={action}
+                                            index={index}
+                                            target={WorkflowTarget.MODIFY}
+                                        />
+                                    ),
+                                )}
+                            </>
+                        )}
+
+                    {subscriptionActions &&
+                        isAllowed(
+                            PolicyResource.SUBSCRIPTION_VALIDATE +
+                                subscriptionId,
+                        ) &&
+                        subscriptionActions.system && (
+                            <>
+                                <MenuBlock title={t('tasks')}></MenuBlock>
+                                {subscriptionActions.system.map(
+                                    (action, index) => (
+                                        <MenuItem
+                                            key={`s_${index}`}
+                                            action={action}
+                                            index={index}
+                                            target={WorkflowTarget.SYSTEM}
+                                            isTask={true}
+                                        />
+                                    ),
+                                )}
+                            </>
+                        )}
+
+                    {subscriptionActions &&
+                        isAllowed(
+                            PolicyResource.SUBSCRIPTION_TERMINATE +
+                                subscriptionId,
+                        ) &&
+                        subscriptionActions.terminate && (
+                            <>
+                                <MenuBlock title={t('terminate')}></MenuBlock>
+                                {subscriptionActions.terminate.map(
+                                    (action, index) => (
+                                        <MenuItem
+                                            key={`t_${index}`}
+                                            action={action}
+                                            index={index}
+                                            target={WorkflowTarget.TERMINATE}
+                                        />
+                                    ),
+                                )}
+                            </>
+                        )}
                 </EuiPanel>
             </EuiContextMenuPanel>
         </EuiPopover>

package/src/configuration/index.ts

@@ -0,0 +1,2 @@
+export * from './constants';
+export * from './policy-resources';

package/src/configuration/policy-resources.ts

@@ -0,0 +1,19 @@
+export enum PolicyResource {
+    NAVIGATION_METADATA = '/orchestrator/metadata',
+    NAVIGATION_SETTINGS = '/orchestrator/settings',
+    NAVIGATION_SUBSCRIPTIONS = '/orchestrator/subscriptions',
+    NAVIGATION_TASKS = '/orchestrator/tasks',
+    NAVIGATION_WORKFLOWS = '/orchestrator/workflows',
+    PROCESS_ABORT = '/orchestrator/processes/abort/',
+    PROCESS_DELETE = '/orchestrator/processes/delete/',
+    PROCESS_DETAILS = '/orchestrator/processes/details/',
+    PROCESS_RELATED_SUBSCRIPTIONS = '/orchestrator/subscriptions/view/from-process',
+    PROCESS_RETRY = '/orchestrator/processes/retry/',
+    PROCESS_USER_INPUT = '/orchestrator/processes/user-input/',
+    SUBSCRIPTION_CREATE = '/orchestrator/processes/create/process/menu',
+    SUBSCRIPTION_MODIFY = '/orchestrator/subscriptions/modify/',
+    SUBSCRIPTION_TERMINATE = '/orchestrator/subscriptions/terminate/',
+    SUBSCRIPTION_VALIDATE = '/orchestrator/subscriptions/validate/',
+    TASKS_CREATE = '/orchestrator/processes/create/task',
+    TASKS_RETRY_ALL = '/orchestrator/processes/all-tasks/retry',
+}

package/src/hooks/useQueryWithFetch.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { UseQueryOptions, useQuery } from 'react-query';
 
 import { Variables } from 'graphql-request/build/cjs/types';
 import { signOut } from 'next-auth/react';
@@ -9,6 +9,7 @@ export const useQueryWithFetch = <T, V extends Variables>(
     url: string,
     queryVars: V,
     queryKey: string,
+    options?: UseQueryOptions<T, unknown, T, [string, ...unknown[]]>,
 ) => {
     const { session } = useWfoSession();
     const requestHeaders = {
@@ -29,5 +30,9 @@ export const useQueryWithFetch = <T, V extends Variables>(
         }
         return (await response.json()) as T;
     };
-    return useQuery([queryKey, ...Object.values(queryVars)], fetchData);
+    return useQuery(
+        [queryKey, ...Object.values(queryVars)],
+        fetchData,
+        options,
+    );
 };

package/src/index.ts

@@ -1,12 +1,13 @@
 export * from './api';
 export * from './components';
-export * from './icons';
-export * from './theme';
-export * from './utils';
+export * from './configuration';
 export * from './contexts';
-export * from './types';
+export * from './graphqlQueries';
 export * from './hooks';
+export * from './icons';
 export * from './messages';
 export * from './pages';
-export * from './graphqlQueries';
 export * from './rtk';
+export * from './theme';
+export * from './types';
+export * from './utils';

package/src/messages/en-GB.json

@@ -31,6 +31,7 @@
         "search": "Search",
         "errorMessage": "An error occurred",
         "export": "Export",
+        "unauthorizedPage": "You are not authorized to see this page",
         "insyncTrue": "in-sync",
         "insyncFalse": "out-of-sync"
     },
@@ -345,6 +346,11 @@
             "headerTitle": "Total active subscriptions",
             "listTitle": "Most recent subscriptions"
         },
+        "outOfSyncSubscriptions": {
+            "buttonText": "Show all active out-of-sync subscriptions",
+            "headerTitle": "Total active out-of-sync subscriptions",
+            "listTitle": "Most recent active out-of-sync subscriptions"
+        },
         "activeWorkflows": {
             "buttonText": "Show all active workflows",
             "headerTitle": "Total active workflows",

package/src/messages/nl-NL.json

@@ -31,6 +31,7 @@
         "search": "Zoeken",
         "errorMessage": "Er is een fout opgetreden",
         "export": "Exporteren",
+        "unauthorizedPage": "Niet geautoriseerd om deze pagina te bekijken",
         "insyncTrue": "in-sync",
         "insyncFalse": "out-of-sync"
     },
@@ -344,6 +345,11 @@
             "headerTitle": "Totaal aantal actieve subscriptions",
             "listTitle": "Meest recente subscriptions"
         },
+        "outOfSyncSubscriptions": {
+            "buttonText": "Toon alle actieve out-of-sync subscriptions",
+            "headerTitle": "Totaal aantal actieve out-of-sync subscriptions",
+            "listTitle": "Meest recente actieve out-of-sync subscriptions"
+        },
         "activeWorkflows": {
             "buttonText": "Toon alle actieve workflows",
             "headerTitle": "Totaal aantal actieve workflows",