From 3242a0859fc9a259d8fa471368fccebde416ff1f Mon Sep 17 00:00:00 2001 From: Ruben van Leeuwen Date: Wed, 13 Mar 2024 16:52:42 +0100 Subject: [PATCH 1/7] 702: Moves getting start dropdown options to RTK. Refactor task and workflow dropdowns --- .../WfoPageTemplate/WfoSidebar/WfoSidebar.tsx | 4 +- .../WfoStartCreateWorkflowButtonComboBox.tsx | 61 ------------ .../WfoStartButtonComboBox.tsx} | 28 +++--- .../WfoStartButton/WfoStartTaskComboBox.tsx | 38 ++++++++ .../WfoStartWorkflowComboBox.tsx | 39 ++++++++ .../src/components/WfoStartButton/index.ts | 2 + .../styles.ts | 0 .../WfoStartTaskButtonComboBox.tsx | 54 ----------- .../WfoStartTaskButtonComboBox/index.ts | 1 - .../src/components/index.ts | 2 +- .../src/rtk/endpoints/index.ts | 2 + .../src/rtk/endpoints/startComboBoxOptions.ts | 96 +++++++++++++++++++ .../src/types/types.ts | 12 +++ 13 files changed, 203 insertions(+), 136 deletions(-) delete mode 100644 packages/orchestrator-ui-components/src/components/WfoPageTemplate/WfoSidebar/WfoStartCreateWorkflowButtonComboBox.tsx rename packages/orchestrator-ui-components/src/components/{WfoButtonComboBox/WfoButtonComboBox.tsx => WfoStartButton/WfoStartButtonComboBox.tsx} (73%) create mode 100644 packages/orchestrator-ui-components/src/components/WfoStartButton/WfoStartTaskComboBox.tsx create mode 100644 packages/orchestrator-ui-components/src/components/WfoStartButton/WfoStartWorkflowComboBox.tsx create mode 100644 packages/orchestrator-ui-components/src/components/WfoStartButton/index.ts rename packages/orchestrator-ui-components/src/components/{WfoButtonComboBox => WfoStartButton}/styles.ts (100%) delete mode 100644 packages/orchestrator-ui-components/src/components/WfoStartTaskButtonComboBox/WfoStartTaskButtonComboBox.tsx delete mode 100644 packages/orchestrator-ui-components/src/components/WfoStartTaskButtonComboBox/index.ts create mode 100644 packages/orchestrator-ui-components/src/rtk/endpoints/startComboBoxOptions.ts diff --git a/packages/orchestrator-ui-components/src/components/WfoPageTemplate/WfoSidebar/WfoSidebar.tsx b/packages/orchestrator-ui-components/src/components/WfoPageTemplate/WfoSidebar/WfoSidebar.tsx index 0d8e1a07d..914334870 100644 --- a/packages/orchestrator-ui-components/src/components/WfoPageTemplate/WfoSidebar/WfoSidebar.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoPageTemplate/WfoSidebar/WfoSidebar.tsx @@ -7,6 +7,7 @@ import { EuiSideNav, EuiSpacer } from '@elastic/eui'; import { EuiSideNavItemType } from '@elastic/eui/src/components/side_nav/side_nav_types'; import { WfoIsAllowedToRender } from '@/components'; +import { WfoStartWorkflowButtonComboBox } from '@/components/WfoStartButton/WfoStartWorkflowComboBox'; import { PolicyResource } from '@/configuration/policy-resources'; import { usePolicy } from '@/hooks'; @@ -23,7 +24,6 @@ import { PATH_WORKFLOWS, } from '../paths'; import { WfoCopyright } from './WfoCopyright'; -import { WfoStartCreateWorkflowButtonComboBox } from './WfoStartCreateWorkflowButtonComboBox'; export const renderEmptyElementWhenNotAllowedByPolicy = (isAllowed: boolean) => isAllowed ? undefined : () => <>; @@ -171,7 +171,7 @@ export const WfoSidebar: FC = ({ overrideMenuItems }) => { - + diff --git a/packages/orchestrator-ui-components/src/components/WfoPageTemplate/WfoSidebar/WfoStartCreateWorkflowButtonComboBox.tsx b/packages/orchestrator-ui-components/src/components/WfoPageTemplate/WfoSidebar/WfoStartCreateWorkflowButtonComboBox.tsx deleted file mode 100644 index 8fef62541..000000000 --- a/packages/orchestrator-ui-components/src/components/WfoPageTemplate/WfoSidebar/WfoStartCreateWorkflowButtonComboBox.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import React from 'react'; - -import { useTranslations } from 'next-intl'; -import { useRouter } from 'next/router'; - -import { GET_WORKFLOWS_FOR_DROPDOWN_LIST_GRAPHQL_QUERY } from '@/graphqlQueries/workflows/workflowsQueryForDropdownList'; -import { useCheckEngineStatus, useQueryWithGraphql } from '@/hooks'; - -import { - WfoButtonComboBox, - WorkflowComboBoxOption, -} from '../../WfoButtonComboBox/WfoButtonComboBox'; -import { PATH_START_NEW_WORKFLOW } from '../paths'; - -export const WfoStartCreateWorkflowButtonComboBox = () => { - const router = useRouter(); - const t = useTranslations('common'); - const { isEngineRunningNow } = useCheckEngineStatus(); - - const { data } = useQueryWithGraphql( - GET_WORKFLOWS_FOR_DROPDOWN_LIST_GRAPHQL_QUERY, - { - filterBy: [{ field: 'target', value: 'CREATE' }], - }, - 'createWorkflows', - ); - - const productList: WorkflowComboBoxOption[] = - data?.workflows.page - .flatMap(({ name: workflowName, products }) => - products.map(({ productId, name: productName }) => ({ - label: productName, - data: { - workflowName, - productId, - }, - })), - ) - .sort((a, b) => a.label.localeCompare(b.label)) ?? []; - - const handleOptionChange = async ( - selectedProduct: WorkflowComboBoxOption, - ) => { - if (await isEngineRunningNow()) { - const { workflowName, productId } = selectedProduct.data; - router.push({ - pathname: `${PATH_START_NEW_WORKFLOW}/${workflowName}`, - query: { productId }, - }); - } - }; - - return ( - - ); -}; diff --git a/packages/orchestrator-ui-components/src/components/WfoButtonComboBox/WfoButtonComboBox.tsx b/packages/orchestrator-ui-components/src/components/WfoStartButton/WfoStartButtonComboBox.tsx similarity index 73% rename from packages/orchestrator-ui-components/src/components/WfoButtonComboBox/WfoButtonComboBox.tsx rename to packages/orchestrator-ui-components/src/components/WfoStartButton/WfoStartButtonComboBox.tsx index eea200ad6..18bbf91ed 100644 --- a/packages/orchestrator-ui-components/src/components/WfoButtonComboBox/WfoButtonComboBox.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoStartButton/WfoStartButtonComboBox.tsx @@ -1,32 +1,26 @@ -import React, { FC, useState } from 'react'; +import React, { useState } from 'react'; import { EuiButton, EuiPopover, EuiSelectable, EuiSpacer } from '@elastic/eui'; -import { useOrchestratorTheme } from '../../hooks'; -import { WfoPlusCircleFill } from '../../icons'; -import { getStyles } from './styles'; +import { useOrchestratorTheme } from '@/hooks'; +import { WfoPlusCircleFill } from '@/icons'; +import { StartComboBoxOption } from '@/types'; -export type WorkflowComboBoxOption = { - data: { - workflowName: string; - productId?: string; - }; - label: string; -}; +import { getStyles } from './styles'; -export type WfoButtonComboBoxProps = { +export type WfoStartButtonComboBoxProps = { buttonText: string; - options: WorkflowComboBoxOption[]; - onOptionChange: (selectedOption: WorkflowComboBoxOption) => void; + options: StartComboBoxOption[]; + onOptionChange: (selectedOption: StartComboBoxOption) => void; isProcess: boolean; }; -export const WfoButtonComboBox: FC = ({ +export const WfoStartButtonComboBox = ({ buttonText, options, onOptionChange, isProcess, -}) => { +}: WfoStartButtonComboBoxProps) => { const [isPopoverOpen, setPopoverOpen] = useState(false); const { selectableStyle } = getStyles(); const { theme } = useOrchestratorTheme(); @@ -55,7 +49,7 @@ export const WfoButtonComboBox: FC = ({ isOpen={isPopoverOpen} closePopover={() => setPopoverOpen(false)} > - + css={selectableStyle} searchable options={options} diff --git a/packages/orchestrator-ui-components/src/components/WfoStartButton/WfoStartTaskComboBox.tsx b/packages/orchestrator-ui-components/src/components/WfoStartButton/WfoStartTaskComboBox.tsx new file mode 100644 index 000000000..d3a57720a --- /dev/null +++ b/packages/orchestrator-ui-components/src/components/WfoStartButton/WfoStartTaskComboBox.tsx @@ -0,0 +1,38 @@ +import React from 'react'; + +import { useTranslations } from 'next-intl'; +import { useRouter } from 'next/router'; + +import { PATH_START_NEW_TASK } from '@/components'; +import { useCheckEngineStatus } from '@/hooks'; +import { useGetTaskOptionsQuery } from '@/rtk'; +import { StartComboBoxOption } from '@/types'; + +import { WfoStartButtonComboBox } from './WfoStartButtonComboBox'; + +export const WfoStartTaskButtonComboBox = () => { + const router = useRouter(); + const t = useTranslations('common'); + const { isEngineRunningNow } = useCheckEngineStatus(); + + const { data } = useGetTaskOptionsQuery(); + const taskOptions = data?.startComboBoxOptions || []; + + const handleOptionChange = async (selectedProduct: StartComboBoxOption) => { + if (await isEngineRunningNow()) { + const { workflowName } = selectedProduct.data; + router.push({ + pathname: `${PATH_START_NEW_TASK}/${workflowName}`, + }); + } + }; + + return ( + + ); +}; diff --git a/packages/orchestrator-ui-components/src/components/WfoStartButton/WfoStartWorkflowComboBox.tsx b/packages/orchestrator-ui-components/src/components/WfoStartButton/WfoStartWorkflowComboBox.tsx new file mode 100644 index 000000000..337198fad --- /dev/null +++ b/packages/orchestrator-ui-components/src/components/WfoStartButton/WfoStartWorkflowComboBox.tsx @@ -0,0 +1,39 @@ +import React from 'react'; + +import { useTranslations } from 'next-intl'; +import { useRouter } from 'next/router'; + +import { useCheckEngineStatus } from '@/hooks'; +import { useGetWorkflowOptionsQuery } from '@/rtk'; +import { StartComboBoxOption } from '@/types'; + +import { PATH_START_NEW_WORKFLOW } from '../WfoPageTemplate'; +import { WfoStartButtonComboBox } from './WfoStartButtonComboBox'; + +export const WfoStartWorkflowButtonComboBox = () => { + const router = useRouter(); + const t = useTranslations('common'); + const { isEngineRunningNow } = useCheckEngineStatus(); + + const { data } = useGetWorkflowOptionsQuery(); + const workflowOptions = data?.startComboBoxOptions || []; + + const handleOptionChange = async (selectedProduct: StartComboBoxOption) => { + if (await isEngineRunningNow()) { + const { workflowName, productId } = selectedProduct.data; + router.push({ + pathname: `${PATH_START_NEW_WORKFLOW}/${workflowName}`, + query: { productId }, + }); + } + }; + + return ( + + ); +}; diff --git a/packages/orchestrator-ui-components/src/components/WfoStartButton/index.ts b/packages/orchestrator-ui-components/src/components/WfoStartButton/index.ts new file mode 100644 index 000000000..1127946c3 --- /dev/null +++ b/packages/orchestrator-ui-components/src/components/WfoStartButton/index.ts @@ -0,0 +1,2 @@ +export * from './WfoStartTaskComboBox'; +export * from './WfoStartWorkflowComboBox'; diff --git a/packages/orchestrator-ui-components/src/components/WfoButtonComboBox/styles.ts b/packages/orchestrator-ui-components/src/components/WfoStartButton/styles.ts similarity index 100% rename from packages/orchestrator-ui-components/src/components/WfoButtonComboBox/styles.ts rename to packages/orchestrator-ui-components/src/components/WfoStartButton/styles.ts diff --git a/packages/orchestrator-ui-components/src/components/WfoStartTaskButtonComboBox/WfoStartTaskButtonComboBox.tsx b/packages/orchestrator-ui-components/src/components/WfoStartTaskButtonComboBox/WfoStartTaskButtonComboBox.tsx deleted file mode 100644 index df287440e..000000000 --- a/packages/orchestrator-ui-components/src/components/WfoStartTaskButtonComboBox/WfoStartTaskButtonComboBox.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React from 'react'; - -import { useTranslations } from 'next-intl'; -import { useRouter } from 'next/router'; - -import { PATH_START_NEW_TASK } from '@/components'; -import { GET_WORKFLOWS_FOR_DROPDOWN_LIST_GRAPHQL_QUERY } from '@/graphqlQueries/workflows/workflowsQueryForDropdownList'; -import { useCheckEngineStatus, useQueryWithGraphql } from '@/hooks'; - -import { - WfoButtonComboBox, - WorkflowComboBoxOption, -} from '../WfoButtonComboBox/WfoButtonComboBox'; - -export const WfoStartTaskButtonComboBox = () => { - const router = useRouter(); - const t = useTranslations('common'); - const { isEngineRunningNow } = useCheckEngineStatus(); - - const { data } = useQueryWithGraphql( - GET_WORKFLOWS_FOR_DROPDOWN_LIST_GRAPHQL_QUERY, - { - filterBy: [{ field: 'target', value: 'SYSTEM' }], - }, - 'taskWorkflows', - ); - - const taskList: WorkflowComboBoxOption[] = (data?.workflows.page || []) - .map(({ name, description }) => ({ - label: description ?? '', - data: { workflowName: name }, - })) - .sort((a, b) => a.label.localeCompare(b.label)); - - const handleOptionChange = async ( - selectedProduct: WorkflowComboBoxOption, - ) => { - if (await isEngineRunningNow()) { - const { workflowName } = selectedProduct.data; - router.push({ - pathname: `${PATH_START_NEW_TASK}/${workflowName}`, - }); - } - }; - - return ( - - ); -}; diff --git a/packages/orchestrator-ui-components/src/components/WfoStartTaskButtonComboBox/index.ts b/packages/orchestrator-ui-components/src/components/WfoStartTaskButtonComboBox/index.ts deleted file mode 100644 index a3ccbfcba..000000000 --- a/packages/orchestrator-ui-components/src/components/WfoStartTaskButtonComboBox/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './WfoStartTaskButtonComboBox'; diff --git a/packages/orchestrator-ui-components/src/components/index.ts b/packages/orchestrator-ui-components/src/components/index.ts index 9e5c62b28..8aaf9b568 100644 --- a/packages/orchestrator-ui-components/src/components/index.ts +++ b/packages/orchestrator-ui-components/src/components/index.ts @@ -12,7 +12,6 @@ export * from './WfoTimeline'; export * from './WfoLoading'; export * from './WfoToastsList'; export * from './WfoForms'; -export * from './WfoStartTaskButtonComboBox'; export * from './WfoDateTime'; export * from './WfoAuth'; export * from './WfoDropdownButton'; @@ -26,3 +25,4 @@ export * from './WfoError'; export * from './WfoErrorBoundary'; export * from './WfoWorkflowSteps'; export * from './WfoNoResults'; +export * from './WfoStartButton'; diff --git a/packages/orchestrator-ui-components/src/rtk/endpoints/index.ts b/packages/orchestrator-ui-components/src/rtk/endpoints/index.ts index 2816cde38..cb9d3112c 100644 --- a/packages/orchestrator-ui-components/src/rtk/endpoints/index.ts +++ b/packages/orchestrator-ui-components/src/rtk/endpoints/index.ts @@ -11,3 +11,5 @@ export * from './settings'; export * from './streamMessages'; export * from './subscriptionDetail'; export * from './subscriptionsDropdownOptions'; +export * from './relatedSubscriptions'; +export * from './startComboBoxOptions'; diff --git a/packages/orchestrator-ui-components/src/rtk/endpoints/startComboBoxOptions.ts b/packages/orchestrator-ui-components/src/rtk/endpoints/startComboBoxOptions.ts new file mode 100644 index 000000000..af1f1ee40 --- /dev/null +++ b/packages/orchestrator-ui-components/src/rtk/endpoints/startComboBoxOptions.ts @@ -0,0 +1,96 @@ +import { + ProductDefinition, + StartButtonOptionsResult, + StartComboBoxOption, + WorkflowDefinition, + WorkflowTarget, +} from '@/types'; + +import { orchestratorApi } from '../api'; + +const workflowOptionsQuery = ` + query StartOptions { + workflows(first: 1000000, after: 0, filterBy: [{ field: "target", value: "${WorkflowTarget.CREATE}"}]) { + page { + name + description + products { + productId + name + } + } + } + } +`; + +const taskOptionsQuery = ` + query StartOptions { + workflows(first: 1000000, after: 0, filterBy: [{ field: "target", value: "${WorkflowTarget.SYSTEM}"}]) { + page { + name + description + } + } + } +`; + +export type StartButtonOptionsResponse = { + startComboBoxOptions: StartComboBoxOption[]; +}; + +type WorkflowOptionsResult = StartButtonOptionsResult<{ + name: WorkflowDefinition['name']; + description: WorkflowDefinition['description']; + products: Pick[]; +}>; + +type TaskOptionsResult = StartButtonOptionsResult< + Pick +>; + +const startButtonOptionsApi = orchestratorApi.injectEndpoints({ + endpoints: (build) => ({ + getWorkflowOptions: build.query({ + query: () => ({ + document: workflowOptionsQuery, + }), + transformResponse: (response: WorkflowOptionsResult) => { + return { + startComboBoxOptions: response.workflows.page + .flatMap(({ name: workflowName, products }) => + products.map( + ({ productId, name: productName }) => ({ + label: productName, + data: { + workflowName, + productId, + }, + }), + ), + ) + .sort((a, b) => a.label.localeCompare(b.label)), + }; + }, + }), + getTaskOptions: build.query({ + query: () => ({ + document: taskOptionsQuery, + }), + transformResponse: (response: TaskOptionsResult) => { + return { + startComboBoxOptions: response.workflows.page.map( + ({ name: workflowName, description }) => ({ + label: description ?? '', + data: { + workflowName, + }, + }), + ), + }; + }, + }), + }), +}); + +export const { useGetWorkflowOptionsQuery, useGetTaskOptionsQuery } = + startButtonOptionsApi; diff --git a/packages/orchestrator-ui-components/src/types/types.ts b/packages/orchestrator-ui-components/src/types/types.ts index 7f4656a1b..2ce638013 100644 --- a/packages/orchestrator-ui-components/src/types/types.ts +++ b/packages/orchestrator-ui-components/src/types/types.ts @@ -336,6 +336,10 @@ export interface WorkflowDefinitionsResult { workflows: GraphQlResultPage; } +export interface StartButtonOptionsResult { + workflows: GraphQlSinglePage; +} + export interface RelatedSubscriptionsResult { subscriptions: GraphQlSinglePage< Pick & { @@ -344,6 +348,14 @@ export interface RelatedSubscriptionsResult { >; } +export type StartComboBoxOption = { + data: { + workflowName: string; + productId?: string; + }; + label: string; +}; + interface GraphQlResultPage { page: T[]; pageInfo: GraphQLPageInfo; From 3b777a1b12f38ef77b803c37330d9272d4f14198 Mon Sep 17 00:00:00 2001 From: Ruben van Leeuwen Date: Wed, 13 Mar 2024 16:54:19 +0100 Subject: [PATCH 2/7] 702: Add changeset --- .changeset/rich-buttons-bathe.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/rich-buttons-bathe.md diff --git a/.changeset/rich-buttons-bathe.md b/.changeset/rich-buttons-bathe.md new file mode 100644 index 000000000..4451af35b --- /dev/null +++ b/.changeset/rich-buttons-bathe.md @@ -0,0 +1,5 @@ +--- +"@orchestrator-ui/orchestrator-ui-components": patch +--- + +Moves getting startOptions to RTK From e00e29be2cd7eeb0d21705ef47936015e2114655 Mon Sep 17 00:00:00 2001 From: Ruben van Leeuwen Date: Wed, 13 Mar 2024 17:00:39 +0100 Subject: [PATCH 3/7] 702: Remove old queries --- .../workflowsQueryForDropdownList.ts | 38 ------------------- 1 file changed, 38 deletions(-) delete mode 100644 packages/orchestrator-ui-components/src/graphqlQueries/workflows/workflowsQueryForDropdownList.ts diff --git a/packages/orchestrator-ui-components/src/graphqlQueries/workflows/workflowsQueryForDropdownList.ts b/packages/orchestrator-ui-components/src/graphqlQueries/workflows/workflowsQueryForDropdownList.ts deleted file mode 100644 index 907b5efcd..000000000 --- a/packages/orchestrator-ui-components/src/graphqlQueries/workflows/workflowsQueryForDropdownList.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { parse } from 'graphql'; -import { gql } from 'graphql-request'; - -import type { TypedDocumentNode } from '@graphql-typed-document-node/core'; - -import { - GraphqlQueryVariables, - WorkflowDefinition, - WorkflowDefinitionsResult, -} from '../../types'; - -// Avoiding pagination by passing a large number to first. TODO: Fix this better -export const GET_WORKFLOWS_FOR_DROPDOWN_LIST_GRAPHQL_QUERY: TypedDocumentNode< - WorkflowDefinitionsResult, - GraphqlQueryVariables -> = parse(gql` - query StartWorkflows($filterBy: [GraphqlFilter!]) { - workflows(first: 1000000, after: 0, filterBy: $filterBy) { - page { - name - description - products { - productId - name - } - } - pageInfo { - endCursor - hasNextPage - hasPreviousPage - startCursor - totalItems - sortFields - filterFields - } - } - } -`); From 3c53ec5b398f8ab74361e93b117b8f4475081b63 Mon Sep 17 00:00:00 2001 From: Ruben van Leeuwen Date: Thu, 14 Mar 2024 13:28:01 +0100 Subject: [PATCH 4/7] 702: Remove old graphql related dependencies --- package-lock.json | 178 +++++++++++++++++- .../orchestrator-ui-components/package.json | 2 - 2 files changed, 174 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9e5cf6936..ee36a4432 100644 --- a/package-lock.json +++ b/package-lock.json @@ -57,7 +57,6 @@ }, "apps/wfo-ui-surf": { "version": "0.3.6", - "extraneous": true, "dependencies": { "@elastic/datemath": "^5.0.3", "@elastic/eui": "^93.1.1", @@ -96,6 +95,161 @@ "typescript": "^5.3.2" } }, + "apps/wfo-ui-surf/node_modules/@testing-library/jest-dom": { + "version": "6.4.2", + "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.4.2.tgz", + "integrity": "sha512-CzqH0AFymEMG48CpzXFriYYkOjk6ZGPCLMhW9e9jg3KMCn5OfJecF8GtGW7yGfR/IgCe3SX8BSwjdzI6BBbZLw==", + "dev": true, + "dependencies": { + "@adobe/css-tools": "^4.3.2", + "@babel/runtime": "^7.9.2", + "aria-query": "^5.0.0", + "chalk": "^3.0.0", + "css.escape": "^1.5.1", + "dom-accessibility-api": "^0.6.3", + "lodash": "^4.17.15", + "redent": "^3.0.0" + }, + "engines": { + "node": ">=14", + "npm": ">=6", + "yarn": ">=1" + }, + "peerDependencies": { + "@jest/globals": ">= 28", + "@types/bun": "latest", + "@types/jest": ">= 28", + "jest": ">= 28", + "vitest": ">= 0.32" + }, + "peerDependenciesMeta": { + "@jest/globals": { + "optional": true + }, + "@types/bun": { + "optional": true + }, + "@types/jest": { + "optional": true + }, + "jest": { + "optional": true + }, + "vitest": { + "optional": true + } + } + }, + "apps/wfo-ui-surf/node_modules/@types/node": { + "version": "20.11.27", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.27.tgz", + "integrity": "sha512-qyUZfMnCg1KEz57r7pzFtSGt49f6RPkPBis3Vo4PbS7roQEDn22hiHzl/Lo1q4i4hDEgBJmBF/NTNg2XR0HbFg==", + "dev": true, + "dependencies": { + "undici-types": "~5.26.4" + } + }, + "apps/wfo-ui-surf/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "apps/wfo-ui-surf/node_modules/chalk": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz", + "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=8" + } + }, + "apps/wfo-ui-surf/node_modules/dom-accessibility-api": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz", + "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==", + "dev": true + }, + "apps/wfo-ui-surf/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "apps/wfo-ui-surf/node_modules/react-redux": { + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.1.0.tgz", + "integrity": "sha512-6qoDzIO+gbrza8h3hjMA9aq4nwVFCKFtY2iLxCtVT38Swyy2C/dJCGBXHeHLtx6qlg/8qzc2MrhOeduf5K32wQ==", + "dependencies": { + "@types/use-sync-external-store": "^0.0.3", + "use-sync-external-store": "^1.0.0" + }, + "peerDependencies": { + "@types/react": "^18.2.25", + "react": "^18.0", + "react-native": ">=0.69", + "redux": "^5.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "react-native": { + "optional": true + }, + "redux": { + "optional": true + } + } + }, + "apps/wfo-ui-surf/node_modules/redux": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", + "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==", + "optional": true, + "peer": true + }, + "apps/wfo-ui-surf/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "apps/wfo-ui-surf/node_modules/typescript": { + "version": "5.4.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.2.tgz", + "integrity": "sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==", + "dev": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + }, "apps/wfo-ui/node_modules/@testing-library/jest-dom": { "version": "6.4.2", "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.4.2.tgz", @@ -4659,6 +4813,20 @@ "node": ">= 8" } }, + "node_modules/@open-policy-agent/opa-wasm": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/@open-policy-agent/opa-wasm/-/opa-wasm-1.8.1.tgz", + "integrity": "sha512-ywPPMHRYMRwNSW4+fZM4FpGpiVCQLpXPXX47TP4Bdxq61aPNWMe8QQF+/M6F9Vj/ooTyfLOmpymyyirSOhmVjA==", + "dependencies": { + "sprintf-js": "^1.1.2", + "yaml": "^1.10.2" + } + }, + "node_modules/@open-policy-agent/opa-wasm/node_modules/sprintf-js": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz", + "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==" + }, "node_modules/@orchestrator-ui/eslint-config-custom": { "resolved": "packages/eslint-config-custom", "link": true @@ -29277,6 +29445,10 @@ "resolved": "apps/wfo-ui", "link": true }, + "node_modules/wfo-ui-surf": { + "resolved": "apps/wfo-ui-surf", + "link": true + }, "node_modules/whatwg-encoding": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz", @@ -30306,15 +30478,13 @@ }, "packages/orchestrator-ui-components": { "name": "@orchestrator-ui/orchestrator-ui-components", - "version": "1.2.0", + "version": "1.3.1", "license": "MIT", "dependencies": { "@emotion/css": "^11.11.2", "@emotion/react": "^11.11.1", - "@graphql-typed-document-node/core": "3.2.0", "@rtk-query/graphql-request-base-query": "^2.3.1", "axios": "^1.6.5", - "graphql-request": "^6.1.0", "invariant": "^2.2.4", "moment": "^2.29.4", "moment-timezone": "^0.5.43", diff --git a/packages/orchestrator-ui-components/package.json b/packages/orchestrator-ui-components/package.json index a68f8c1ea..b96cd0748 100644 --- a/packages/orchestrator-ui-components/package.json +++ b/packages/orchestrator-ui-components/package.json @@ -14,10 +14,8 @@ "dependencies": { "@emotion/css": "^11.11.2", "@emotion/react": "^11.11.1", - "@graphql-typed-document-node/core": "3.2.0", "@rtk-query/graphql-request-base-query": "^2.3.1", "axios": "^1.6.5", - "graphql-request": "^6.1.0", "invariant": "^2.2.4", "moment": "^2.29.4", "moment-timezone": "^0.5.43", From a1bdeb659d8c63104cc8b6cba8c8143e42345ef6 Mon Sep 17 00:00:00 2001 From: Ruben van Leeuwen Date: Thu, 14 Mar 2024 13:30:58 +0100 Subject: [PATCH 5/7] 702: Remove useQueryWithGraphql hook --- .../src/hooks/index.ts | 1 - .../src/hooks/useQueryWithGraphql.ts | 72 ------------------- 2 files changed, 73 deletions(-) delete mode 100644 packages/orchestrator-ui-components/src/hooks/useQueryWithGraphql.ts diff --git a/packages/orchestrator-ui-components/src/hooks/index.ts b/packages/orchestrator-ui-components/src/hooks/index.ts index ddfab8907..66b9d5d06 100644 --- a/packages/orchestrator-ui-components/src/hooks/index.ts +++ b/packages/orchestrator-ui-components/src/hooks/index.ts @@ -1,5 +1,4 @@ export * from './useCheckEngineStatus'; -export * from './useQueryWithGraphql'; export * from './useMutateProcess'; export * from './useOrchestratorConfig'; export * from './useOrchestratorTheme'; diff --git a/packages/orchestrator-ui-components/src/hooks/useQueryWithGraphql.ts b/packages/orchestrator-ui-components/src/hooks/useQueryWithGraphql.ts deleted file mode 100644 index 928f144c3..000000000 --- a/packages/orchestrator-ui-components/src/hooks/useQueryWithGraphql.ts +++ /dev/null @@ -1,72 +0,0 @@ -import { useContext } from 'react'; -import { UseQueryOptions, useQuery } from 'react-query'; - -import { GraphQLClient } from 'graphql-request'; -import type { Variables } from 'graphql-request/build/esm/types'; - -import { TypedDocumentNode } from '@graphql-typed-document-node/core'; - -import { OrchestratorConfigContext } from '@/contexts'; - -import { useWfoSession } from './useWfoSession'; - -export const useQueryWithGraphql = ( - query: TypedDocumentNode, - queryVars: V, - cacheKeys: string[] | string, - options: UseQueryOptions = {}, -) => { - const { graphqlEndpointCore } = useContext(OrchestratorConfigContext); - const { session } = useWfoSession(); - - const graphQLClient = new GraphQLClient(graphqlEndpointCore); - - const requestHeaders = { - Authorization: session ? `Bearer ${session.accessToken}` : '', - }; - - const fetchFromGraphql = async () => - // TS-Ignore because queryVars does not seem to be accepted by the client - // The props in this useQueryWithGraphql-hook ensures queryVars is indeed related to the query - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - await graphQLClient.request(query, queryVars, requestHeaders); - - const queryKeys = [ - ...(typeof cacheKeys === 'string' ? [cacheKeys] : cacheKeys), - ...Object.values(queryVars), - ]; - - const { error, ...restWithoutError } = useQuery({ - queryKey: queryKeys, - queryFn: fetchFromGraphql, - ...options, - }); - - if (error) { - console.error(error); - } - return restWithoutError; -}; - -export const useQueryWithGraphqlLazy = ( - query: TypedDocumentNode, - queryVars: V, - cacheKeys: string[] | string, - options: UseQueryOptions = {}, -) => { - // Disabling the query prevent the initial fetch - const queryWithGraphql = useQueryWithGraphql(query, queryVars, cacheKeys, { - ...options, - enabled: false, - }); - - // Calling getData fetches the data - return { - getData: async () => { - const result = await queryWithGraphql.refetch(); - return result.data; - }, - ...queryWithGraphql, - }; -}; From 70904834e3be82269085aa821fb277c3de5b16b5 Mon Sep 17 00:00:00 2001 From: Ruben van Leeuwen Date: Thu, 14 Mar 2024 13:36:13 +0100 Subject: [PATCH 6/7] 702: Remove graphql packages from lib --- package-lock.json | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index ee36a4432..3eec3365d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,11 +23,8 @@ "@elastic/eui": "^93.1.1", "@emotion/css": "^11.11.2", "@emotion/react": "^11.11.1", - "@graphql-typed-document-node/core": "3.2.0", "@orchestrator-ui/orchestrator-ui-components": "*", "@reduxjs/toolkit": "^2.0.1", - "graphql": "^16.8.1", - "graphql-request": "^6.1.0", "moment": "^2.29.4", "next": "^14.0.4", "next-auth": "^4.24.5", @@ -62,12 +59,9 @@ "@elastic/eui": "^93.1.1", "@emotion/css": "^11.11.2", "@emotion/react": "^11.11.1", - "@graphql-typed-document-node/core": "3.2.0", "@open-policy-agent/opa-wasm": "^1.2.0", "@orchestrator-ui/orchestrator-ui-components": "*", "@reduxjs/toolkit": "^2.0.1", - "graphql": "^16.8.1", - "graphql-request": "^6.1.0", "moment": "^2.29.4", "next": "^14.0.4", "next-auth": "^4.24.5", @@ -16298,6 +16292,7 @@ "version": "16.8.1", "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.8.1.tgz", "integrity": "sha512-59LZHPdGZVh695Ud9lRzPBVTtlX9ZCV150Er2W43ro37wVof0ctenSaskPPjN7lVTIN8mSZt8PHUNKZuNQUuxw==", + "peer": true, "engines": { "node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0" } From 2fb8305a6bcb680aca03de25d0a828f8572418bd Mon Sep 17 00:00:00 2001 From: Ruben van Leeuwen Date: Fri, 15 Mar 2024 13:51:08 +0100 Subject: [PATCH 7/7] 702: Refactor startOptions rtk client a bit to make it more reusable --- apps/wfo-ui | 2 +- .../WfoStartButton/WfoStartTaskComboBox.tsx | 13 ++- .../WfoStartWorkflowComboBox.tsx | 14 ++- .../src/rtk/endpoints/index.ts | 2 +- .../src/rtk/endpoints/startComboBoxOptions.ts | 96 ------------------ .../src/rtk/endpoints/startOptions.ts | 99 +++++++++++++++++++ .../src/types/types.ts | 2 +- 7 files changed, 125 insertions(+), 103 deletions(-) delete mode 100644 packages/orchestrator-ui-components/src/rtk/endpoints/startComboBoxOptions.ts create mode 100644 packages/orchestrator-ui-components/src/rtk/endpoints/startOptions.ts diff --git a/apps/wfo-ui b/apps/wfo-ui index b0a29b7ad..1ddd2709c 160000 --- a/apps/wfo-ui +++ b/apps/wfo-ui @@ -1 +1 @@ -Subproject commit b0a29b7ade49d247260d852ce935cecce9316d07 +Subproject commit 1ddd2709c6c6fdbc139f73666879afae96ddc7d3 diff --git a/packages/orchestrator-ui-components/src/components/WfoStartButton/WfoStartTaskComboBox.tsx b/packages/orchestrator-ui-components/src/components/WfoStartButton/WfoStartTaskComboBox.tsx index d3a57720a..8bc71a905 100644 --- a/packages/orchestrator-ui-components/src/components/WfoStartButton/WfoStartTaskComboBox.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoStartButton/WfoStartTaskComboBox.tsx @@ -16,7 +16,16 @@ export const WfoStartTaskButtonComboBox = () => { const { isEngineRunningNow } = useCheckEngineStatus(); const { data } = useGetTaskOptionsQuery(); - const taskOptions = data?.startComboBoxOptions || []; + const taskOptions = data?.startOptions || []; + + const comboBoxOptions: StartComboBoxOption[] = taskOptions.map( + (option) => ({ + data: { + workflowName: option.name, + }, + label: option.description || '', + }), + ); const handleOptionChange = async (selectedProduct: StartComboBoxOption) => { if (await isEngineRunningNow()) { @@ -30,7 +39,7 @@ export const WfoStartTaskButtonComboBox = () => { return ( diff --git a/packages/orchestrator-ui-components/src/components/WfoStartButton/WfoStartWorkflowComboBox.tsx b/packages/orchestrator-ui-components/src/components/WfoStartButton/WfoStartWorkflowComboBox.tsx index 337198fad..709b57787 100644 --- a/packages/orchestrator-ui-components/src/components/WfoStartButton/WfoStartWorkflowComboBox.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoStartButton/WfoStartWorkflowComboBox.tsx @@ -16,7 +16,17 @@ export const WfoStartWorkflowButtonComboBox = () => { const { isEngineRunningNow } = useCheckEngineStatus(); const { data } = useGetWorkflowOptionsQuery(); - const workflowOptions = data?.startComboBoxOptions || []; + const workflowOptions = data?.startOptions || []; + + const comboBoxOptions: StartComboBoxOption[] = workflowOptions.map( + (option) => ({ + data: { + workflowName: option.workflowName, + productId: option.productId, + }, + label: option.productName || '', + }), + ); const handleOptionChange = async (selectedProduct: StartComboBoxOption) => { if (await isEngineRunningNow()) { @@ -31,7 +41,7 @@ export const WfoStartWorkflowButtonComboBox = () => { return ( diff --git a/packages/orchestrator-ui-components/src/rtk/endpoints/index.ts b/packages/orchestrator-ui-components/src/rtk/endpoints/index.ts index cb9d3112c..d8e97c098 100644 --- a/packages/orchestrator-ui-components/src/rtk/endpoints/index.ts +++ b/packages/orchestrator-ui-components/src/rtk/endpoints/index.ts @@ -12,4 +12,4 @@ export * from './streamMessages'; export * from './subscriptionDetail'; export * from './subscriptionsDropdownOptions'; export * from './relatedSubscriptions'; -export * from './startComboBoxOptions'; +export * from './startOptions'; diff --git a/packages/orchestrator-ui-components/src/rtk/endpoints/startComboBoxOptions.ts b/packages/orchestrator-ui-components/src/rtk/endpoints/startComboBoxOptions.ts deleted file mode 100644 index af1f1ee40..000000000 --- a/packages/orchestrator-ui-components/src/rtk/endpoints/startComboBoxOptions.ts +++ /dev/null @@ -1,96 +0,0 @@ -import { - ProductDefinition, - StartButtonOptionsResult, - StartComboBoxOption, - WorkflowDefinition, - WorkflowTarget, -} from '@/types'; - -import { orchestratorApi } from '../api'; - -const workflowOptionsQuery = ` - query StartOptions { - workflows(first: 1000000, after: 0, filterBy: [{ field: "target", value: "${WorkflowTarget.CREATE}"}]) { - page { - name - description - products { - productId - name - } - } - } - } -`; - -const taskOptionsQuery = ` - query StartOptions { - workflows(first: 1000000, after: 0, filterBy: [{ field: "target", value: "${WorkflowTarget.SYSTEM}"}]) { - page { - name - description - } - } - } -`; - -export type StartButtonOptionsResponse = { - startComboBoxOptions: StartComboBoxOption[]; -}; - -type WorkflowOptionsResult = StartButtonOptionsResult<{ - name: WorkflowDefinition['name']; - description: WorkflowDefinition['description']; - products: Pick[]; -}>; - -type TaskOptionsResult = StartButtonOptionsResult< - Pick ->; - -const startButtonOptionsApi = orchestratorApi.injectEndpoints({ - endpoints: (build) => ({ - getWorkflowOptions: build.query({ - query: () => ({ - document: workflowOptionsQuery, - }), - transformResponse: (response: WorkflowOptionsResult) => { - return { - startComboBoxOptions: response.workflows.page - .flatMap(({ name: workflowName, products }) => - products.map( - ({ productId, name: productName }) => ({ - label: productName, - data: { - workflowName, - productId, - }, - }), - ), - ) - .sort((a, b) => a.label.localeCompare(b.label)), - }; - }, - }), - getTaskOptions: build.query({ - query: () => ({ - document: taskOptionsQuery, - }), - transformResponse: (response: TaskOptionsResult) => { - return { - startComboBoxOptions: response.workflows.page.map( - ({ name: workflowName, description }) => ({ - label: description ?? '', - data: { - workflowName, - }, - }), - ), - }; - }, - }), - }), -}); - -export const { useGetWorkflowOptionsQuery, useGetTaskOptionsQuery } = - startButtonOptionsApi; diff --git a/packages/orchestrator-ui-components/src/rtk/endpoints/startOptions.ts b/packages/orchestrator-ui-components/src/rtk/endpoints/startOptions.ts new file mode 100644 index 000000000..337dd0b77 --- /dev/null +++ b/packages/orchestrator-ui-components/src/rtk/endpoints/startOptions.ts @@ -0,0 +1,99 @@ +import { + ProductDefinition, + StartOptionsResult, + WorkflowDefinition, + WorkflowTarget, +} from '@/types'; + +import { orchestratorApi } from '../api'; + +const workflowOptionsQuery = ` + query StartOptions { + workflows(first: 1000000, after: 0, filterBy: [{ field: "target", value: "${WorkflowTarget.CREATE}"}]) { + page { + name + products { + productId + name + } + } + } + } +`; + +const taskOptionsQuery = ` + query StartOptions { + workflows(first: 1000000, after: 0, filterBy: [{ field: "target", value: "${WorkflowTarget.SYSTEM}"}]) { + page { + name + description + } + } + } +`; + +type WorkflowOption = { + workflowName: WorkflowDefinition['name']; + productName: ProductDefinition['name']; + productId: ProductDefinition['productId']; +}; + +type WorkflowOptionsResult = StartOptionsResult<{ + name: WorkflowDefinition['name']; + products: { + name: ProductDefinition['name']; + productId: ProductDefinition['productId']; + }[]; +}>; + +export type StartOptionsResponse = { + startOptions: StartOption[]; +}; + +type TaskOption = Pick; +type TaskOptionsResult = StartOptionsResult; + +const startButtonOptionsApi = orchestratorApi.injectEndpoints({ + endpoints: (build) => ({ + getWorkflowOptions: build.query< + StartOptionsResponse, + void + >({ + query: () => ({ + document: workflowOptionsQuery, + }), + transformResponse: (response: WorkflowOptionsResult) => { + const startOptions: WorkflowOption[] = []; + const workflows = response.workflows?.page || []; + workflows.forEach((workflow) => { + const workflowName = workflow.name; + workflow.products.forEach((product) => { + startOptions.push({ + workflowName, + productName: product.name, + productId: product.productId, + }); + }); + }); + + return { startOptions }; + }, + }), + getTaskOptions: build.query, void>({ + query: () => ({ + document: taskOptionsQuery, + }), + transformResponse: (response: TaskOptionsResult) => { + return { + startOptions: response.workflows.page.map((option) => ({ + name: option.name, + description: option.description, + })), + }; + }, + }), + }), +}); + +export const { useGetWorkflowOptionsQuery, useGetTaskOptionsQuery } = + startButtonOptionsApi; diff --git a/packages/orchestrator-ui-components/src/types/types.ts b/packages/orchestrator-ui-components/src/types/types.ts index 2ce638013..510adeea2 100644 --- a/packages/orchestrator-ui-components/src/types/types.ts +++ b/packages/orchestrator-ui-components/src/types/types.ts @@ -336,7 +336,7 @@ export interface WorkflowDefinitionsResult { workflows: GraphQlResultPage; } -export interface StartButtonOptionsResult { +export interface StartOptionsResult { workflows: GraphQlSinglePage; }