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/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();
+
+    // eslint-disable-next-line no-underscore-dangle
+    const uccVersion = unifiedConfigs?.meta?._uccVersion ?? null;
+    if (unifiedConfigs?.meta?.hideUCCVersion) {
+        return 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/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,13 @@ 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: baseline;
+    gap: 0.4rem;
+`;
 
 const Row = styled(ColumnLayout.Row)`
     padding: 5px 0px;
@@ -107,7 +114,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/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`

ui/src/pages/entry_page.jsx

@@ -64,6 +64,15 @@ const url = window.location.pathname;
 const urlParts = url.substring(1).split('/');
 const page = urlParts[urlParts.length - 1];
 
+// eslint-disable-next-line no-console
+console.log(`
+UCC Framework is here 👋 If you encounter any issues or have feedback, please report them to us.
+
+For Splunkers, reach out via our Slack channel: #ucc-framework.
+For external users, join us at: https://splunk-usergroups.slack.com/archives/C03SG3ZL4S1.
+
+We appreciate your help in making UCC better! 🚀`);
+
 if (page === PAGE_INPUT) {
     layout(<InputPageComponent />, { pageTitle: messageDict[116] });
 } else if (page === PAGE_CONF) {

ui/src/pages/style.css

@@ -22,7 +22,7 @@ body {
     background: #f2f4f5; /* move to class to applied changes only for Monitoring Dashboard */
 }
 
-// Safari browser specific issue - https://stackoverflow.com/questions/21400182/safari-css-font-color-issue?noredirect=1&lq=1
+/* Safari browser specific issue - https://stackoverflow.com/questions/21400182/safari-css-font-color-issue?noredirect=1&lq=1 */
 input[disabled],
 textarea[disabled],
 select[disabled='disabled'] {

ui/src/types/globalConfig/meta.ts

@@ -7,6 +7,8 @@ export const meta = z.object({
     apiVersion: z.string().optional(),
     version: z.string(),
     schemaVersion: z.string().optional(),
+    _uccVersion: z.string().optional(),
+    hideUCCVersion: z.boolean().optional(),
     checkForUpdates: z.boolean().default(true).optional(),
     searchViewDefault: z.boolean().default(false).optional(),
 });