Added WfoGraphqlErrorsMeta handler, added isLoading to WfoSubscriptionActions, using fragments in some graphql queries, changes required for #1320 (#1380)

Author: Georgi2704

.changeset/bright-dragons-pull.md

@@ -0,0 +1,5 @@
+---
+'@orchestrator-ui/orchestrator-ui-components': minor
+---
+
+Added WfoGraphqlErrorsMeta handler, added isLoading to WfoSubscriptionActions, using fragments in some graphql queries, changes required for #1320

packages/orchestrator-ui-components/src/components/WfoError/WfoError.tsx

@@ -9,7 +9,7 @@ import { WfoXCircleFill } from '@/icons';
 import { WfoGraphqlError } from '@/rtk';
 
 interface WfoErrorWithMessageProps {
-    error: WfoGraphqlError[];
+    error: WfoGraphqlError[] | undefined;
 }
 
 export const WfoError = () => {
@@ -27,7 +27,7 @@ export const WfoErrorWithMessage = ({ error }: WfoErrorWithMessageProps) => {
     const t = useTranslations('common');
     const { theme } = useOrchestratorTheme();
     const message =
-        error.length > 0
+        error && error.length > 0
             ? error.map((err) => err.message).join(', ')
             : t('unknownError');
     return (

packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionActions.tsx

@@ -44,19 +44,24 @@ const MenuBlock: FC<MenuBlockProps> = ({ title }) => (
 
 export type WfoSubscriptionActionsProps = {
     subscriptionId: string;
+    isLoading?: boolean;
 };
 
 export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
     subscriptionId,
+    isLoading,
 }) => {
     const { theme } = useOrchestratorTheme();
 
     const router = useRouter();
     const t = useTranslations('subscriptions.detail.actions');
     const [isPopoverOpen, setPopover] = useState(false);
-    const { data: subscriptionActions } = useGetSubscriptionActionsQuery({
-        subscriptionId,
-    });
+    const { data: subscriptionActions } = useGetSubscriptionActionsQuery(
+        {
+            subscriptionId,
+        },
+        { skip: isLoading },
+    );
     const { isEngineRunningNow } = useCheckEngineStatus();
     const { isAllowed } = usePolicy();
 
@@ -176,6 +181,7 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
             iconType="arrowDown"
             iconSide="right"
             onClick={onButtonClick}
+            isLoading={isLoading}
         >
             {t('actions')}
         </EuiButton>

packages/orchestrator-ui-components/src/rtk/api.ts

@@ -32,6 +32,15 @@ type ExtraOptions = {
     apiName?: string;
 };
 
+export type WfoGraphqlError = {
+    extensions: GraphQLErrorExtensions;
+    message: string;
+};
+
+export type WfoGraphqlErrorsMeta = {
+    errors: WfoGraphqlError[];
+};
+
 export const prepareHeaders = async (headers: Headers) => {
     const session = (await getSession()) as WfoSession;
     if (session?.accessToken) {
@@ -54,6 +63,12 @@ export const handlePromiseErrorWithCallback = <T>(
     });
 };
 
+export const handleGraphqlMetaErrors = (meta: WfoGraphqlErrorsMeta) => {
+    if (meta.errors && meta.errors.length > 0) {
+        throw meta.errors[0];
+    }
+};
+
 const isUnauthorized = (status: HttpStatus) =>
     status === HttpStatus.Unauthorized || status === HttpStatus.Forbidden;
 const isNotSuccessful = (status: HttpStatus) =>
@@ -75,11 +90,6 @@ export const catchErrorResponse = async (
     }
 };
 
-export type WfoGraphqlError = {
-    extensions: GraphQLErrorExtensions;
-    message: string;
-};
-
 export const orchestratorApi = createApi({
     reducerPath: 'orchestratorApi',
     baseQuery: (args, api, extraOptions: ExtraOptions) => {

packages/orchestrator-ui-components/src/rtk/endpoints/subscriptionDetail.ts

@@ -7,64 +7,70 @@ import {
 } from '@/types';
 import { getCacheTag } from '@/utils/cacheTag';
 
+export const subscriptionDetailFragment = `
+fragment SubscriptionDetail on SubscriptionInterface {
+    subscriptionId
+    description
+    fixedInputs
+    insync
+    note
+    product {
+        createdAt
+        name
+        status
+        endDate
+        description
+        tag
+        productType
+        productId
+    }
+    endDate
+    startDate
+    status
+    customerId
+    metadata
+    customer {
+        fullname
+        customerId
+        shortcode
+    }
+    customerDescriptions {
+        subscriptionId
+        description
+        customerId
+    }
+    productBlockInstances {
+        id
+        subscription {
+            subscriptionId
+            description
+        }
+        parent
+        productBlockInstanceValues
+        subscriptionInstanceId
+        inUseByRelations
+    }
+    processes(sortBy: { field: "startedAt", order: ASC }) {
+        page {
+            processId
+            lastStatus
+            startedAt
+            createdBy
+            workflowTarget
+            workflowName
+            isTask
+        }
+    }
+}
+`;
+
 export const subscriptionDetailQuery = `
     query SubscriptionDetail($subscriptionId: String!) {
         subscriptions(
             filterBy: { field: "subscriptionId", value: $subscriptionId }
         ) {
             page {
-                subscriptionId
-                description
-                fixedInputs
-                insync
-                note
-                product {
-                    createdAt
-                    name
-                    status
-                    endDate
-                    description
-                    tag
-                    productType
-                    productId
-                }
-                endDate
-                startDate
-                status
-                customerId
-                metadata
-                customer {
-                    fullname
-                    customerId
-                    shortcode
-                }
-                customerDescriptions {
-                    subscriptionId
-                    description
-                    customerId
-                }
-                productBlockInstances {
-                    id
-                    subscription {
-                        subscriptionId
-                        description
-                    }
-                    parent
-                    productBlockInstanceValues
-                    subscriptionInstanceId
-                    inUseByRelations
-                }
-                processes(sortBy: { field: "startedAt", order: ASC }) {
-                    page {
-                        processId
-                        lastStatus
-                        startedAt
-                        createdBy
-                        workflowTarget
-                        workflowName
-                        isTask
-                    }
-                }
+                ...SubscriptionDetail
             }
         }
     }
@@ -81,7 +87,7 @@ const subscriptionDetailApi = orchestratorApi.injectEndpoints({
             { subscriptionId: string }
         >({
             query: (variables) => ({
-                document: subscriptionDetailQuery,
+                document: subscriptionDetailQuery + subscriptionDetailFragment,
                 variables,
             }),
             transformResponse: (

packages/orchestrator-ui-components/src/rtk/index.ts

@@ -4,3 +4,4 @@ export * from './store';
 export * from './slices';
 export * from './storeProvider';
 export * from './wfoGraphqlRequestBaseQuery';
+export * from './utils';