feat: ADDON-65107 implement download button for openapi (#932)

feat: ADDON-65107 implement download button for openapi

docs/openapi.md

@@ -7,6 +7,8 @@ There has to be defined valid `globalConfig.json` and `app.manifest` to have the
 
 Once `ucc-gen` command is executed, OpenAPI description document is located in output `static` subdirectory.
 
+One of ways is to download it via button displayed in top right corner of configuration page.
+
 When add-on is installed to Splunk instance, it is exposed via web and management interface, so is available under following addresses accordingly:
 
 * \[protocol\]://\[domain\]:\[port\]/en-GB/splunkd/__raw/servicesNS/\[user\]/\[appname\]/static/openapi.json

ui/src/components/DownloadButton/DownloadButton.stories.ts

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import DownloadButton from './DownloadButton';
+
+const meta = {
+    component: DownloadButton,
+    title: 'Components/DownloadButton',
+} satisfies Meta<typeof DownloadButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Base: Story = {
+    args: {
+        // using index.json as it needs to be from the same domain
+        fileUrl: '/index.json',
+        children: 'Download',
+        fileNameAfterDownload: 'index.json',
+    },
+};

ui/src/components/DownloadButton/DownloadButton.test.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import DownloadButton from './DownloadButton';
+
+describe('DownloadButton', () => {
+    it('Check if download button displays content correctly', async () => {
+        const btnText = 'some btn text';
+        const exampleContent = {
+            fileUrl: 'http://localhost:6006/index.json',
+            children: btnText,
+            fileNameAfterDownload: 'fileName',
+        };
+
+        render(<DownloadButton {...exampleContent} />);
+
+        const downloadBtn: HTMLAnchorElement = screen.getByTestId('downloadButton');
+        expect(downloadBtn).toBeInTheDocument();
+
+        expect(downloadBtn).toHaveTextContent(btnText);
+
+        expect(downloadBtn.href).toEqual(exampleContent.fileUrl);
+
+        expect(downloadBtn.download).toEqual(exampleContent.fileNameAfterDownload);
+    });
+});

ui/src/components/DownloadButton/DownloadButton.tsx

@@ -0,0 +1,24 @@
+import React, { ReactElement } from 'react';
+import Button from '@splunk/react-ui/Button';
+
+interface DownloadButtonProps {
+    // needs to be same domain if not it will just open link
+    fileUrl: string;
+    fileNameAfterDownload: string;
+    children: ReactElement | ReactElement[] | string;
+}
+
+function DownloadButton(props: DownloadButtonProps) {
+    return (
+        <Button
+            target="_blank"
+            to={props.fileUrl}
+            download={props.fileNameAfterDownload}
+            data-test="downloadButton"
+        >
+            {props.children}
+        </Button>
+    );
+}
+
+export default DownloadButton;

ui/src/components/DownloadButton/OpenApiDownloadBtn.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { createRESTURL } from '@splunk/splunk-utils/url';
+import { app } from '@splunk/splunk-utils/config';
+import Icon from '@splunk/react-icons/ArrowBroadUnderbarDown';
+import DownloadButton from './DownloadButton';
+
+function OpenApiDownloadButton() {
+    return (
+        <div>
+            <DownloadButton
+                fileUrl={createRESTURL('static/openapi.json', {
+                    app,
+                    owner: 'nobody',
+                })}
+                fileNameAfterDownload="openapi.json"
+            >
+                <Icon />
+                <span>OpenAPI.json</span>
+            </DownloadButton>
+        </div>
+    );
+}
+
+export default OpenApiDownloadButton;

ui/src/components/TextComponent.stories.tsx

@@ -4,7 +4,7 @@ import TextComponent from './TextComponent';
 
 const meta = {
     component: TextComponent,
-    title: 'Components/Temporary',
+    title: 'Components/TextComponent',
     argTypes: { handleChange: { action: 'handleChange' } },
     render: (props) => {
         // due to stories incompatibility, eslint rule is off

ui/src/pages/Configuration/ConfigurationPage.jsx

@@ -13,6 +13,7 @@ import ErrorBoundary from '../../components/ErrorBoundary';
 import CustomTab from '../../components/CustomTab';
 import ConfigurationFormView from '../../components/ConfigurationFormView';
 import ConfigurationTable from '../../components/ConfigurationTable';
+import OpenApiDownloadButton from '../../components/DownloadButton/OpenApiDownloadBtn';
 
 const Row = styled(ColumnLayout.Row)`
     padding: 5px 0px;
@@ -100,7 +101,9 @@ function ConfigurationPage() {
                 <ColumnLayout gutter={8}>
                     <Row>
                         <ColumnLayout.Column span={9}>
-                            <TitleComponent>{_(title)}</TitleComponent>
+                            <TitleComponent>
+                                {_(title)} <OpenApiDownloadButton />
+                            </TitleComponent>
                             <SubTitleComponent>{_(description || '')}</SubTitleComponent>
                         </ColumnLayout.Column>
                     </Row>

ui/src/pages/Input/InputPageStyle.jsx

@@ -7,6 +7,8 @@ export const TitleComponent = styled.div.attrs({
     &.pageTitle {
         font-size: ${variables.fontSizeXXLarge};
         margin-bottom: 20px;
+        display: flex;
+        justify-content: space-between;
     }
 `;