feat(configuration): display UCC version

splunk_add_on_ucc_framework/schema/schema.json

@@ -1686,6 +1686,10 @@
           "type": "string",
           "description": "Version of UCC used during build process"
         },
+        "hideUCCVersion": {
+          "type": "boolean",
+          "description": "Hide the label 'Made with UCC' on the Configuration page"
+        },
         "checkForUpdates": {
           "type": "boolean",
           "default": true

tests/ui/pages/configuration_page.py

@@ -24,16 +24,20 @@ def __init__(
 
         self.title = Message(
             ucc_smartx_selenium_helper.browser,
-            Selector(select='[data-test="column"] .pageTitle'),
+            Selector(select=".pageTitle"),
         )
         self.description = Message(
             ucc_smartx_selenium_helper.browser,
-            Selector(select='[data-test="column"] .pageSubtitle'),
+            Selector(select=".pageSubtitle"),
         )
         self.download_openapi = Button(
             ucc_smartx_selenium_helper.browser,
             Selector(select='[data-test="downloadButton"]'),
         )
+        self.ucc_credit = Message(
+            ucc_smartx_selenium_helper.browser,
+            Selector(select='[data-test="ucc-credit"]'),
+        )
 
     def open(self):
         """

tests/ui/test_configuration_page.py

@@ -2,6 +2,9 @@
 from tests.ui.pages.configuration_page import ConfigurationPage
 
 import pytest
+from splunk_add_on_ucc_framework import (
+    __version__,
+)
 
 
 class TestConfigurationPage(UccTester):
@@ -39,3 +42,25 @@ def test_openapi_json_download_button(
             download_openapi_href,
             operator="in",
         )
+
+    @pytest.mark.execute_enterprise_cloud_true
+    @pytest.mark.forwarder
+    @pytest.mark.configuration
+    def test_ucc_credits_label_exists(
+        self, ucc_smartx_selenium_helper, ucc_smartx_rest_helper
+    ):
+        """Verifies the UCC label is rendered on the page"""
+        configuration_page = ConfigurationPage(
+            ucc_smartx_selenium_helper, ucc_smartx_rest_helper
+        )
+        ucc_label = configuration_page.ucc_credit.wait_to_display()
+        self.assert_util(
+            left="UCC",
+            operator="in",
+            right=ucc_label,
+        )
+        self.assert_util(
+            left=__version__,
+            operator="in",
+            right=ucc_label,
+        )

ui/src/components/ConfigurationFormView.jsx

@@ -5,6 +5,7 @@ import { _ } from '@splunk/ui-utils/i18n';
 import styled from 'styled-components';
 import WaitSpinner from '@splunk/react-ui/WaitSpinner';
 
+import axios from 'axios';
 import BaseFormView from './BaseFormView/BaseFormView';
 import { StyledButton } from '../pages/EntryPageStyle';
 import { axiosCallWrapper } from '../util/axiosCallWrapper';
@@ -24,15 +25,34 @@ function ConfigurationFormView({ serviceName }) {
     const [currentServiceState, setCurrentServiceState] = useState({});
 
     useEffect(() => {
+        const abortController = new AbortController();
         axiosCallWrapper({
             serviceName: `settings/${serviceName}`,
             handleError: true,
+            signal: abortController.signal,
             callbackOnError: (err) => {
+                if (abortController.signal.aborted) {
+                    return;
+                }
                 setError(err);
             },
-        }).then((response) => {
-            setCurrentServiceState(response.data.entry[0].content);
-        });
+        })
+            .catch((caughtError) => {
+                if (axios.isCancel(caughtError)) {
+                    return null;
+                }
+                throw caughtError;
+            })
+            .then((response) => {
+                if (!response) {
+                    return;
+                }
+                setCurrentServiceState(response.data.entry[0].content);
+            });
+
+        return () => {
+            abortController.abort();
+        };
     }, [serviceName]);
 
     /**

ui/src/components/MultiInputComponent/MultiInputComponent.tsx

@@ -1,10 +1,9 @@
 import React, { useState, useEffect, ReactElement } from 'react';
 import Multiselect from '@splunk/react-ui/Multiselect';
 import styled from 'styled-components';
-import axios from 'axios';
 import WaitSpinner from '@splunk/react-ui/WaitSpinner';
 
-import { axiosCallWrapper } from '../../util/axiosCallWrapper';
+import { AxiosCallType, axiosCallWrapper } from '../../util/axiosCallWrapper';
 import { filterResponse } from '../../util/util';
 
 const MultiSelectWrapper = styled(Multiselect)`
@@ -84,15 +83,15 @@ function MultiInputComponent(props: MultiInputComponentProps) {
         }
 
         let current = true;
-        const source = axios.CancelToken.source();
+        const abortController = new AbortController();
 
         const apiCallOptions = {
-            cancelToken: source.token,
+            signal: abortController.signal,
             handleError: true,
             params: { count: -1 },
             serviceName: '',
             endpointUrl: '',
-        };
+        } satisfies AxiosCallType;
         if (referenceName) {
             apiCallOptions.serviceName = referenceName;
         } else if (endpointUrl) {
@@ -123,7 +122,7 @@ function MultiInputComponent(props: MultiInputComponentProps) {
         }
         // eslint-disable-next-line consistent-return
         return () => {
-            source.cancel('Operation canceled.');
+            abortController.abort('Operation canceled.');
             current = false;
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps

ui/src/components/UCCCredit/UCCCredit.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Typography } from '@splunk/react-ui/Typography';
+import styled from 'styled-components';
+import Link from '@splunk/react-ui/Link';
+import { getUnifiedConfigs } from '../../util/util';
+
+const StyledTypography = styled(Typography)`
+    font-size: 0.8em;
+`;
+
+const UccCredit = () => {
+    const unifiedConfigs = getUnifiedConfigs();
+
+    if (unifiedConfigs?.meta?.hideUCCVersion) {
+        return null;
+    }
+    // eslint-disable-next-line no-underscore-dangle
+    const uccVersion = unifiedConfigs?.meta?._uccVersion ?? null;
+    return (
+        <StyledTypography
+            as="span"
+            title="Splunk Add-On UCC framework is a framework to generate UI-based Splunk add-ons. It includes UI, REST handlers, Modular inputs, OAuth and Alert action templates."
+            data-test="ucc-credit"
+        >
+            Made with{' '}
+            <Link to="https://splunk.github.io/addonfactory-ucc-generator/" openInNewContext>
+                UCC
+            </Link>{' '}
+            {uccVersion}
+        </StyledTypography>
+    );
+};
+
+export default UccCredit;

ui/src/components/table/TableWrapper.tsx

@@ -103,33 +103,46 @@ function TableWrapper({
     };
 
     const fetchInputs = () => {
+        const abortController = new AbortController();
+
         const requests =
             services?.map((service) =>
                 axiosCallWrapper({
                     serviceName: service.name,
                     params: { count: -1 },
+                    signal: abortController.signal,
                 })
             ) || [];
 
         axios
             .all(requests)
             .catch((caughtError) => {
+                if (axios.isCancel(caughtError)) {
+                    return;
+                }
                 const message = parseErrorMsg(caughtError);
 
                 generateToast(message, 'error');
                 setLoading(false);
                 setError(caughtError);
-                return Promise.reject(caughtError);
             })
             .then((response) => {
+                if (!response) {
+                    return;
+                }
                 modifyAPIResponse(response.map((res) => res.data.entry));
             });
+
+        return () => {
+            abortController.abort();
+        };
     };
 
-    useEffect(() => {
-        fetchInputs();
+    useEffect(
+        () => fetchInputs(),
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+        []
+    );
 
     /**
      *

ui/src/mocks/server-response.ts

@@ -17,6 +17,7 @@ export const mockServerResponseWithContent = {
     updated: '2023-08-21T11:54:12+00:00',
     entry: [
         {
+            id: 1,
             content: {
                 disabled: true,
             },

ui/src/pages/Configuration/ConfigurationPage.jsx

@@ -1,11 +1,11 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import { _ } from '@splunk/ui-utils/i18n';
 import TabBar from '@splunk/react-ui/TabBar';
 import ToastMessages from '@splunk/react-toast-notifications/ToastMessages';
 import ColumnLayout from '@splunk/react-ui/ColumnLayout';
-import styled from 'styled-components';
 
+import styled from 'styled-components';
 import useQuery from '../../hooks/useQuery';
 import { getUnifiedConfigs } from '../../util/util';
 import { TitleComponent, SubTitleComponent } from '../Input/InputPageStyle';
@@ -15,6 +15,15 @@ import ConfigurationFormView from '../../components/ConfigurationFormView';
 import ConfigurationTable from '../../components/ConfigurationTable';
 import OpenApiDownloadButton from '../../components/DownloadButton/OpenApiDownloadBtn';
 import SubDescription from '../../components/SubDescription/SubDescription';
+import UccCredit from '../../components/UCCCredit/UCCCredit';
+
+const StyledHeaderControls = styled.div`
+    display: inline-flex;
+    align-items: center;
+    justify-content: end;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+`;
 
 const Row = styled(ColumnLayout.Row)`
     padding: 5px 0px;
@@ -107,7 +116,10 @@ function ConfigurationPage() {
                             <SubDescription {...subDescription} />
                         </ColumnLayout.Column>
                         <ColumnLayout.Column span={3} style={{ textAlignLast: 'right' }}>
-                            <OpenApiDownloadButton />
+                            <StyledHeaderControls>
+                                <UccCredit />
+                                <OpenApiDownloadButton />
+                            </StyledHeaderControls>
                         </ColumnLayout.Column>
                     </Row>
                 </ColumnLayout>

ui/src/pages/Configuration/ConfigurationPage.test.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+
+import { http, HttpResponse } from 'msw';
+import ConfigurationPage from './ConfigurationPage';
+import { getUnifiedConfigs } from '../../util/util';
+import { getGlobalConfigMock } from '../../mocks/globalConfigMock';
+import { type meta as metaType } from '../../types/globalConfig/meta';
+import { mockServerResponseWithContent } from '../../mocks/server-response';
+import { server } from '../../mocks/server';
+
+jest.mock('../../util/util');
+
+const getUnifiedConfigsMock = getUnifiedConfigs as jest.Mock;
+
+beforeEach(() => {
+    server.use(
+        http.get(`/servicesNS/nobody/-/:endpointUrl`, () =>
+            HttpResponse.json(mockServerResponseWithContent)
+        )
+    );
+});
+
+function setup(meta: Partial<metaType>) {
+    const globalConfigMock = getGlobalConfigMock();
+
+    getUnifiedConfigsMock.mockImplementation(() => ({
+        ...globalConfigMock,
+        meta: {
+            ...globalConfigMock.meta,
+            ...meta,
+        },
+    }));
+    return render(<ConfigurationPage />, { wrapper: BrowserRouter });
+}
+
+it('should show UCC label', async () => {
+    const page = setup({
+        _uccVersion: undefined,
+    });
+
+    const uccLink = page.getByRole('link', { name: /ucc/i });
+    expect(uccLink).toBeInTheDocument();
+    expect(uccLink.getAttribute('href')).toContain('github.io');
+});
+
+it('should not show UCC label', async () => {
+    const page = setup({
+        hideUCCVersion: true,
+    });
+
+    const uccLink = page.queryByRole('link', { name: /ucc/i });
+    expect(uccLink).toBeNull();
+});
+
+it('should show UCC version', async () => {
+    const uccVersion = '5.2221.2341';
+    const page = setup({
+        _uccVersion: uccVersion,
+    });
+
+    expect(page.getByTestId('ucc-credit')).toHaveTextContent(uccVersion);
+});

ui/src/pages/Input/InputPageStyle.jsx

@@ -4,21 +4,17 @@ import { variables } from '@splunk/themes';
 export const TitleComponent = styled.div.attrs({
     className: 'pageTitle',
 })`
-    &.pageTitle {
-        font-size: ${variables.fontSizeXXLarge};
-        margin-bottom: 20px;
-        display: flex;
-        justify-content: space-between;
-    }
+    font-size: ${variables.fontSizeXXLarge};
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: space-between;
 `;
 
 export const SubTitleComponent = styled.div.attrs({
     className: 'pageSubtitle',
 })`
-    &.pageSubtitle {
-        font-size: ${variables.fontSize};
-        margin-bottom: 10px;
-    }
+    font-size: ${variables.fontSize};
+    margin-bottom: 10px;
 `;
 
 export const TableCaptionComponent = styled.div`