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

package/src/components/{Tree/TreeBranch.tsx → WFOTree/WFOTreeBranch.tsx}

@@ -1,16 +1,16 @@
 import React, { FC } from 'react';
 import { EuiListGroup } from '@elastic/eui';
 
-import { TreeNode } from './TreeNode';
+import { WFOTreeNode } from './WFOTreeNode';
 import { TreeBlock } from '../../types';
 import { TreeContext, TreeContextType } from '../../contexts/TreeContext';
 
-type TreeBranchProps = {
+type WFOTreeBranchProps = {
     item: TreeBlock;
     level: number;
 };
 
-export const TreeBranch: FC<TreeBranchProps> = ({ item, level }) => {
+export const WFOTreeBranch: FC<WFOTreeBranchProps> = ({ item, level }) => {
     const { expandedIds } = React.useContext(TreeContext) as TreeContextType;
     const selected = expandedIds.includes(item.id);
 
@@ -21,7 +21,7 @@ export const TreeBranch: FC<TreeBranchProps> = ({ item, level }) => {
             const newLevel = level + 1;
 
             return item.children.map((child) => (
-                <TreeBranch key={child.id} item={child} level={newLevel} />
+                <WFOTreeBranch key={child.id} item={child} level={newLevel} />
             ));
         }
 
@@ -31,7 +31,11 @@ export const TreeBranch: FC<TreeBranchProps> = ({ item, level }) => {
     return (
         <>
             <EuiListGroup flush={true} color="primary" maxWidth={455}>
-                <TreeNode item={item} hasChildren={hasChildren} level={level} />
+                <WFOTreeNode
+                    item={item}
+                    hasChildren={hasChildren}
+                    level={level}
+                />
             </EuiListGroup>
 
             {selected && renderBranches()}

package/src/components/{Tree/TreeNode.tsx → WFOTree/WFOTreeNode.tsx}

@@ -15,13 +15,17 @@ type Item = {
     label: string;
 };
 
-type TreeNodeProps = {
+type WFOTreeNodeProps = {
     item: Item;
     hasChildren: boolean;
     level: number;
 };
 
-export const TreeNode: FC<TreeNodeProps> = ({ item, hasChildren, level }) => {
+export const WFOTreeNode: FC<WFOTreeNodeProps> = ({
+    item,
+    hasChildren,
+    level,
+}) => {
     const t = useTranslations('common');
     const { expandedIds, toggleExpandedId, selectedIds, toggleSelectedId } =
         React.useContext(TreeContext) as TreeContextType;

package/src/components/index.ts

@@ -1,11 +1,11 @@
-export * from './Badges';
-export * from './Breadcrumbs';
-export * from './OrchestratorPageTemplate';
-export * from './SearchBar';
-export * from './SettingsModal';
-export * from './SettingsPage';
-export * from './StartPage';
-export * from './Subscription';
-export * from './SubscriptionsTabs';
-export * from './Table';
-export * from './Loading';
+export * from './WFOBadges';
+export * from './WFOBreadcrumbs';
+export * from './WFOFilterTabs';
+export * from './WFOPageTemplate';
+export * from './WFOSearchBar';
+export * from './WFOSettingsModal';
+export * from './WFOSettingsPage';
+export * from './WFOStartPage';
+export * from './WFOSubscription';
+export * from './WFOTable';
+export * from './WFOLoading';

package/src/graphqlQueries/index.ts

@@ -1 +1,3 @@
 export * from './productBlocksQuery';
+export * from './resourceTypesQuery';
+export * from './productsQuery';

package/src/graphqlQueries/processListQuery.ts

@@ -0,0 +1,53 @@
+import { parse } from 'graphql';
+import { gql } from 'graphql-request';
+import { TypedDocumentNode } from '@graphql-typed-document-node/core';
+import {
+    GraphqlQueryVariables,
+    Process,
+    ProcessesDefinitionsResult,
+} from '../types';
+
+export const GET_PROCESS_LIST_GRAPHQL_QUERY: TypedDocumentNode<
+    ProcessesDefinitionsResult,
+    GraphqlQueryVariables<Process>
+> = parse(gql`
+    query ProcessList(
+        $first: IntType!
+        $after: IntType!
+        $sortBy: [GraphqlSort!]
+        $filterBy: [GraphqlFilter!]
+    ) {
+        processes(
+            first: $first
+            after: $after
+            sortBy: $sortBy
+            filterBy: $filterBy
+        ) {
+            page {
+                workflowName
+                lastStep
+                status
+                product
+                customer
+                createdBy
+                assignee
+                id
+                started
+                lastModified
+                subscriptions {
+                    page {
+                        subscriptionId
+                        description
+                    }
+                }
+            }
+            pageInfo {
+                hasNextPage
+                hasPreviousPage
+                startCursor
+                totalItems
+                endCursor
+            }
+        }
+    }
+`);

package/src/graphqlQueries/productBlocksQuery.ts

@@ -2,14 +2,9 @@ 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>

package/src/graphqlQueries/productsQuery.ts

@@ -0,0 +1,47 @@
+import { gql } from 'graphql-request';
+import { parse } from 'graphql';
+import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
+
+import type {
+    ProductDefinition,
+    GraphqlQueryVariables,
+    ProductDefinitionsResult,
+} from '@orchestrator-ui/orchestrator-ui-components';
+
+export const GET_PRODUCTS_GRAPHQL_QUERY: TypedDocumentNode<
+    ProductDefinitionsResult,
+    GraphqlQueryVariables<ProductDefinition>
+> = parse(gql`
+    query MetadataProducts(
+        $first: IntType!
+        $after: IntType!
+        $sortBy: [GraphqlSort!]
+    ) {
+        products(first: $first, after: $after, sortBy: $sortBy) {
+            page {
+                productId
+                name
+                description
+                tag
+                createdAt
+                productType
+                status
+                productBlocks {
+                    name
+                }
+                fixedInputs {
+                    name
+                    value
+                }
+                endDate
+            }
+            pageInfo {
+                endCursor
+                hasNextPage
+                hasPreviousPage
+                startCursor
+                totalItems
+            }
+        }
+    }
+`);

package/src/graphqlQueries/resourceTypesQuery.ts

@@ -0,0 +1,35 @@
+import { gql } from 'graphql-request';
+import { parse } from 'graphql';
+import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
+
+import type {
+    ResourceTypeDefinition,
+    ResourceTypeDefinitionsResult,
+    GraphqlQueryVariables,
+} from '../types';
+
+export const GET_RESOURCE_TYPES_GRAPHQL_QUERY: TypedDocumentNode<
+    ResourceTypeDefinitionsResult,
+    GraphqlQueryVariables<ResourceTypeDefinition>
+> = parse(gql`
+    query MetadataResourceTypes(
+        $first: IntType!
+        $after: IntType!
+        $sortBy: [GraphqlSort!]
+    ) {
+        resourceTypes(first: $first, after: $after, sortBy: $sortBy) {
+            page {
+                resourceTypeId
+                resourceType
+                description
+            }
+            pageInfo {
+                endCursor
+                hasNextPage
+                hasPreviousPage
+                startCursor
+                totalItems
+            }
+        }
+    }
+`);

package/src/graphqlQueries/workflowsQuery.ts

@@ -0,0 +1,37 @@
+import { gql } from 'graphql-request';
+import { parse } from 'graphql';
+import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
+
+import type {
+    WorkflowDefinition,
+    GraphqlQueryVariables,
+    WorkflowDefinitionsResult,
+} from '@orchestrator-ui/orchestrator-ui-components';
+
+export const GET_WORKFLOWS_GRAPHQL_QUERY: TypedDocumentNode<
+    WorkflowDefinitionsResult,
+    GraphqlQueryVariables<WorkflowDefinition>
+> = parse(gql`
+    query MetadataWorkflows(
+        $first: IntType!
+        $after: IntType!
+        $sortBy: [GraphqlSort!]
+    ) {
+        workflows(first: $first, after: $after, sortBy: $sortBy) {
+            page {
+                name
+                description
+                target
+                productTags
+                createdAt
+            }
+            pageInfo {
+                endCursor
+                hasNextPage
+                hasPreviousPage
+                startCursor
+                totalItems
+            }
+        }
+    }
+`);

package/src/hooks/useProcessStatusCountsQuery.ts

@@ -9,6 +9,7 @@ export enum ProcessStatus {
     WAITING = 'waiting',
     ABORTED = 'aborted',
     FAILED = 'failed',
+    RESUMED = 'resumed',
     API_UNAVAILABLE = 'api_unavailable',
     INCONSISTENT_DATA = 'inconsistent_data',
     COMPLETED = 'completed',

package/src/hooks/useSubscriptionProcesses.ts

@@ -2,6 +2,7 @@ import { useQuery } from 'react-query';
 import { useContext } from 'react';
 import { OrchestratorConfigContext } from '../contexts/OrchestratorConfigContext';
 import { Nullable } from '../types';
+import { ProcessStatus } from './useProcessStatusCountsQuery';
 
 interface Process {
     workflow: string;
@@ -10,7 +11,7 @@ interface Process {
     created_by: Nullable<string>;
     failed_reason: Nullable<string>;
     started_at: number;
-    last_status: 'completed' | 'aborted';
+    last_status: ProcessStatus;
     assignee: 'NOC' | 'SYSTEM' | 'CHANGES' | 'USER';
     last_modified_at: number;
     traceback: Nullable<string>;

package/src/icons/{ArrowNarrowDown.tsx → WFOArrowNarrowDown.tsx}

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
-import { IconProps } from './IconProps';
+import { WFOIconProps } from './WFOIconProps';
 
-export const ArrowNarrowDown: FC<IconProps> = ({
+export const WFOArrowNarrowDown: FC<WFOIconProps> = ({
     width = 16,
     height = 20,
     color = '#000000',

package/src/icons/{ArrowNarrowUp.tsx → WFOArrowNarrowUp.tsx}

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
-import { IconProps } from './IconProps';
+import { WFOIconProps } from './WFOIconProps';
 
-export const ArrowNarrowUp: FC<IconProps> = ({
+export const WFOArrowNarrowUp: FC<WFOIconProps> = ({
     width = 16,
     height = 20,
     color = '#000000',

package/src/icons/WFOCheckmarkCircleFill.stories.tsx

@@ -0,0 +1,12 @@
+import type { Meta } from '@storybook/react';
+import { WFOCheckmarkCircleFill } from './WFOCheckmarkCircleFill';
+
+const Story: Meta<typeof WFOCheckmarkCircleFill> = {
+    component: WFOCheckmarkCircleFill,
+    title: 'Icons/WFOCheckmarkCircleFill',
+};
+export default Story;
+
+export const Primary = {
+    args: {},
+};

package/src/icons/{CheckmarkCircleFill.tsx → WFOCheckmarkCircleFill.tsx}

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
-import { IconProps } from './IconProps';
+import { WFOIconProps } from './WFOIconProps';
 
-export const CheckmarkCircleFill: FC<IconProps> = ({
+export const WFOCheckmarkCircleFill: FC<WFOIconProps> = ({
     width = 24,
     height = 24,
     color = '#000000',

package/src/icons/{ChevronDown.tsx → WFOChevronDown.tsx}

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
-import { IconProps } from './IconProps';
+import { WFOIconProps } from './WFOIconProps';
 
-export const ChevronDown: FC<IconProps> = ({
+export const WFOChevronDown: FC<WFOIconProps> = ({
     width = 24,
     height = 24,
     color = '#000000',

package/src/icons/{IconProps.ts → WFOIconProps.ts}

@@ -1,4 +1,4 @@
-export type IconProps = {
+export type WFOIconProps = {
     width?: number | string;
     height?: number | string;
     color?: string;

package/src/icons/WFOLogoutIcon.stories.tsx

@@ -0,0 +1,12 @@
+import type { Meta } from '@storybook/react';
+import { WFOLogoutIcon } from './WFOLogoutIcon';
+
+const Story: Meta<typeof WFOLogoutIcon> = {
+    component: WFOLogoutIcon,
+    title: 'Icons/WFOLogoutIcon',
+};
+export default Story;
+
+export const Primary = {
+    args: {},
+};

package/src/icons/{LogoutIcon.tsx → WFOLogoutIcon.tsx}

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
-import { IconProps } from './IconProps';
+import { WFOIconProps } from './WFOIconProps';
 
-export const LogoutIcon: FC<IconProps> = ({
+export const WFOLogoutIcon: FC<WFOIconProps> = ({
     width = 24,
     height = 24,
     color = '#000000',

package/src/icons/WFOMinusCircleOutline.stories.tsx

@@ -0,0 +1,12 @@
+import type { Meta } from '@storybook/react';
+import { WFOMinusCircleOutline } from './WFOMinusCircleOutline';
+
+const Story: Meta<typeof WFOMinusCircleOutline> = {
+    component: WFOMinusCircleOutline,
+    title: 'Icons/WFOMinusCircleOutline',
+};
+export default Story;
+
+export const Primary = {
+    args: {},
+};

package/src/icons/{MinusCircleOutline.tsx → WFOMinusCircleOutline.tsx}

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
-import { IconProps } from './IconProps';
+import { WFOIconProps } from './WFOIconProps';
 
-export const MinusCircleOutline: FC<IconProps> = ({
+export const WFOMinusCircleOutline: FC<WFOIconProps> = ({
     width = 24,
     height = 24,
     color = '#000000',

package/src/icons/WFOPlusCircleFill.stories.tsx

@@ -0,0 +1,12 @@
+import type { Meta } from '@storybook/react';
+import { WFOPlusCircleFill } from './WFOPlusCircleFill';
+
+const Story: Meta<typeof WFOPlusCircleFill> = {
+    component: WFOPlusCircleFill,
+    title: 'Icons/WFOPlusCircleFill',
+};
+export default Story;
+
+export const Primary = {
+    args: {},
+};

package/src/icons/{PlusCircleFill.tsx → WFOPlusCircleFill.tsx}

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
-import { IconProps } from './IconProps';
+import { WFOIconProps } from './WFOIconProps';
 
-export const PlusCircleFill: FC<IconProps> = ({
+export const WFOPlusCircleFill: FC<WFOIconProps> = ({
     width = 24,
     height = 24,
     color = '#000000',

package/src/icons/WFOStatusDotIcon.stories.tsx

@@ -0,0 +1,12 @@
+import type { Meta } from '@storybook/react';
+import { WFOStatusDotIcon } from './WFOStatusDotIcon';
+
+const Story: Meta<typeof WFOStatusDotIcon> = {
+    component: WFOStatusDotIcon,
+    title: 'Icons/WFOStatusDotIcon',
+};
+export default Story;
+
+export const Primary = {
+    args: {},
+};

package/src/icons/{StatusDotIcon.tsx → WFOStatusDotIcon.tsx}

@@ -1,8 +1,8 @@
 import React from 'react';
 import { FC } from 'react';
-import { IconProps } from './IconProps';
+import { WFOIconProps } from './WFOIconProps';
 
-export const StatusDotIcon: FC<IconProps> = ({
+export const WFOStatusDotIcon: FC<WFOIconProps> = ({
     width = 24,
     height = 24,
     color = '#000000',

package/src/icons/WFOXCircleFill.stories.tsx

@@ -0,0 +1,12 @@
+import type { Meta } from '@storybook/react';
+import { WFOXCircleFill } from './WFOXCircleFill';
+
+const Story: Meta<typeof WFOXCircleFill> = {
+    component: WFOXCircleFill,
+    title: 'Icons/WFOXCircleFill',
+};
+export default Story;
+
+export const Primary = {
+    args: {},
+};

package/src/icons/{XCircleFill.tsx → WFOXCircleFill.tsx}

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
-import { IconProps } from './IconProps';
+import { WFOIconProps } from './WFOIconProps';
 
-export const XCircleFill: FC<IconProps> = ({
+export const WFOXCircleFill: FC<WFOIconProps> = ({
     width = 24,
     height = 24,
     color = '#000000',

package/src/icons/index.ts

@@ -1,10 +1,10 @@
-export * from './XCircleFill';
-export * from './StatusDotIcon';
-export * from './LogoutIcon';
-export * from './CheckmarkCircleFill';
-export * from './IconProps';
-export * from './MinusCircleOutline';
-export * from './PlusCircleFill';
-export * from './ChevronDown';
-export * from './ArrowNarrowDown';
-export * from './ArrowNarrowUp';
+export * from './WFOXCircleFill';
+export * from './WFOStatusDotIcon';
+export * from './WFOLogoutIcon';
+export * from './WFOCheckmarkCircleFill';
+export * from './WFOIconProps';
+export * from './WFOMinusCircleOutline';
+export * from './WFOPlusCircleFill';
+export * from './WFOChevronDown';
+export * from './WFOArrowNarrowDown';
+export * from './WFOArrowNarrowUp';

package/src/messages/en-US.json

@@ -13,16 +13,17 @@
             "products": "Products",
             "productBlocks": "Productblocks",
             "resourceTypes": "Resource types",
-            "fixedInputs": "Fixed inputs",
             "workflows": "Workflows"
         },
-        "product": {
+        "products": {
+            "id": "ID",
             "name": "Name",
             "description": "Description",
             "tag": "Tag",
             "productType": "Type",
             "status": "Status",
             "productBlocks": "Product blocks",
+            "fixedInputs": "Fixed inputs",
             "createdAt": "Created"
         },
         "productBlocks": {
@@ -35,6 +36,37 @@
             "createdAt": "Created",
             "endDate": "End date",
             "parentIds": "Parents"
+        },
+        "resourceTypes": {
+            "type": "Type",
+            "description": "Description",
+            "resourceId": "Resource ID"
+        },
+        "workflows": {
+            "name": "Name",
+            "description": "Description",
+            "target": "Target",
+            "productTags": "Product Tags",
+            "createdAt": "Created"
+        }
+    },
+    "processes": {
+        "tabs": {
+            "active": "Active",
+            "completed": "Completed"
+        },
+        "index": {
+            "workflowName": "Workflow",
+            "lastStep": "Last step",
+            "status": "Status",
+            "product": "Product",
+            "customer": "Customer",
+            "subscriptions": "Subscriptions",
+            "createdBy": "Created By",
+            "assignee": "Assignee",
+            "id": "ID",
+            "started": "Started",
+            "lastModified": "Last Modified"
         }
     },
     "subscriptions": {