149 - Moves and renames Subscriptions page to the lib (#243)

* 91 - Moves and renames Subscriptions page to the lib with the new name WFOSubscriptionsList page

* 91 - Renames Subscriptions component into WFOSubscriptionsList

Author: ricardovdheijden

apps/wfo-ui/constants.ts

@@ -12,6 +12,3 @@ export const ENGINE_STATUS_ENDPOINT = `${ORCHESTRATOR_API_BASE_URL}/settings/sta
 export const PROCESS_STATUS_COUNTS_ENDPOINT = `${ORCHESTRATOR_API_BASE_URL}/processes/status-counts`;
 export const SUBSCRIPTION_ACTIONS_ENDPOINT = `${ORCHESTRATOR_API_BASE_URL}/subscriptions/workflows`;
 export const SUBSCRIPTION_PROCESSES_ENDPOINT = `${ORCHESTRATOR_API_BASE_URL}/processes/process-subscriptions-by-subscription-id`;
-
-export const SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY = 'subscriptionsTable';
-export const METADATA_PRODUCT_TABLE_LOCAL_STORAGE_KEY = 'metadataProductTable';

apps/wfo-ui/pages/subscriptions/index.tsx

@@ -1,84 +1,6 @@
 import React from 'react';
-import { useRouter } from 'next/router';
-import { StringParam, useQueryParam, withDefault } from 'use-query-params';
-import {
-    DEFAULT_PAGE_SIZE,
-    getSortDirectionFromString,
-    getSubscriptionsTabTypeFromString,
-    getTableConfigFromLocalStorage,
-    SortOrder,
-    WFOFilterTabs,
-    useDataDisplayParams,
-    defaultSubscriptionsTabs,
-    SubscriptionListItem,
-    WFOSubscriptionsTabType,
-} from '@orchestrator-ui/orchestrator-ui-components';
-import { EuiPageHeader, EuiSpacer } from '@elastic/eui';
-import { Subscriptions } from '../../components/Subscriptions/Subscriptions';
-import NoSSR from 'react-no-ssr';
-import { SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY } from '../../constants';
+import { WFOSubscriptionsListPage } from '@orchestrator-ui/orchestrator-ui-components';
 
 export default function SubscriptionsPage() {
-    const router = useRouter();
-
-    const initialPageSize =
-        getTableConfigFromLocalStorage(SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY)
-            ?.selectedPageSize ?? DEFAULT_PAGE_SIZE;
-    const { dataDisplayParams, setDataDisplayParam } =
-        useDataDisplayParams<SubscriptionListItem>({
-            pageSize: initialPageSize,
-            sortBy: {
-                field: 'startDate',
-                order: SortOrder.DESC,
-            },
-        });
-
-    const [activeTab, setActiveTab] = useQueryParam(
-        'activeTab',
-        withDefault(StringParam, WFOSubscriptionsTabType.ACTIVE),
-    );
-
-    const sortOrder = getSortDirectionFromString(
-        dataDisplayParams.sortBy?.order,
-    );
-    const selectedSubscriptionsTab =
-        getSubscriptionsTabTypeFromString(activeTab);
-    if (!sortOrder || !selectedSubscriptionsTab) {
-        router.replace('/subscriptions');
-        return null;
-    }
-
-    const handleChangeSubscriptionsTab = (
-        updatedSubscriptionsTab: WFOSubscriptionsTabType,
-    ) => {
-        setActiveTab(updatedSubscriptionsTab);
-        setDataDisplayParam('pageIndex', 0);
-    };
-
-    const alwaysOnFilters = defaultSubscriptionsTabs.find(
-        ({ id }) => id === selectedSubscriptionsTab,
-    )?.alwaysOnFilters;
-
-    return (
-        <NoSSR>
-            <EuiSpacer />
-
-            <EuiPageHeader pageTitle="Subscriptions" />
-            <EuiSpacer size="m" />
-
-            <WFOFilterTabs
-                tabs={defaultSubscriptionsTabs}
-                selectedTab={selectedSubscriptionsTab}
-                translationNamespace="subscriptions.tabs"
-                onChangeTab={handleChangeSubscriptionsTab}
-            />
-            <EuiSpacer size="xxl" />
-
-            <Subscriptions
-                dataDisplayParams={dataDisplayParams}
-                setDataDisplayParam={setDataDisplayParam}
-                alwaysOnFilters={alwaysOnFilters}
-            />
-        </NoSSR>
-    );
+    return <WFOSubscriptionsListPage />;
 }

apps/wfo-ui/components/Subscriptions/Subscriptions.tsx renamed to packages/orchestrator-ui-components/src/components/WFOSubscriptionsList/WFOSubscriptionsList.tsx

@@ -1,46 +1,47 @@
 import React from 'react';
+import { FC } from 'react';
+import { useRouter } from 'next/router';
+import Link from 'next/link';
+import { EuiFlexItem, Pagination } from '@elastic/eui';
+import { useTranslations } from 'next-intl';
 import {
-    WFOCheckmarkCircleFill,
-    DataDisplayParams,
-    WFODataSorting,
     DEFAULT_PAGE_SIZES,
-    FilterQuery,
     getDataSortHandler,
     getEsQueryStringHandler,
-    getFirstUuidPart,
     getPageChangeHandler,
-    getTypedFieldFromObject,
-    WFOLoading,
-    WFOMinusCircleOutline,
-    parseDate,
-    parseDateToLocaleString,
-    WFOPlusCircleFill,
-    SortOrder,
-    SubscriptionListItem,
+    SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY,
     TableColumnKeys,
+    WFODataSorting,
     WFOTableColumns,
     WFOTableControlColumnConfig,
     WFOTableWithFilter,
-    useOrchestratorTheme,
-    useQueryWithGraphql,
-    WFOSubscriptionStatusBadge,
-    SubscriptionsResult,
-} from '@orchestrator-ui/orchestrator-ui-components';
-import { FC } from 'react';
-import { useRouter } from 'next/router';
-import Link from 'next/link';
-import { EuiFlexItem, Pagination } from '@elastic/eui';
-import { useTranslations } from 'next-intl';
-import { SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY } from '../../constants';
-import { getSubscriptionsListGraphQlQuery } from '@orchestrator-ui/orchestrator-ui-components/src';
+} from '../WFOTable';
+import { SubscriptionListItem } from './types';
+import { FilterQuery } from '../WFOFilterTabs';
+import { DataDisplayParams } from '../../hooks/useDataDisplayParams';
+import { useOrchestratorTheme } from '../../hooks/useOrchestratorTheme';
+import { getFirstUuidPart } from '../../utils/uuid';
+import { WFOSubscriptionStatusBadge } from '../WFOBadges/WFOSubscriptionStatusBadge';
+import {
+    WFOCheckmarkCircleFill,
+    WFOMinusCircleOutline,
+    WFOPlusCircleFill,
+} from '../../icons';
+import { parseDateToLocaleString } from '../../utils/date';
+import { useQueryWithGraphql } from '../../hooks/useQueryWithGraphql';
+import { getSubscriptionsListGraphQlQuery } from '../../graphqlQueries/subscriptionsListQuery';
+import { getTypedFieldFromObject } from '../../utils/getTypedFieldFromObject';
+import { WFOLoading } from '../WFOLoading';
+import { SortOrder } from '../../types';
+import { mapGrapghQlSubscriptionsResultToSubscriptionListItems } from './mapGrapghQlSubscriptionsResultToSubscriptionListItems';
 
 const FIELD_NAME_INLINE_SUBSCRIPTION_DETAILS = 'inlineSubscriptionDetails';
 
 const defaultHiddenColumns: TableColumnKeys<SubscriptionListItem> = [
     'productName',
 ];
 
-export type SubscriptionsProps = {
+export type WFOSubscriptionsListProps = {
     alwaysOnFilters?: FilterQuery<SubscriptionListItem>[];
     dataDisplayParams: DataDisplayParams<SubscriptionListItem>;
     setDataDisplayParam: <
@@ -51,7 +52,7 @@ export type SubscriptionsProps = {
     ) => void;
 };
 
-export const Subscriptions: FC<SubscriptionsProps> = ({
+export const WFOSubscriptionsList: FC<WFOSubscriptionsListProps> = ({
     alwaysOnFilters,
     dataDisplayParams,
     setDataDisplayParam,
@@ -196,34 +197,3 @@ export const Subscriptions: FC<SubscriptionsProps> = ({
         />
     );
 };
-
-function mapGrapghQlSubscriptionsResultToSubscriptionListItems(
-    graphqlResponse: SubscriptionsResult,
-): SubscriptionListItem[] {
-    return graphqlResponse.subscriptions.page.map((subscription) => {
-        const {
-            description,
-            insync,
-            product,
-            startDate,
-            endDate,
-            status,
-            subscriptionId,
-            note,
-        } = subscription;
-
-        const { name: productName, tag } = product;
-
-        return {
-            description,
-            insync,
-            productName,
-            tag,
-            startDate: parseDate(startDate),
-            endDate: parseDate(endDate),
-            status,
-            subscriptionId,
-            note: note ?? null,
-        };
-    });
-}

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

@@ -0,0 +1,4 @@
+export * from './mapGrapghQlSubscriptionsResultToSubscriptionListItems';
+export * from './subscriptionListTabs';
+export * from './WFOSubscriptionsList';
+export * from './types';

packages/orchestrator-ui-components/src/components/WFOSubscriptionsList/mapGrapghQlSubscriptionsResultToSubscriptionListItems.ts

@@ -0,0 +1,34 @@
+import { SubscriptionsResult } from '../../types';
+import { SubscriptionListItem } from './types';
+import { parseDate } from '../../utils';
+
+export function mapGrapghQlSubscriptionsResultToSubscriptionListItems(
+    graphqlResponse: SubscriptionsResult,
+): SubscriptionListItem[] {
+    return graphqlResponse.subscriptions.page.map((subscription) => {
+        const {
+            description,
+            insync,
+            product,
+            startDate,
+            endDate,
+            status,
+            subscriptionId,
+            note,
+        } = subscription;
+
+        const { name: productName, tag } = product;
+
+        return {
+            description,
+            insync,
+            productName,
+            tag,
+            startDate: parseDate(startDate),
+            endDate: parseDate(endDate),
+            status,
+            subscriptionId,
+            note: note ?? null,
+        };
+    });
+}

packages/orchestrator-ui-components/src/pages/subscriptions/subscriptionListTabs.ts renamed to packages/orchestrator-ui-components/src/components/WFOSubscriptionsList/subscriptionListTabs.ts

@@ -1,5 +1,3 @@
-// Todo: preparation for moving the Subscriptions component (table) to the lib
-// https://github.com/workfloworchestrator/orchestrator-ui/issues/149
 export type SubscriptionListItem = {
     subscriptionId: string;
     description: string;

packages/orchestrator-ui-components/src/pages/subscriptions/types.ts renamed to packages/orchestrator-ui-components/src/components/WFOSubscriptionsList/types.ts

@@ -13,3 +13,5 @@ export const METADATA_PRODUCTBLOCKS_TABLE_LOCAL_STORAGE_KEY =
 export const METADATA_PRODUCT_TABLE_LOCAL_STORAGE_KEY = 'metadataProductTable';
 export const METADATA_WORKFLOWS_TABLE_LOCAL_STORAGE_KEY =
     'metadataWorkflowsTable';
+
+export const SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY = 'subscriptionsTable';

packages/orchestrator-ui-components/src/components/WFOTable/utils/constants.ts

@@ -0,0 +1,85 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import { StringParam, useQueryParam, withDefault } from 'use-query-params';
+import { EuiPageHeader, EuiSpacer } from '@elastic/eui';
+import { useDataDisplayParams } from '../../hooks';
+import {
+    defaultSubscriptionsTabs,
+    getSubscriptionsTabTypeFromString,
+    SubscriptionListItem,
+    WFOSubscriptionsList,
+    WFOSubscriptionsTabType,
+} from '../../components/WFOSubscriptionsList';
+import { SortOrder } from '../../types';
+import {
+    DEFAULT_PAGE_SIZE,
+    getSortDirectionFromString,
+    getTableConfigFromLocalStorage,
+    SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY,
+} from '../../components/WFOTable';
+import { WFOFilterTabs } from '../../components';
+
+export const WFOSubscriptionsListPage = () => {
+    const router = useRouter();
+
+    const initialPageSize =
+        getTableConfigFromLocalStorage(SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY)
+            ?.selectedPageSize ?? DEFAULT_PAGE_SIZE;
+    const { dataDisplayParams, setDataDisplayParam } =
+        useDataDisplayParams<SubscriptionListItem>({
+            pageSize: initialPageSize,
+            sortBy: {
+                field: 'startDate',
+                order: SortOrder.DESC,
+            },
+        });
+
+    const [activeTab, setActiveTab] = useQueryParam(
+        'activeTab',
+        withDefault(StringParam, WFOSubscriptionsTabType.ACTIVE),
+    );
+
+    const sortOrder = getSortDirectionFromString(
+        dataDisplayParams.sortBy?.order,
+    );
+    const selectedSubscriptionsTab =
+        getSubscriptionsTabTypeFromString(activeTab);
+    if (!sortOrder || !selectedSubscriptionsTab) {
+        router.replace('/subscriptions');
+        return null;
+    }
+
+    const handleChangeSubscriptionsTab = (
+        updatedSubscriptionsTab: WFOSubscriptionsTabType,
+    ) => {
+        setActiveTab(updatedSubscriptionsTab);
+        setDataDisplayParam('pageIndex', 0);
+    };
+
+    const alwaysOnFilters = defaultSubscriptionsTabs.find(
+        ({ id }) => id === selectedSubscriptionsTab,
+    )?.alwaysOnFilters;
+
+    return (
+        <>
+            <EuiSpacer />
+
+            <EuiPageHeader pageTitle="Subscriptions" />
+            <EuiSpacer size="m" />
+
+            <WFOFilterTabs
+                tabs={defaultSubscriptionsTabs}
+                selectedTab={selectedSubscriptionsTab}
+                translationNamespace="subscriptions.tabs"
+                onChangeTab={handleChangeSubscriptionsTab}
+            />
+            <EuiSpacer size="xxl" />
+
+            <WFOSubscriptionsList
+                dataDisplayParams={dataDisplayParams}
+                setDataDisplayParam={setDataDisplayParam}
+                alwaysOnFilters={alwaysOnFilters}
+            />
+        </>
+    );
+};

packages/orchestrator-ui-components/src/pages/subscriptions/WFOSubscriptionsListPage.tsx

@@ -1,2 +1 @@
-export * from './subscriptionListTabs';
-export * from './types';
+export * from './WFOSubscriptionsListPage';