kie-tools#2428: [serverless-workflow-dev-ui-webapp] The reload button doesn't fetch data (#2478)
diff --git a/packages/runtime-tools-swf-enveloped-components/jest.config.js b/packages/runtime-tools-swf-enveloped-components/jest.config.js
index e2963bb..b4ae717 100644
--- a/packages/runtime-tools-swf-enveloped-components/jest.config.js
+++ b/packages/runtime-tools-swf-enveloped-components/jest.config.js
@@ -17,14 +17,25 @@
* under the License.
*/
-const { config, babelTransform, typescriptTransform } = require("@kie-tools/jest-base/jest.config");
+const {
+ styleMock,
+ config,
+ babelTransform,
+ typescriptTransform,
+ jestSetupPath,
+} = require("@kie-tools/jest-base/jest.config");
/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
...config,
testEnvironment: "jsdom",
+ moduleNameMapper: {
+ ...styleMock,
+ },
transform: {
...babelTransform,
...typescriptTransform,
},
+ transformIgnorePatterns: [],
+ setupFilesAfterEnv: [jestSetupPath],
};
diff --git a/packages/runtime-tools-swf-enveloped-components/package.json b/packages/runtime-tools-swf-enveloped-components/package.json
index c8e25d1..3057495 100644
--- a/packages/runtime-tools-swf-enveloped-components/package.json
+++ b/packages/runtime-tools-swf-enveloped-components/package.json
@@ -70,6 +70,7 @@
"@kie-tools/root-env": "workspace:*",
"@kie-tools/tsconfig": "workspace:*",
"@testing-library/jest-dom": "^6.4.6",
+ "@testing-library/react": "^12.1.5",
"@types/babel__standalone": "^7.1.7",
"@types/jest": "^29.5.12",
"@types/jest-when": "^3.5.5",
diff --git a/packages/runtime-tools-swf-enveloped-components/src/workflowDefinitions/envelope/components/WorkflowDefinitionList/WorkflowDefinitionList.tsx b/packages/runtime-tools-swf-enveloped-components/src/workflowDefinitions/envelope/components/WorkflowDefinitionList/WorkflowDefinitionList.tsx
index 3daf331..b8ebf75 100644
--- a/packages/runtime-tools-swf-enveloped-components/src/workflowDefinitions/envelope/components/WorkflowDefinitionList/WorkflowDefinitionList.tsx
+++ b/packages/runtime-tools-swf-enveloped-components/src/workflowDefinitions/envelope/components/WorkflowDefinitionList/WorkflowDefinitionList.tsx
@@ -45,6 +45,18 @@
const [filterWorkflowNames, setFilterWorkflowNames] = useState<string[]>([]);
const [error, setError] = useState<string>();
+ const doQuery = async (): Promise<void> => {
+ try {
+ const response: WorkflowDefinition[] = await driver.getWorkflowDefinitionsQuery();
+ setWorkflowDefinitionList(response);
+ setIsLoading(false);
+ } catch (err) {
+ setError(err.errorMessage);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
useEffect(() => {
if (!isEnvelopeConnectedToChannel) {
setIsLoading(true);
@@ -57,16 +69,9 @@
}, [isEnvelopeConnectedToChannel]);
const init = async (): Promise<void> => {
- try {
- const response = await driver.getWorkflowDefinitionsQuery();
- const workflowDefinitionFilter = await driver.getWorkflowDefinitionFilter();
- setFilterWorkflowNames(workflowDefinitionFilter);
- setWorkflowDefinitionList(response);
- setIsLoading(false);
- } catch (errorContent) {
- setError(errorContent);
- }
+ doQuery();
};
+
const columns: DataTableColumn[] = [
getColumn("workflowName", `Workflow Name`),
getColumn("endpoint", "Endpoint"),
@@ -84,6 +89,11 @@
await driver.setWorkflowDefinitionFilter(filterWorkflowNames);
};
+ const doRefresh = async (): Promise<void> => {
+ setIsLoading(true);
+ doQuery();
+ };
+
const filterWorkflowDefinition = (): WorkflowDefinition[] => {
if (filterWorkflowNames.length === 0) {
return workflowDefinitionList;
@@ -109,6 +119,7 @@
filterWorkflowNames={filterWorkflowNames}
setFilterWorkflowNames={setFilterWorkflowNames}
applyFilter={applyFilter}
+ doRefresh={doRefresh}
/>
<Divider />
<DataTable
diff --git a/packages/runtime-tools-swf-enveloped-components/src/workflowDefinitions/envelope/components/WorkflowDefinitionListToolbar/WorkflowDefinitionListToolbar.tsx b/packages/runtime-tools-swf-enveloped-components/src/workflowDefinitions/envelope/components/WorkflowDefinitionListToolbar/WorkflowDefinitionListToolbar.tsx
index 1bc51c1..40cc1dc 100644
--- a/packages/runtime-tools-swf-enveloped-components/src/workflowDefinitions/envelope/components/WorkflowDefinitionListToolbar/WorkflowDefinitionListToolbar.tsx
+++ b/packages/runtime-tools-swf-enveloped-components/src/workflowDefinitions/envelope/components/WorkflowDefinitionListToolbar/WorkflowDefinitionListToolbar.tsx
@@ -39,6 +39,7 @@
setFilterWorkflowNames: React.Dispatch<React.SetStateAction<string[]>>;
applyFilter: () => void;
onOpenTriggerCloudEvent?: () => void;
+ doRefresh: () => void;
}
enum Category {
@@ -52,6 +53,7 @@
onOpenTriggerCloudEvent,
ouiaSafe,
ouiaId,
+ doRefresh,
}) => {
const [workflowNameInput, setWorkflowNameInput] = useState<string>("");
@@ -60,11 +62,6 @@
setFilterWorkflowNames([]);
};
- const doRefresh = (): void => {
- setFilterWorkflowNames([...filterWorkflowNames]);
- applyFilter();
- };
-
const onEnterClicked = (event: React.KeyboardEvent<EventTarget>): void => {
/* istanbul ignore else */
if (event.key === "Enter") {
@@ -112,6 +109,7 @@
onKeyPress={onEnterClicked}
placeholder={`Filter by workflow name`}
value={workflowNameInput}
+ data-testid="workflow-filter-input"
/>
</InputGroup>
</ToolbarFilter>
diff --git a/packages/runtime-tools-swf-enveloped-components/tests/__mocks__/styleMock.js b/packages/runtime-tools-swf-enveloped-components/tests/__mocks__/styleMock.js
new file mode 100644
index 0000000..4bd9391
--- /dev/null
+++ b/packages/runtime-tools-swf-enveloped-components/tests/__mocks__/styleMock.js
@@ -0,0 +1,20 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+module.exports = {};
diff --git a/packages/runtime-tools-swf-enveloped-components/tests/components/WorkflowDefinitionList.test.tsx b/packages/runtime-tools-swf-enveloped-components/tests/components/WorkflowDefinitionList.test.tsx
new file mode 100644
index 0000000..6226790
--- /dev/null
+++ b/packages/runtime-tools-swf-enveloped-components/tests/components/WorkflowDefinitionList.test.tsx
@@ -0,0 +1,90 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import * as React from "react";
+import { render, waitFor, screen, fireEvent, act } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import WorkflowDefinitionList from "@kie-tools/runtime-tools-swf-enveloped-components/dist/workflowDefinitions/envelope/components/WorkflowDefinitionList/WorkflowDefinitionList";
+
+const mockDriver = {
+ getWorkflowDefinitionsQuery: jest.fn(),
+ openWorkflowForm: jest.fn(),
+ openTriggerCloudEvent: jest.fn(),
+ setWorkflowDefinitionFilter: jest.fn(),
+ getWorkflowDefinitionFilter: jest.fn(),
+};
+
+const sampleWorkflowDefinitions = [
+ { workflowName: "Test Workflow 1", endpoint: "/endpoint1", serviceUrl: "http://example.com/1" },
+ { workflowName: "Test Workflow 2", endpoint: "/endpoint2", serviceUrl: "http://example.com/2" },
+];
+
+describe("WorkflowDefinitionList component", () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ test("should fetch and set workflow definitions correctly", async () => {
+ mockDriver.getWorkflowDefinitionsQuery.mockResolvedValue(sampleWorkflowDefinitions);
+ const component = render(
+ <WorkflowDefinitionList
+ isEnvelopeConnectedToChannel={true}
+ driver={mockDriver}
+ ouiaId="test-ouia-id"
+ ouiaSafe={true}
+ />
+ );
+
+ await waitFor(() => {
+ expect(mockDriver.getWorkflowDefinitionsQuery).toHaveBeenCalled();
+ expect(component.queryByText("Test Workflow 1")).toBeInTheDocument();
+ expect(component.queryByText("Test Workflow 2")).toBeInTheDocument();
+ });
+ });
+
+ test("should maintain filter after refresh", async () => {
+ mockDriver.getWorkflowDefinitionsQuery.mockResolvedValue(sampleWorkflowDefinitions);
+
+ const component = render(
+ <WorkflowDefinitionList
+ isEnvelopeConnectedToChannel={true}
+ driver={mockDriver}
+ ouiaId="test-ouia-id"
+ ouiaSafe={true}
+ />
+ );
+
+ await (async () => {
+ await mockDriver.setWorkflowDefinitionFilter();
+ });
+
+ expect(component.queryByText("Test Workflow 1")).toBeInTheDocument();
+ expect(component.queryByText("Test Workflow 2")).toBeInTheDocument();
+
+ fireEvent.change(component.getByTestId("workflow-filter-input"), {
+ target: { value: "Test Workflow 1" },
+ });
+
+ fireEvent.click(component.getByTestId("apply-filter"));
+ expect(component.queryByText("Test Workflow 2")).not.toBeInTheDocument();
+
+ fireEvent.click(component.getByTestId("refresh"));
+ expect(component.queryByText("Test Workflow 2")).not.toBeInTheDocument();
+ });
+});
diff --git a/packages/runtime-tools-swf-enveloped-components/tests/jest.setup.ts b/packages/runtime-tools-swf-enveloped-components/tests/jest.setup.ts
new file mode 100644
index 0000000..1c413b1
--- /dev/null
+++ b/packages/runtime-tools-swf-enveloped-components/tests/jest.setup.ts
@@ -0,0 +1,20 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import "@testing-library/jest-dom";
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f993eb7..993df03 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8217,6 +8217,9 @@
'@testing-library/jest-dom':
specifier: ^6.4.6
version: 6.4.6(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@22.0.2)(node-notifier@8.0.2)(ts-node@10.9.2(@types/node@22.0.2)(typescript@5.5.3)))
+ '@testing-library/react':
+ specifier: ^12.1.5
+ version: 12.1.5(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
'@types/babel__standalone':
specifier: ^7.1.7
version: 7.1.7
@@ -29136,7 +29139,7 @@
dependencies:
'@ampproject/remapping': 2.3.0
'@angular-devkit/architect': 0.1801.3(chokidar@3.6.0)
- '@angular-devkit/build-webpack': 0.1801.3(chokidar@3.6.0)(webpack-dev-server@5.0.4(webpack@5.92.1))(webpack@5.92.1(esbuild@0.21.5))
+ '@angular-devkit/build-webpack': 0.1801.3(chokidar@3.6.0)(webpack-dev-server@5.0.4(webpack@5.92.1))(webpack@5.92.1)
'@angular-devkit/core': 18.1.3(chokidar@3.6.0)
'@angular/build': 18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.5.2)(zone.js@0.14.8)))(typescript@5.5.3))(@types/node@22.0.2)(chokidar@3.6.0)(less@4.2.0)(postcss@8.4.38)(stylus@0.59.0)(terser@5.29.2)(typescript@5.5.3)
'@angular/compiler-cli': 18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.5.2)(zone.js@0.14.8)))(typescript@5.5.3)
@@ -29150,15 +29153,15 @@
'@babel/preset-env': 7.24.7(@babel/core@7.24.7)
'@babel/runtime': 7.24.7
'@discoveryjs/json-ext': 0.5.7
- '@ngtools/webpack': 18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.5.2)(zone.js@0.14.8)))(typescript@5.5.3))(typescript@5.5.3)(webpack@5.92.1(esbuild@0.21.5))
+ '@ngtools/webpack': 18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.5.2)(zone.js@0.14.8)))(typescript@5.5.3))(typescript@5.5.3)(webpack@5.92.1)
'@vitejs/plugin-basic-ssl': 1.1.0(vite@5.3.2(@types/node@22.0.2)(less@4.2.0)(sass@1.77.6)(stylus@0.59.0)(terser@5.29.2))
ansi-colors: 4.1.3
autoprefixer: 10.4.19(postcss@8.4.38)
- babel-loader: 9.1.3(@babel/core@7.24.7)(webpack@5.92.1(esbuild@0.21.5))
+ babel-loader: 9.1.3(@babel/core@7.24.7)(webpack@5.92.1)
browserslist: 4.23.0
- copy-webpack-plugin: 12.0.2(webpack@5.92.1(esbuild@0.21.5))
+ copy-webpack-plugin: 12.0.2(webpack@5.92.1)
critters: 0.0.24
- css-loader: 7.1.2(webpack@5.92.1(esbuild@0.21.5))
+ css-loader: 7.1.2(webpack@5.92.1)
esbuild-wasm: 0.21.5
fast-glob: 3.3.2
http-proxy-middleware: 3.0.0
@@ -29167,11 +29170,11 @@
jsonc-parser: 3.3.1
karma-source-map-support: 1.4.0
less: 4.2.0
- less-loader: 12.2.0(less@4.2.0)(webpack@5.92.1(esbuild@0.21.5))
- license-webpack-plugin: 4.0.2(webpack@5.92.1(esbuild@0.21.5))
+ less-loader: 12.2.0(less@4.2.0)(webpack@5.92.1)
+ license-webpack-plugin: 4.0.2(webpack@5.92.1)
loader-utils: 3.3.1
magic-string: 0.30.10
- mini-css-extract-plugin: 2.9.0(webpack@5.92.1(esbuild@0.21.5))
+ mini-css-extract-plugin: 2.9.0(webpack@5.92.1)
mrmime: 2.0.0
open: 10.1.0
ora: 5.4.1
@@ -29179,13 +29182,13 @@
picomatch: 4.0.2
piscina: 4.6.1
postcss: 8.4.38
- postcss-loader: 8.1.1(postcss@8.4.38)(typescript@5.5.3)(webpack@5.92.1(esbuild@0.21.5))
+ postcss-loader: 8.1.1(postcss@8.4.38)(typescript@5.5.3)(webpack@5.92.1)
resolve-url-loader: 5.0.0
rxjs: 7.8.1
sass: 1.77.6
- sass-loader: 14.2.1(sass@1.77.6)(webpack@5.92.1(esbuild@0.21.5))
+ sass-loader: 14.2.1(sass@1.77.6)(webpack@5.92.1)
semver: 7.6.2
- source-map-loader: 5.0.0(webpack@5.92.1(esbuild@0.21.5))
+ source-map-loader: 5.0.0(webpack@5.92.1)
source-map-support: 0.5.21
terser: 5.29.2
tree-kill: 1.2.2
@@ -29198,7 +29201,7 @@
webpack-dev-middleware: 7.2.1(webpack@5.92.1)
webpack-dev-server: 5.0.4(webpack@5.92.1)
webpack-merge: 5.10.0
- webpack-subresource-integrity: 5.1.0(html-webpack-plugin@5.5.3(webpack@5.92.1))(webpack@5.92.1(esbuild@0.21.5))
+ webpack-subresource-integrity: 5.1.0(html-webpack-plugin@5.5.3(webpack@5.92.1))(webpack@5.92.1)
optionalDependencies:
esbuild: 0.21.5
jest: 29.7.0(@types/node@22.0.2)
@@ -29222,7 +29225,7 @@
- utf-8-validate
- webpack-cli
- '@angular-devkit/build-webpack@0.1801.3(chokidar@3.6.0)(webpack-dev-server@5.0.4(webpack@5.92.1))(webpack@5.92.1(esbuild@0.21.5))':
+ '@angular-devkit/build-webpack@0.1801.3(chokidar@3.6.0)(webpack-dev-server@5.0.4(webpack@5.92.1))(webpack@5.92.1)':
dependencies:
'@angular-devkit/architect': 0.1801.3(chokidar@3.6.0)
rxjs: 7.8.1
@@ -36235,7 +36238,7 @@
pump: 3.0.0
tar-fs: 2.1.1
- '@ngtools/webpack@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.5.2)(zone.js@0.14.8)))(typescript@5.5.3))(typescript@5.5.3)(webpack@5.92.1(esbuild@0.21.5))':
+ '@ngtools/webpack@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.5.2)(zone.js@0.14.8)))(typescript@5.5.3))(typescript@5.5.3)(webpack@5.92.1)':
dependencies:
'@angular/compiler-cli': 18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.5.2)(zone.js@0.14.8)))(typescript@5.5.3)
typescript: 5.5.3
@@ -42281,7 +42284,7 @@
schema-utils: 4.2.0
webpack: 5.88.2(webpack-cli@4.10.0)
- babel-loader@9.1.3(@babel/core@7.24.7)(webpack@5.92.1(esbuild@0.21.5)):
+ babel-loader@9.1.3(@babel/core@7.24.7)(webpack@5.92.1):
dependencies:
'@babel/core': 7.24.7
find-cache-dir: 4.0.0
@@ -43629,7 +43632,7 @@
serialize-javascript: 6.0.1
webpack: 5.88.2
- copy-webpack-plugin@12.0.2(webpack@5.92.1(esbuild@0.21.5)):
+ copy-webpack-plugin@12.0.2(webpack@5.92.1):
dependencies:
fast-glob: 3.3.2
glob-parent: 6.0.2
@@ -44010,7 +44013,7 @@
semver: 7.5.4
webpack: 5.88.2(@swc/core@1.3.92)(webpack-cli@4.10.0(webpack-dev-server@4.15.1)(webpack@5.88.2))
- css-loader@7.1.2(webpack@5.92.1(esbuild@0.21.5)):
+ css-loader@7.1.2(webpack@5.92.1):
dependencies:
icss-utils: 5.1.0(postcss@8.4.38)
postcss: 8.4.38
@@ -48733,7 +48736,7 @@
dependencies:
readable-stream: 2.3.7
- less-loader@12.2.0(less@4.2.0)(webpack@5.92.1(esbuild@0.21.5)):
+ less-loader@12.2.0(less@4.2.0)(webpack@5.92.1):
dependencies:
less: 4.2.0
optionalDependencies:
@@ -48762,7 +48765,7 @@
prelude-ls: 1.2.1
type-check: 0.4.0
- license-webpack-plugin@4.0.2(webpack@5.92.1(esbuild@0.21.5)):
+ license-webpack-plugin@4.0.2(webpack@5.92.1):
dependencies:
webpack-sources: 3.2.3
optionalDependencies:
@@ -49221,7 +49224,7 @@
tapable: 2.2.1
webpack: 5.88.2(@swc/core@1.3.92)(webpack-cli@4.10.0)
- mini-css-extract-plugin@2.9.0(webpack@5.92.1(esbuild@0.21.5)):
+ mini-css-extract-plugin@2.9.0(webpack@5.92.1):
dependencies:
schema-utils: 4.2.0
tapable: 2.2.1
@@ -49624,7 +49627,7 @@
dependencies:
growly: 1.3.0
is-wsl: 2.2.0
- semver: 7.5.4
+ semver: 7.6.2
shellwords: 0.1.1
uuid: 8.3.2
which: 2.0.2
@@ -50463,7 +50466,7 @@
dependencies:
postcss: 8.4.38
- postcss-loader@8.1.1(postcss@8.4.38)(typescript@5.5.3)(webpack@5.92.1(esbuild@0.21.5)):
+ postcss-loader@8.1.1(postcss@8.4.38)(typescript@5.5.3)(webpack@5.92.1):
dependencies:
cosmiconfig: 9.0.0(typescript@5.5.3)
jiti: 1.21.6
@@ -51990,7 +51993,7 @@
optionalDependencies:
sass: 1.77.6
- sass-loader@14.2.1(sass@1.77.6)(webpack@5.92.1(esbuild@0.21.5)):
+ sass-loader@14.2.1(sass@1.77.6)(webpack@5.92.1):
dependencies:
neo-async: 2.6.2
optionalDependencies:
@@ -52412,7 +52415,7 @@
source-map-js: 0.6.2
webpack: 5.88.2
- source-map-loader@5.0.0(webpack@5.92.1(esbuild@0.21.5)):
+ source-map-loader@5.0.0(webpack@5.92.1):
dependencies:
iconv-lite: 0.6.3
source-map-js: 1.2.0
@@ -54768,7 +54771,7 @@
webpack-sources@3.2.3: {}
- webpack-subresource-integrity@5.1.0(html-webpack-plugin@5.5.3(webpack@5.92.1))(webpack@5.92.1(esbuild@0.21.5)):
+ webpack-subresource-integrity@5.1.0(html-webpack-plugin@5.5.3(webpack@5.92.1))(webpack@5.92.1):
dependencies:
typed-assert: 1.0.8
webpack: 5.92.1(esbuild@0.21.5)
