Merge branch 'develop' into feat/custom-headers-for-modal

splunk · Jan 30, 2025 · 48d6f5e · 48d6f5e
2 parents e43131d + 742b405
commit 48d6f5e
Show file tree

Hide file tree

Showing 9 changed files with 139 additions and 59 deletions.
diff --git a/.github/workflows/build-test-release.yml b/.github/workflows/build-test-release.yml
@@ -483,9 +483,8 @@ jobs:
       - uses: actions/setup-python@v5
         with:
           python-version: "3.7"
-      - uses: actions/setup-node@v4
-        with:
-          registry-url: "https://registry.npmjs.org"
+      - name: install UI deps
+        uses: ./.github/actions/cached-ui-deps
       - run: curl -sSL https://install.python-poetry.org | python3 - --version 1.5.1
       - uses: actions/download-artifact@v4
         with:
@@ -515,9 +514,9 @@ jobs:
           poetry build
           poetry publish -n -u ${{ secrets.PYPI_USERNAME }} -p ${{ secrets.PYPI_TOKEN }}
       - if: ${{ steps.semantic.outputs.new_release_published == 'true' }}
-        name: Publish NPM (dry-run)
+        name: Publish NPM
         run: |
           cd ui          
-          npm publish --provenance --access public --dry-run || true
+          npm publish --provenance --access public
         env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.github/workflows/build-ui.yml b/.github/workflows/build-ui.yml
@@ -3,7 +3,7 @@ on:
   workflow_call:
 
 jobs:
-  build-ui:
+  ui-code-check:
     runs-on: ubuntu-22.04
     defaults:
       run:
@@ -17,6 +17,26 @@ jobs:
         run: yarn run lint
       - name: Unit test
         run: yarn run test
+      - name: Build lib and publish dry run
+        run: npm publish --provenance --access public --dry-run
+      - name: Pack tarball
+        run: npm pack
+      - name: Upload tarball as artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: UCC-UI-lib-tarball
+          path: "ui/*.tgz"
+
+  build-ui:
+    runs-on: ubuntu-22.04
+    defaults:
+      run:
+        working-directory: ui
+        shell: bash
+    steps:
+      - uses: actions/checkout@v4
+      - name: install deps
+        uses: ./.github/actions/cached-ui-deps
       - name: Build UCC library
         run: yarn run build:lib
       - name: Build UCC UI
@@ -27,4 +47,4 @@ jobs:
         uses: actions/upload-artifact@v4
         with:
           name: UCC-UI-build
-          path: ui/dist/
+          path: ui/dist/
diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml
@@ -0,0 +1,39 @@
+name: NPM Publish
+
+on:
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: "Git tag to publish"
+        required: true
+      dry_run:
+        description: "Perform a dry run of the npm publish"
+        required: false
+        default: true
+        type: boolean
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ui
+        shell: bash
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.tag }}
+
+      - name: Install deps
+        uses: ./.github/actions/cached-ui-deps
+
+      - name: Publish NPM package
+        run: |
+          if [ "${{ github.event.inputs.dry_run }}" = "true" ]; then
+            npm publish --provenance --access public --dry-run
+          else
+            npm publish --provenance --access public
+          fi
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/tests/ui/conftest.py b/tests/ui/conftest.py
@@ -32,7 +32,8 @@ def pytest_runtest_call(item: pytest.Item) -> Iterator[Any]:
 
     yield
 
-    IGNORED: List[str] = []
+    # sometimes RUM is down and we get a lot of severe logs
+    IGNORED: List[str] = ["https://rum-ingest.us1.signalfx.com"]
 
     browser_logs = s_utils.get_browser_logs(item.selenium_helper.browser)
     severe_logs = [

diff --git a/ui/src/components/CustomControl/CustomControl.test.tsx b/ui/src/components/CustomControl/CustomControl.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import CustomControl from './CustomControl';
@@ -18,48 +18,58 @@ const mockClearErrorMsg = jest.fn();
 
 const FIELD_NAME = 'testCustomField';
 
-beforeEach(() => {
+const setup = async () => {
     const mockConfig = getGlobalConfigMock();
     setUnifiedConfig(mockConfig);
 
     jest.mock(`${getBuildDirPath()}/custom/${MODULE}.js`, () => mockCustomControlMockForTest, {
         virtual: true,
     });
 
-    render(
-        <CustomControl
-            data={{
-                value: 'input_default',
-                mode: 'create',
-                serviceName: 'serviceName',
-            }}
-            field={FIELD_NAME}
-            handleChange={handleChange}
-            controlOptions={{
-                src: MODULE,
-                type: 'external',
-            }}
-            addCustomValidator={addingCustomValidation}
-            utilCustomFunctions={{
-                setState: mockSetState,
-                setErrorFieldMsg: mockSetErrorFieldMsg,
-                clearAllErrorMsg: mockClearErrorMsg,
-                setErrorMsg: mockSetErrorMsg,
-            }}
-        />
-    );
-});
+    await act(async () => {
+        render(
+            <CustomControl
+                data={{
+                    value: 'input_default',
+                    mode: 'create',
+                    serviceName: 'serviceName',
+                }}
+                field={FIELD_NAME}
+                handleChange={handleChange}
+                controlOptions={{
+                    src: MODULE,
+                    type: 'external',
+                }}
+                addCustomValidator={addingCustomValidation}
+                utilCustomFunctions={{
+                    setState: mockSetState,
+                    setErrorFieldMsg: mockSetErrorFieldMsg,
+                    clearAllErrorMsg: mockClearErrorMsg,
+                    setErrorMsg: mockSetErrorMsg,
+                }}
+            />
+        );
+
+        const loading = screen.queryByText('Loading...');
+        if (loading) {
+            await waitFor(() => expect(loading).not.toHaveTextContent('Loading...'));
+        }
+    });
+};
 
 it('should render custom component correctly', async () => {
+    await setup();
     const renderedModal = await screen.findByTestId('customSelect');
     expect(renderedModal).toBeInTheDocument();
 });
 
 it('should try to add validator', async () => {
+    await setup();
     expect(addingCustomValidation).toHaveBeenCalled();
 });
 
 it('should correctly call handler on change', async () => {
+    await setup();
     const selectElem = document.querySelector('select');
     expect(selectElem).toBeInTheDocument();
     const SELECTED_OPTION = 'input_one';

diff --git a/ui/src/components/EntityModal/EntityModal.test.tsx b/ui/src/components/EntityModal/EntityModal.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { http, HttpResponse } from 'msw';
 import EntityModal, { EntityModalProps } from './EntityModal';
@@ -491,12 +491,12 @@ describe('Oauth - separated endpoint authorization', () => {
 
         // triggering manually external oauth window behaviour after success authorization
         const code = '200';
-        window.getMessage({ code, state: stateCodeFromUrl, error: undefined });
-
-        await waitFor(async () => {
-            expect(requestHandler).toHaveBeenCalledTimes(1);
+        await act(async () => {
+            window.getMessage({ code, state: stateCodeFromUrl, error: undefined });
         });
 
+        expect(requestHandler).toHaveBeenCalledTimes(1);
+
         const receivedRequest: Request = requestHandler.mock.calls[0][0];
         const receivedBody = await receivedRequest.text();
 
@@ -534,7 +534,9 @@ describe('Oauth - separated endpoint authorization', () => {
         // triggering manually external oauth window behaviour after success authorization
         const code = '200';
         const passedState = `tests${stateCodeFromUrl}`;
-        window.getMessage({ code, state: passedState, error: undefined });
+        await act(async () => {
+            window.getMessage({ code, state: passedState, error: undefined });
+        });
 
         expect(screen.getByText(ERROR_STATE_MISSING_TRY_AGAIN)).toBeInTheDocument();
     });

diff --git a/ui/src/components/InteractAllStatusButton.test.tsx b/ui/src/components/InteractAllStatusButton.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { render, screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
 import { InputRowData, InteractAllStatusButtons } from './InteractAllStatusButton';
 
 describe('InteractAllStatusButtons', () => {
@@ -95,15 +96,16 @@ describe('InteractAllStatusButtons', () => {
     });
 
     it('Deactivate All enabled rows correctly', async () => {
+        const user = userEvent.setup();
         const disableBtn = await screen.findByText('Deactivate all');
         expect(disableBtn).toBeInTheDocument();
 
-        disableBtn.click();
+        await user.click(disableBtn);
 
         const yesPopUpBtn = await screen.findByText('Yes');
         expect(yesPopUpBtn).toBeInTheDocument();
 
-        yesPopUpBtn.click();
+        await user.click(yesPopUpBtn);
 
         expect(handleToggleStatusChange).toHaveBeenCalledWith(
             allDataRowsMockUp.find((x) => x.name === 'aaaaa')
@@ -118,15 +120,16 @@ describe('InteractAllStatusButtons', () => {
     });
 
     it('Activate All disabled rows correctly', async () => {
+        const user = userEvent.setup();
         const enableBtn = await screen.findByText('Activate all');
         expect(enableBtn).toBeInTheDocument();
 
-        enableBtn.click();
+        await user.click(enableBtn);
 
         const yesPopUpBtn = await screen.findByText('Yes');
         expect(yesPopUpBtn).toBeInTheDocument();
 
-        yesPopUpBtn.click();
+        await user.click(yesPopUpBtn);
 
         expect(handleToggleStatusChange).toHaveBeenCalledWith(
             allDataRowsMockUp.find((x) => x.name === 'cccccc')
@@ -141,57 +144,61 @@ describe('InteractAllStatusButtons', () => {
     });
 
     it('Do not disable status if rejected', async () => {
+        const user = userEvent.setup();
         const disableBtn = await screen.findByText('Deactivate all');
         expect(disableBtn).toBeInTheDocument();
 
-        disableBtn.click();
+        await user.click(disableBtn);
 
         const noPopUpBtn = await screen.findByText('No');
         expect(noPopUpBtn).toBeInTheDocument();
 
-        noPopUpBtn.click();
+        await user.click(noPopUpBtn);
 
         expect(handleToggleStatusChange).toHaveBeenCalledTimes(0);
     });
 
     it('Do not enable status if rejected', async () => {
+        const user = userEvent.setup();
         const enableBtn = await screen.findByText('Activate all');
         expect(enableBtn).toBeInTheDocument();
 
-        enableBtn.click();
+        await user.click(enableBtn);
 
         const noPopUpBtn = await screen.findByText('No');
         expect(noPopUpBtn).toBeInTheDocument();
 
-        noPopUpBtn.click();
+        await user.click(noPopUpBtn);
 
         expect(handleToggleStatusChange).toHaveBeenCalledTimes(0);
     });
 
     it('Do not enable status if popup modal closed by X', async () => {
+        const user = userEvent.setup();
         const enableBtn = await screen.findByText('Activate all');
         expect(enableBtn).toBeInTheDocument();
 
-        enableBtn.click();
+        await user.click(enableBtn);
 
         const closeXBtn = screen.getByTestId('close');
         expect(closeXBtn).toBeInTheDocument();
 
-        closeXBtn.click();
+        await user.click(closeXBtn);
 
         expect(handleToggleStatusChange).toHaveBeenCalledTimes(0);
     });
 
     it('Do not disable status if popup modal closed by X', async () => {
+        const user = userEvent.setup();
         const disableBtn = await screen.findByText('Deactivate all');
         expect(disableBtn).toBeInTheDocument();
 
-        disableBtn.click();
+        await user.click(disableBtn);
 
         const closeXBtn = screen.getByTestId('close');
         expect(closeXBtn).toBeInTheDocument();
 
-        closeXBtn.click();
+        await user.click(closeXBtn);
 
         expect(handleToggleStatusChange).toHaveBeenCalledTimes(0);
     });

diff --git a/ui/src/components/table/tests/CustomTableRow.test.tsx b/ui/src/components/table/tests/CustomTableRow.test.tsx
@@ -1,4 +1,5 @@
 import { render, screen, within } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
 import React from 'react';
 
 import { BrowserRouter } from 'react-router-dom';
@@ -52,7 +53,8 @@ it('Render action icons correctly', async () => {
 });
 
 it('Correctly call action handlers for page dialog', async () => {
-    (await screen.findAllByRole('button', { name: /edit/i }))[0].click();
+    const user = userEvent.setup();
+    await user.click((await screen.findAllByRole('button', { name: /edit/i }))[0]);
 
     expect(handleOpenPageStyleDialog).toHaveBeenCalledWith(expect.objectContaining({}), 'edit');
 
@@ -66,8 +68,9 @@ it('Correctly call action handlers for page dialog', async () => {
 });
 
 it('Correctly render modal for delete action click', async () => {
+    const user = userEvent.setup();
     // Clicking delete renders modal
-    (await screen.findAllByRole('button', { name: /delete/i }))[0].click();
+    await user.click((await screen.findAllByRole('button', { name: /delete/i }))[0]);
 
     expect(await screen.findByRole('dialog')).toHaveTextContent('Delete Confirmation');
 });