@orchestrator-ui/orchestrator-ui-components 0.2.0 → 0.2.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @orchestrator-ui/orchestrator-ui-components
 
+## 0.2.1
+
+### Patch Changes
+
+- 3533525: Updated TS-Config to improve developer experience
+
 ## 0.2.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "0.2.0",
+    "version": "0.2.1",
     "license": "MIT",
     "scripts": {
         "test": "jest",
@@ -31,7 +31,7 @@
         "@testing-library/jest-dom": "^5.16.1",
         "@testing-library/react": "^14.0.0",
         "@testing-library/react-hooks": "^8.0.1",
-        "@testing-library/user-event": "^13.5.0",
+        "@testing-library/user-event": "^14.4.3",
         "@types/jest": "^27.4.0",
         "esbuild": "^0.14.10",
         "esbuild-jest": "^0.5.0",

package/src/components/OrchestratorPageTemplate/OrchestratorPageHeader/OrchestratorPageHeader.stories.tsx

@@ -3,6 +3,7 @@ import type { Meta } from '@storybook/react';
 import React, { ReactElement } from 'react';
 import { OrchestratorPageHeader } from './OrchestratorPageHeader';
 import Logo from '../../../../../.storybook/mockdata/logo-orchestrator.svg';
+import Image from 'next/image';
 
 const Story: Meta<typeof OrchestratorPageHeader> = {
     component: OrchestratorPageHeader,
@@ -14,7 +15,7 @@ function getAppLogo(navigationLogo: number): ReactElement {
     return (
         <EuiFlexGroup alignItems="center" css={{ height: navigationLogo }}>
             <EuiFlexItem>
-                <img
+                <Image
                     src={Logo}
                     alt="Orchestrator Logo"
                     width={134}

package/src/components/OrchestratorPageTemplate/OrchestratorPageTemplate/OrchestratorPageTemplate.stories.tsx

@@ -3,6 +3,7 @@ import { OrchestratorPageTemplate } from './OrchestratorPageTemplate';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import React, { ReactElement } from 'react';
 import Logo from '../../../../../.storybook/mockdata/logo-orchestrator.svg';
+import Image from 'next/image';
 
 const Story: Meta<typeof OrchestratorPageTemplate> = {
     component: OrchestratorPageTemplate,
@@ -14,7 +15,7 @@ function getAppLogo(navigationLogo: number): ReactElement {
     return (
         <EuiFlexGroup alignItems="center" css={{ height: navigationLogo }}>
             <EuiFlexItem>
-                <img
+                <Image
                     src={Logo}
                     alt="Orchestrator Logo"
                     width={134}

package/src/components/Subscription/ProductBlock.tsx

@@ -74,6 +74,7 @@ export const ProductBlock = (resourceTypes: ResourceTypeBase, id: number) => {
                         </EuiFlexItem>
                         <EuiFlexItem grow={false}>
                             <EuiButtonIcon
+                                aria-label="Close"
                                 size={'m'}
                                 iconType={'cross'}
                                 onClick={() => toggleSelectedId(id)}

package/src/components/Table/DataGridTable/DataGridTable.tsx

@@ -100,7 +100,7 @@ export const DataGridTable = <T,>({
     ) => EuiDataGridControlColumn = ({ id, width, rowCellRender }) => ({
         id,
         width,
-        headerCellRender: (props) => null,
+        headerCellRender: () => null,
         rowCellRender: ({ rowIndex }: { rowIndex: number }) => {
             const { pageSize, pageIndex } = pagination;
             const rowIndexOnPage = rowIndex - pageIndex * pageSize;

package/src/components/Table/utils/constants.ts

@@ -1,2 +1,5 @@
 export const DEFAULT_PAGE_SIZES = [5, 10, 15, 20, 25, 100];
 export const DEFAULT_PAGE_SIZE = 10;
+
+export const METADATA_PRODUCTBLOCKS_TABLE_LOCAL_STORAGE_KEY =
+    'metadataProductBlocksTable';

package/src/graphqlQueries/index.ts

@@ -0,0 +1 @@
+export * from './productBlocksQuery';

package/src/graphqlQueries/productBlocksQuery.ts

@@ -0,0 +1,46 @@
+import { gql } from 'graphql-request';
+import { parse } from 'graphql';
+import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
+
+import { SortOrder } from '../types';
+
+import type { ProductBlockDefinition } from '../types';
+import { GraphqlQueryVariables, ProductBlockDefinitionsResult } from '../types';
+
+export const DEFAULT_SORT_FIELD: keyof ProductBlockDefinition = 'name';
+export const DEFAULT_SORT_ORDER: SortOrder = SortOrder.DESC;
+
+export const GET_PRODUCTS_BLOCKS_GRAPHQL_QUERY: TypedDocumentNode<
+    ProductBlockDefinitionsResult,
+    GraphqlQueryVariables<ProductBlockDefinition>
+> = parse(gql`
+    query MetadataProductBlocks(
+        $first: IntType!
+        $after: IntType!
+        $sortBy: [GraphqlSort!]
+    ) {
+        productBlocks(first: $first, after: $after, sortBy: $sortBy) {
+            page {
+                productBlockId
+                name
+                tag
+                description
+                status
+                createdAt
+                endDate
+                resourceTypes {
+                    description
+                    resourceType
+                    resourceTypeId
+                }
+            }
+            pageInfo {
+                endCursor
+                hasNextPage
+                hasPreviousPage
+                startCursor
+                totalItems
+            }
+        }
+    }
+`);

package/src/hooks/useDataDisplayParams.ts

@@ -12,7 +12,7 @@ import { DEFAULT_PAGE_SIZE } from '../components';
 export type DataDisplayParams<Type> = {
     pageSize: number;
     pageIndex: number;
-    sortBy?: GraphQLSort<Type>;
+    sortBy: GraphQLSort<Type>;
     esQueryString?: string; // The filter param is going to send to the backend as is for parsing
 };
 

package/src/index.ts

@@ -6,3 +6,4 @@ export * from './contexts';
 export * from './types';
 export * from './hooks';
 export * from './messages';
+export * from './pages';

package/src/messages/en-US.json

@@ -5,7 +5,8 @@
     "common": {
         "addToFavorites": "Add to favorites",
         "product": "Product",
-        "deselect": "Deselect"
+        "deselect": "Deselect",
+        "close": "Close"
     },
     "metadata": {
         "tabs": {
@@ -20,9 +21,20 @@
             "description": "Description",
             "tag": "Tag",
             "productType": "Type",
-            "status": "status",
+            "status": "Status",
             "productBlocks": "Product blocks",
             "createdAt": "Created"
+        },
+        "productBlocks": {
+            "id": "ID",
+            "name": "Name",
+            "description": "Description",
+            "tag": "Tag",
+            "status": "status",
+            "resourceTypes": "Resource types",
+            "createdAt": "Created",
+            "endDate": "End date",
+            "parentIds": "Parents"
         }
     },
     "subscriptions": {

package/src/pages/index.ts

@@ -0,0 +1 @@
+export * from './metadata';

package/src/pages/metadata/WFOMetadataPageLayout.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import { EuiSpacer, EuiPageHeader, EuiTab, EuiTabs } from '@elastic/eui';
+import { useRouter } from 'next/router';
+import { useTranslations } from 'next-intl';
+
+interface MetadataLayoutProps {
+    children: ReactNode;
+    tabs?: MetaDataTab[];
+}
+
+export interface MetaDataTab {
+    id: number;
+    translationKey: string;
+    path: string;
+}
+
+const metaDataTabs: MetaDataTab[] = [
+    {
+        id: 1,
+        translationKey: 'products',
+        path: '/metadata/products',
+    },
+    {
+        id: 2,
+        translationKey: 'productBlocks',
+        path: '/metadata/productblocks',
+    },
+    {
+        id: 3,
+        translationKey: 'resourceTypes',
+        path: '/metadata/resource-types',
+    },
+    {
+        id: 4,
+        translationKey: 'fixedInputs',
+        path: '/metadata/fixed-inputs',
+    },
+    {
+        id: 5,
+        translationKey: 'workflows',
+        path: '/metadata/workflows',
+    },
+];
+
+export const WFOMetadataPageLayout = ({
+    children,
+    tabs = metaDataTabs,
+}: MetadataLayoutProps) => {
+    const router = useRouter();
+    const t = useTranslations('metadata.tabs');
+    const currentPath = router.pathname;
+
+    return (
+        <>
+            <EuiSpacer />
+
+            <EuiPageHeader pageTitle="Metadata" />
+            <EuiSpacer size="m" />
+            <EuiTabs>
+                {tabs.map(({ id, translationKey: name, path }) => (
+                    <EuiTab
+                        key={id}
+                        isSelected={path === currentPath}
+                        onClick={() => router.push(path)}
+                    >
+                        {t(name)}
+                    </EuiTab>
+                ))}
+            </EuiTabs>
+            <EuiSpacer size="xxl" />
+            {children}
+        </>
+    );
+};

package/src/pages/metadata/WFOProductBlocksPage.tsx

@@ -0,0 +1,167 @@
+import React from 'react';
+import { useTranslations } from 'next-intl';
+import type { Pagination } from '@elastic/eui/src/components';
+
+import {
+    DEFAULT_PAGE_SIZE,
+    DEFAULT_PAGE_SIZES,
+    METADATA_PRODUCTBLOCKS_TABLE_LOCAL_STORAGE_KEY,
+} from '../../components';
+import {
+    WFOStatusBadge,
+    WFOProductBlockBadge,
+    TableWithFilter,
+} from '../../components';
+import {
+    getTableConfigFromLocalStorage,
+    getDataSortHandler,
+    getPageChangeHandler,
+    getEsQueryStringHandler,
+} from '../../components';
+import type { TableColumns, DataSorting } from '../../components';
+
+import { parseDateToLocaleString } from '../../utils';
+import type { ProductBlockDefinition } from '../../types';
+import { SortOrder } from '../../types';
+
+import { useDataDisplayParams, useQueryWithGraphql } from '../../hooks';
+
+import { GET_PRODUCTS_BLOCKS_GRAPHQL_QUERY } from '../../graphqlQueries';
+
+import { WFOMetadataPageLayout } from './WFOMetadataPageLayout';
+
+export const PRODUCT_BLOCK_FIELD_ID: keyof ProductBlockDefinition =
+    'productBlockId';
+export const PRODUCT_BLOCK_FIELD_NAME: keyof ProductBlockDefinition = 'name';
+
+export const PRODUCT_BLOCK_FIELD_TAG: keyof ProductBlockDefinition = 'tag';
+export const PRODUCT_BLOCK_FIELD_DESCRIPTION: keyof ProductBlockDefinition =
+    'description';
+export const PRODUCT_BLOCK_FIELD_STATUS: keyof ProductBlockDefinition =
+    'status';
+export const PRODUCT_BLOCK_FIELD_CREATED_AT: keyof ProductBlockDefinition =
+    'createdAt';
+export const PRODUCT_BLOCK_FIELD_END_DATE: keyof ProductBlockDefinition =
+    'endDate';
+export const PRODUCT_BLOCK_FIELD_RESOURCE_TYPES: keyof ProductBlockDefinition =
+    'resourceTypes';
+
+export const WFOProductBlocksPage = () => {
+    const t = useTranslations('metadata.productBlocks');
+
+    const initialPageSize =
+        getTableConfigFromLocalStorage(
+            METADATA_PRODUCTBLOCKS_TABLE_LOCAL_STORAGE_KEY,
+        )?.selectedPageSize ?? DEFAULT_PAGE_SIZE;
+
+    const { dataDisplayParams, setDataDisplayParam } =
+        useDataDisplayParams<ProductBlockDefinition>({
+            pageSize: initialPageSize,
+            sortBy: {
+                field: PRODUCT_BLOCK_FIELD_NAME,
+                order: SortOrder.ASC,
+            },
+        });
+
+    const tableColumns: TableColumns<ProductBlockDefinition> = {
+        productBlockId: {
+            field: PRODUCT_BLOCK_FIELD_ID,
+            name: t('id'),
+            width: '110',
+        },
+        name: {
+            field: PRODUCT_BLOCK_FIELD_NAME,
+            name: t('name'),
+            width: '110',
+        },
+        description: {
+            field: PRODUCT_BLOCK_FIELD_DESCRIPTION,
+            name: t('description'),
+            width: '400',
+        },
+        tag: {
+            field: PRODUCT_BLOCK_FIELD_TAG,
+            name: t('tag'),
+        },
+        status: {
+            field: PRODUCT_BLOCK_FIELD_STATUS,
+            name: t('status'),
+            width: '90',
+            render: (value) => (
+                <WFOStatusBadge status={value.toLocaleLowerCase()} />
+            ),
+        },
+        resourceTypes: {
+            field: PRODUCT_BLOCK_FIELD_RESOURCE_TYPES,
+            name: t('resourceTypes'),
+            render: (resourceTypes) => (
+                <>
+                    {resourceTypes.map((resourceType, index) => (
+                        <WFOProductBlockBadge key={index}>
+                            {resourceType.resourceType}
+                        </WFOProductBlockBadge>
+                    ))}
+                </>
+            ),
+        },
+        createdAt: {
+            field: PRODUCT_BLOCK_FIELD_CREATED_AT,
+            name: t('createdAt'),
+            render: parseDateToLocaleString,
+        },
+        endDate: {
+            field: PRODUCT_BLOCK_FIELD_END_DATE,
+            name: t('endDate'),
+            render: parseDateToLocaleString,
+        },
+    };
+
+    const { data, isFetching } = useQueryWithGraphql(
+        GET_PRODUCTS_BLOCKS_GRAPHQL_QUERY,
+        {
+            first: dataDisplayParams.pageSize,
+            after: dataDisplayParams.pageIndex * dataDisplayParams.pageSize,
+            sortBy: dataDisplayParams.sortBy,
+        },
+        'productBlocks',
+        true,
+    );
+
+    const dataSorting: DataSorting<ProductBlockDefinition> = {
+        field: dataDisplayParams.sortBy?.field ?? PRODUCT_BLOCK_FIELD_NAME,
+        sortOrder: dataDisplayParams.sortBy?.order ?? SortOrder.ASC,
+    };
+
+    const totalItems = data?.productBlocks.pageInfo.totalItems;
+
+    const pagination: Pagination = {
+        pageSize: dataDisplayParams.pageSize,
+        pageIndex: dataDisplayParams.pageIndex,
+        pageSizeOptions: DEFAULT_PAGE_SIZES,
+        totalItemCount: totalItems ? totalItems : 0,
+    };
+
+    return (
+        <WFOMetadataPageLayout>
+            <TableWithFilter<ProductBlockDefinition>
+                data={data ? data.productBlocks.page : []}
+                tableColumns={tableColumns}
+                dataSorting={dataSorting}
+                onUpdateDataSort={getDataSortHandler<ProductBlockDefinition>(
+                    dataDisplayParams,
+                    setDataDisplayParam,
+                )}
+                onUpdatePage={getPageChangeHandler<ProductBlockDefinition>(
+                    setDataDisplayParam,
+                )}
+                onUpdateEsQueryString={getEsQueryStringHandler<ProductBlockDefinition>(
+                    setDataDisplayParam,
+                )}
+                pagination={pagination}
+                isLoading={isFetching}
+                esQueryString={dataDisplayParams.esQueryString}
+                localStorageKey={METADATA_PRODUCTBLOCKS_TABLE_LOCAL_STORAGE_KEY}
+            />
+        </WFOMetadataPageLayout>
+    );
+};

package/src/pages/metadata/index.ts

@@ -0,0 +1 @@
+export * from './WFOProductBlocksPage';

package/src/types.ts

@@ -36,8 +36,37 @@ export type ProductBlockBase = {
     resourceTypes: ResourceTypeBase;
 };
 
+export interface ResourceTypeDefinition {
+    description: string;
+    resourceType: string;
+    resourceTypeId: string;
+}
+
+export interface ProductBlockDefinition {
+    productBlockId: string;
+    name: string;
+    tag: string;
+    description: string;
+    status: string;
+    createdAt: Date | null;
+    endDate: Date | null;
+    resourceTypes: ResourceTypeDefinition[];
+}
+
 export type FixedInputsBase = GenericField;
 
+export interface FixedInputDefinition {
+    fixedInputId: string;
+    name: string;
+    value: string;
+    productId: string;
+    createdAt: string;
+
+    // Display only?
+    description: string;
+    required: boolean;
+}
+
 export type ExternalServiceBase = {
     externalServiceKey: string;
     externalServiceId: string;
@@ -100,24 +129,22 @@ export interface Process {
     is_task: boolean;
 }
 
-//// Utility types
-
-export interface Product {
+export interface ProductDefinition {
+    productId: string;
     name: string;
     description: string;
     tag: string;
+    createdAt: string;
     productType: string;
     status: string;
-    productBlocks: ProductBlock[];
-    createdAt: Date | null;
-}
-
-interface ProductBlock {
-    name: string;
+    productBlocks: Pick<ProductBlockDefinition, 'name'>[];
+    fixedInputs: Pick<FixedInputDefinition, 'name' | 'value'>[];
 }
 
 export type Field<Type> = keyof Type;
 
+//// Utility types
+
 export enum SortOrder {
     ASC = 'ASC',
     DESC = 'DESC',
@@ -140,6 +167,28 @@ export type GraphqlQueryVariables<Type> = {
     filterBy?: GraphqlFilter<Type>[];
 };
 
+type GraphQLPageInfo = {
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+    startCursor: number;
+    totalItems: number;
+    endCursor: number;
+};
+
+export interface ProductDefinitionsResult {
+    products: {
+        page: ProductDefinition[];
+        pageInfo: GraphQLPageInfo;
+    };
+}
+
+export interface ProductBlockDefinitionsResult {
+    productBlocks: {
+        page: ProductBlockDefinition[];
+        pageInfo: GraphQLPageInfo;
+    };
+}
+
 export interface CacheOption {
     value: string;
     label: string;

package/tsconfig.json

@@ -1,9 +1,11 @@
 {
     "extends": "@orchestrator-ui/tsconfig/base.json",
     "compilerOptions": {
-        "strictNullChecks": true
+        "strictNullChecks": true,
+        "rootDir": "./src",
+        "outDir": "./dist"
     },
-    "include": ["**/*.ts", "**/*.tsx"],
+    "include": ["./src/**/*.ts", "./src/**/*.tsx"],
     "exclude": [
         "node_modules",
         "**/*.stories.ts",

package/.turbo/turbo-build.log

@@ -1,11 +0,0 @@
-$ tsup src/index.ts --format esm --dts
-CLI Building entry: src/index.ts
-CLI Using tsconfig: tsconfig.json
-CLI tsup v7.1.0
-CLI Target: node16
-ESM Build start
-ESM dist\index.js 111.65 KB
-ESM ⚡️ Build success in 90ms
-DTS Build start
-DTS ⚡️ Build success in 3670ms
-DTS dist\index.d.ts 24.53 KB

package/.turbo/turbo-lint.log

@@ -1,15 +0,0 @@
-$ eslint "src/**/*.ts*"
-
-C:\development\surf\orchestrator-ui\packages\orchestrator-ui-components\src\components\OrchestratorPageTemplate\OrchestratorPageHeader\OrchestratorPageHeader.stories.tsx
-  17:17  warning  Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element
-
-C:\development\surf\orchestrator-ui\packages\orchestrator-ui-components\src\components\OrchestratorPageTemplate\OrchestratorPageTemplate\OrchestratorPageTemplate.stories.tsx
-  17:17  warning  Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element
-
-C:\development\surf\orchestrator-ui\packages\orchestrator-ui-components\src\components\Table\DataGridTable\DataGridTable.tsx
-  103:28  warning  'props' is defined but never used  @typescript-eslint/no-unused-vars
-
-✖ 3 problems (0 errors, 3 warnings)
-
-(node:11940) [DEP0128] DeprecationWarning: Invalid 'main' field in 'C:\development\surf\orchestrator-ui\node_modules\@orchestrator-ui\eslint-config-custom\package.json' of './dist/index.js'. Please either fix that or report it to the module author
-(Use `node --trace-deprecation ...` to show where the warning was created)

package/.turbo/turbo-test.log

@@ -1,19 +0,0 @@
-yarn run v1.22.19
-$ jest
-PASS Orchestrator UI Components Tests src/utils/getTypedFieldFromObject.spec.ts
-PASS Orchestrator UI Components Tests src/components/Table/DataGridTable/dataGridColumns.spec.ts
-PASS Orchestrator UI Components Tests src/utils/uuid.spec.ts
-PASS Orchestrator UI Components Tests src/utils/string.spec.ts
-PASS Orchestrator UI Components Tests src/components/Table/utils/tableConfigPersistence.spec.ts
-PASS Orchestrator UI Components Tests src/components/Table/utils/columns.spec.ts
-PASS Orchestrator UI Components Tests src/utils/getTokenName.spec.ts
-PASS Orchestrator UI Components Tests src/components/Table/utils/tableUtils.spec.ts
-PASS Orchestrator UI Components Tests src/utils/date.spec.ts
-PASS Orchestrator UI Components Tests src/components/SubscriptionsTabs/getSubscriptionsTabTypeFromString.spec.ts
-
-Test Suites: 10 passed, 10 total
-Tests:       50 passed, 50 total
-Snapshots:   0 total
-Time:        4.16 s
-Ran all test suites.
-Done in 5.13s.

package/.turbo/turbo-tsc.log

@@ -1 +0,0 @@
-$ tsc --noEmit