702 Moves subscriptions dropdown options to RTK

.changeset/hip-games-nail.md

@@ -0,0 +1,5 @@
+---
+"@orchestrator-ui/orchestrator-ui-components": minor
+---
+
+702 Moves subscriptions dropdown options to RTK

packages/orchestrator-ui-components/src/configuration/constants.ts

@@ -1 +1,4 @@
 export const MAXIMUM_ITEMS_FOR_BULK_FETCHING = 1000;
+
+// Graphql typically returns items paginated, this number represents "all items"
+export const NUMBER_OF_ITEMS_REPRESENTING_ALL_ITEMS = 1000000;

packages/orchestrator-ui-components/src/hooks/surf/useGetSubscriptionDropdownOptions.ts

@@ -1,8 +1,7 @@
 import { isError } from 'react-query';
 
-import { getSubscriptionDropdownOptionsGraphQlQuery } from '../../graphqlQueries';
-import { GraphqlFilter, SubscriptionDropdownOption } from '../../types';
-import { useQueryWithGraphql } from '../useQueryWithGraphql';
+import { useGetSubscriptionsDropdownOptionsQuery } from '@/rtk';
+import { GraphqlFilter, SubscriptionDropdownOption } from '@/types';
 
 export const useGetSubscriptionDropdownOptions = (
     tags: string[] = [],
@@ -28,18 +27,12 @@ export const useGetSubscriptionDropdownOptions = (
         });
     }
 
-    const { data, isFetching, refetch } = useQueryWithGraphql(
-        getSubscriptionDropdownOptionsGraphQlQuery(),
-        {
-            filterBy: filters,
-        },
-        'subscriptionOptions',
-        { refetchOnWindowFocus: false },
-    );
+    const { data, isFetching, refetch } =
+        useGetSubscriptionsDropdownOptionsQuery({ filterBy: filters });
 
     const subscriptions = (() => {
-        if (!isFetching && !isError(data) && data && data.subscriptions.page) {
-            return data.subscriptions.page;
+        if (!isFetching && !isError(data) && data) {
+            return data.subscriptionDropdownOptions;
         }
         return [];
     })();

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

@@ -2,7 +2,6 @@ export * from './api';
 export * from './components';
 export * from './configuration';
 export * from './contexts';
-export * from './graphqlQueries';
 export * from './hooks';
 export * from './icons';
 export * from './messages';

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

@@ -10,3 +10,4 @@ export * from './relatedSubscriptions';
 export * from './settings';
 export * from './streamMessages';
 export * from './subscriptionDetail';
+export * from './subscriptionsDropdownOptions';

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

@@ -0,0 +1,72 @@
+import { NUMBER_OF_ITEMS_REPRESENTING_ALL_ITEMS } from '@/configuration';
+import { orchestratorApi } from '@/rtk';
+import {
+    GraphqlQueryVariables,
+    SubscriptionDropdownOption,
+    SubscriptionDropdownOptionsResult,
+} from '@/types';
+
+export const subscriptionsDropdownOptionsQuery = `
+    query SubscriptionDropdownOptions(
+        $filterBy: [GraphqlFilter!]
+        $first: Int!
+    ) {
+        subscriptions(filterBy: $filterBy, first: $first, after: 0) {
+            page {
+                description
+                subscriptionId
+                product {
+                    tag
+                    productId
+                }
+                customer {
+                    fullname
+                    customerId
+                }
+                productBlockInstances {
+                    id
+                    ownerSubscriptionId
+                    parent
+                    productBlockInstanceValues
+                    subscriptionInstanceId
+                    inUseByRelations
+                }
+                fixedInputs
+            }
+        }
+    }
+`;
+
+export type SubscriptionDropdownOptionsResponse = {
+    subscriptionDropdownOptions: SubscriptionDropdownOption[];
+};
+
+const subscriptionsDropdownOptionsApi = orchestratorApi.injectEndpoints({
+    endpoints: (builder) => ({
+        getSubscriptionsDropdownOptions: builder.query<
+            SubscriptionDropdownOptionsResponse,
+            GraphqlQueryVariables<SubscriptionDropdownOption>
+        >({
+            query: (variables) => ({
+                document: subscriptionsDropdownOptionsQuery,
+                variables: {
+                    ...variables,
+                    first: NUMBER_OF_ITEMS_REPRESENTING_ALL_ITEMS,
+                },
+            }),
+            transformResponse: (
+                response: SubscriptionDropdownOptionsResult,
+            ): SubscriptionDropdownOptionsResponse => {
+                const subscriptionDropdownOptions =
+                    response.subscriptions.page || [];
+
+                return {
+                    subscriptionDropdownOptions,
+                };
+            },
+        }),
+    }),
+});
+
+export const { useGetSubscriptionsDropdownOptionsQuery } =
+    subscriptionsDropdownOptionsApi;