Replace hardcoded query params with constants (#1896)

Author: Georgi2704

.changeset/breezy-turkeys-doubt.md

@@ -0,0 +1,5 @@
+---
+'@orchestrator-ui/orchestrator-ui-components': minor
+---
+
+Replace hardcoded query params with constants and enums

packages/orchestrator-ui-components/src/components/WfoSummary/WfoLatestOutOfSyncSubscriptionSummaryCard.tsx

@@ -5,12 +5,14 @@ import { useTranslations } from 'next-intl';
 import {
     PATH_SUBSCRIPTIONS,
     SummaryCardStatus,
+    WfoSubscriptionListTab,
     WfoSummaryCard,
 } from '@/components';
 import { mapSubscriptionSummaryToSummaryCardListItem } from '@/pages/startPage/mappers';
 import { outOfSyncSubscriptionsListSummaryQueryVariables } from '@/pages/startPage/queryVariables';
 import { useGetSubscriptionSummaryListQuery } from '@/rtk';
 import { optionalArrayMapper } from '@/utils';
+import { WfoQueryParams, getUrlWithQueryParams } from '@/utils/getQueryParams';
 
 export const WfoLatestOutOfSyncSubscriptionSummaryCard = () => {
     const t = useTranslations('startPage.outOfSyncSubscriptions');
@@ -23,6 +25,13 @@ export const WfoLatestOutOfSyncSubscriptionSummaryCard = () => {
         outOfSyncSubscriptionsListSummaryQueryVariables,
     );
 
+    const queryParams = {
+        [WfoQueryParams.ACTIVE_TAB]: WfoSubscriptionListTab.ALL,
+        [WfoQueryParams.SORT_BY]: 'field-startDate_order-ASC',
+        [WfoQueryParams.QUERY_STRING]:
+            'status:(provisioning|active) insync:false',
+    };
+
     return (
         <WfoSummaryCard
             headerTitle={t('headerTitle')}
@@ -37,7 +46,7 @@ export const WfoLatestOutOfSyncSubscriptionSummaryCard = () => {
             )}
             button={{
                 name: t('buttonText'),
-                url: `${PATH_SUBSCRIPTIONS}?activeTab=ALL&sortBy=field-startDate_order-ASC&queryString=status%3A%28provisioning%7Cactive%29+insync%3Afalse`,
+                url: getUrlWithQueryParams(PATH_SUBSCRIPTIONS, queryParams),
             }}
             isLoading={isLoading}
             isFetching={isFetching}

packages/orchestrator-ui-components/src/components/WfoSummary/WfoMyWorkflowsSummaryCard.tsx

@@ -7,10 +7,15 @@ import {
     SummaryCardStatus,
     WfoSummaryCard,
 } from '@/components/WfoSummary/WfoSummaryCard';
+import { WfoWorkflowsListTabType } from '@/pages';
 import { mapProcessSummaryToSummaryCardListItem } from '@/pages/startPage/mappers';
 import { getMyWorkflowListSummaryQueryVariables } from '@/pages/startPage/queryVariables';
 import { useGetProcessListSummaryQuery } from '@/rtk';
-import { optionalArrayMapper } from '@/utils';
+import {
+    WfoQueryParams,
+    getUrlWithQueryParams,
+    optionalArrayMapper,
+} from '@/utils';
 
 export type WfoMyWorkflowsSummaryCardProps = {
     username: string;
@@ -29,6 +34,12 @@ export const WfoMyWorkflowsSummaryCard: FC<WfoMyWorkflowsSummaryCardProps> = ({
         getMyWorkflowListSummaryQueryVariables(username),
     );
 
+    const queryParams = {
+        [WfoQueryParams.ACTIVE_TAB]: WfoWorkflowsListTabType.COMPLETED,
+        [WfoQueryParams.SORT_BY]: 'field-lastModifiedAt_order-DESC',
+        [WfoQueryParams.QUERY_STRING]: `createdBy:${username}`,
+    };
+
     return (
         <WfoSummaryCard
             headerTitle={t('headerTitle')}
@@ -41,7 +52,7 @@ export const WfoMyWorkflowsSummaryCard: FC<WfoMyWorkflowsSummaryCardProps> = ({
             )}
             button={{
                 name: t('buttonText'),
-                url: `${PATH_WORKFLOWS}?activeTab=COMPLETED&sortBy=field-lastModifiedAt_order-DESC&queryString=createdBy%3A${username}`,
+                url: getUrlWithQueryParams(PATH_WORKFLOWS, queryParams),
             }}
             isLoading={isLoading}
             isFetching={isFetching}

packages/orchestrator-ui-components/src/utils/getQueryParams.spec.ts

@@ -0,0 +1,43 @@
+import { WfoQueryParams, getUrlWithQueryParams } from './getQueryParams';
+
+describe('getUrlWithQueryParams', () => {
+    it('should build URL with one query param', () => {
+        const url = '/api/list';
+        const params = { [WfoQueryParams.ACTIVE_TAB]: 'ALL' };
+        expect(getUrlWithQueryParams(url, params)).toBe(
+            '/api/list?activeTab=ALL',
+        );
+    });
+
+    it('should build URL with multiple params', () => {
+        const url = '/api/list';
+        const params = {
+            [WfoQueryParams.ACTIVE_TAB]: 'ALL',
+            [WfoQueryParams.PAGE]: '2',
+            [WfoQueryParams.SORT_BY]: 'field-startDate_order-ASC',
+        };
+        const result = getUrlWithQueryParams(url, params);
+
+        expect(result).toContain('/api/list?');
+        expect(result).toContain('activeTab=ALL');
+        expect(result).toContain('page=2');
+        expect(result).toContain('sortBy=field-startDate_order-ASC');
+    });
+
+    it('should encode params properly', () => {
+        const url = '/items';
+        const params = {
+            [WfoQueryParams.QUERY_STRING]:
+                'status:(provisioning|active) insync:false',
+        };
+
+        expect(getUrlWithQueryParams(url, params)).toBe(
+            '/items?queryString=status%3A%28provisioning%7Cactive%29+insync%3Afalse',
+        );
+    });
+
+    it('should handle empty params object', () => {
+        const url = '/no-params';
+        expect(getUrlWithQueryParams(url, {})).toBe('/no-params?');
+    });
+});

packages/orchestrator-ui-components/src/utils/getQueryParams.ts

@@ -0,0 +1,16 @@
+export enum WfoQueryParams {
+    ACTIVE_TAB = 'activeTab',
+    PAGE = 'page',
+    PAGE_SIZE = 'pageSize',
+    SORT_BY = 'sortBy',
+    FILTER_BY = 'filterBy',
+    QUERY_STRING = 'queryString',
+}
+
+export const getUrlWithQueryParams = (
+    url: string,
+    params: Partial<Record<WfoQueryParams, string>>,
+) => {
+    const queryString = new URLSearchParams(params).toString() ?? '';
+    return `${url}?${queryString}`;
+};

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

@@ -18,3 +18,4 @@ export * from './toObjectWithSerializedValues';
 export * from './toObjectWithSortedKeys';
 export * from './uuid';
 export * from './cacheTag';
+export * from './getQueryParams';