feat: ADDON-64844 better spacing in modal (#935)

feat: ADDON-64844 better spacing in modal
splunk · Nov 8, 2023 · b385759 · b385759
1 parent e3a9b40
commit b385759
Show file tree

Hide file tree

Showing 6 changed files with 551 additions and 43 deletions.
diff --git a/ui/src/components/ControlWrapper.tsx b/ui/src/components/ControlWrapper.tsx
@@ -6,21 +6,27 @@ import MarkdownMessage from './MarkdownMessage';
 import CONTROL_TYPE_MAP, { ComponentTypes } from '../constants/ControlTypeMap';
 
 const CustomElement = styled.div`
-    margin-left: 30px;
+    padding-left: 10px;
 `;
 
+/* 
+    1st child is title, 3rd is help message
+    their width is fixed to not increase size of modal 
+    or page unintentionally due to long text
+ */
 const ControlGroupWrapper = styled(ControlGroup).attrs((props: { dataName: string }) => ({
     'data-name': props.dataName,
 }))`
     width: 100%;
     max-width: 100%;
+    padding: 0 30px;
 
     > * {
         &:first-child {
             width: 240px !important;
         }
         &:nth-child(3) {
-            margin-left: 270px !important;
+            margin-left: 250px !important;
             width: 320px;
         }
     }

diff --git a/ui/src/components/EntityModal.tsx b/ui/src/components/EntityModal.tsx
@@ -9,7 +9,7 @@ import { StyledButton } from '../pages/EntryPageStyle';
 import BaseFormView from './BaseFormView';
 
 const ModalWrapper = styled(Modal)`
-    width: 800px;
+    width: fit-content;
 `;
 
 interface EntityModalProps {

diff --git a/ui/src/components/EntityPage.tsx b/ui/src/components/EntityPage.tsx
@@ -4,8 +4,10 @@ import Link from '@splunk/react-ui/Link';
 import WaitSpinner from '@splunk/react-ui/WaitSpinner';
 import ColumnLayout from '@splunk/react-ui/ColumnLayout';
 import { _ } from '@splunk/ui-utils/i18n';
-import { useSplunkTheme } from '@splunk/themes';
+import { variables } from '@splunk/themes';
 
+import Heading from '@splunk/react-ui/Heading';
+import styled from 'styled-components';
 import { MODE_CLONE, MODE_CREATE, MODE_EDIT, Mode } from '../constants/modes';
 import BaseFormView from './BaseFormView';
 import { SubTitleComponent } from '../pages/Input/InputPageStyle';
@@ -22,6 +24,15 @@ interface EntityPageProps {
     groupName?: string;
 }
 
+const ShadowedDiv = styled.div`
+    box-shadow: ${variables.embossShadow};
+    padding: ${variables.spacing};
+`;
+
+const ButtonRow = styled.div`
+    margin-top: ${variables.spacingHalf};
+    text-align: right;
+`;
 function EntityPage({
     handleRequestClose,
     serviceName,
@@ -44,13 +55,6 @@ function EntityPage({
         buttonText = _('Update');
     }
 
-    const { embossShadow } = useSplunkTheme();
-    const colStyle = {
-        boxShadow: embossShadow,
-        padding: '1%',
-        backgroundColor: 'white',
-    };
-
     const handleSubmit = () => {
         const result = form.current?.handleSubmit();
         if (result) {
@@ -79,36 +83,37 @@ function EntityPage({
             </ColumnLayout.Row>
             <ColumnLayout.Row>
                 <ColumnLayout.Column span={2} />
-                <ColumnLayout.Column span={8} style={colStyle}>
-                    <BaseFormView // nosemgrep: typescript.react.security.audit.react-no-refs.react-no-refs
-                        ref={form}
-                        page={page}
-                        serviceName={serviceName}
-                        mode={mode}
-                        stanzaName={stanzaName}
-                        handleFormSubmit={handleFormSubmit}
-                        groupName={groupName}
-                    />
-                </ColumnLayout.Column>
-                <ColumnLayout.Column span={2} />
-            </ColumnLayout.Row>
-            <ColumnLayout.Row>
-                <ColumnLayout.Column span={7} />
-                <ColumnLayout.Column span={3} style={{ textAlign: 'right' }}>
-                    <StyledButton
-                        appearance="secondary"
-                        onClick={handleRequestClose}
-                        label={_('Cancel')}
-                        disabled={isSubmitting}
-                        style={{ width: '80px' }}
-                    />
-                    <StyledButton
-                        appearance="primary"
-                        label={isSubmitting ? <WaitSpinner /> : buttonText}
-                        onClick={handleSubmit}
-                        disabled={isSubmitting}
-                        style={{ width: '80px' }}
-                    />
+                <ColumnLayout.Column span={8} style={{ maxWidth: 'fit-content' }}>
+                    <ShadowedDiv>
+                        <Heading style={{ paddingLeft: '30px' }} level={3}>
+                            {_(formLabel)}
+                        </Heading>
+                        <BaseFormView // nosemgrep: typescript.react.security.audit.react-no-refs.react-no-refs
+                            ref={form}
+                            page={page}
+                            serviceName={serviceName}
+                            mode={mode}
+                            stanzaName={stanzaName}
+                            handleFormSubmit={handleFormSubmit}
+                            groupName={groupName}
+                        />
+                    </ShadowedDiv>
+                    <ButtonRow>
+                        <StyledButton
+                            appearance="secondary"
+                            onClick={handleRequestClose}
+                            label={_('Cancel')}
+                            disabled={isSubmitting}
+                            style={{ width: '80px' }}
+                        />
+                        <StyledButton
+                            appearance="primary"
+                            label={isSubmitting ? <WaitSpinner /> : buttonText}
+                            onClick={handleSubmit}
+                            disabled={isSubmitting}
+                            style={{ width: '80px' }}
+                        />
+                    </ButtonRow>
                 </ColumnLayout.Column>
                 <ColumnLayout.Column span={2} />
             </ColumnLayout.Row>

diff --git a/ui/src/mocks/server-handlers.ts b/ui/src/mocks/server-handlers.ts
@@ -3,9 +3,9 @@ import { rest } from 'msw';
 import { MOCKED_TA_INPUT, mockServerResponse } from './server-response';
 
 export const serverHandlers = [
-    rest.get('/servicesNS/nobody/-/mockGeneratedEndPointUrl', (req, res, ctx) =>
+    rest.get(`/servicesNS/nobody/-/${MOCKED_TA_INPUT}`, (req, res, ctx) => res(ctx.status(200))),
+    rest.get('/servicesNS/nobody/-/:endpointUrl', (req, res, ctx) =>
         res(ctx.json(mockServerResponse))
     ),
-    rest.get(`/servicesNS/nobody/-/${MOCKED_TA_INPUT}`, (req, res, ctx) => res(ctx.status(200))),
     rest.get('/servicesNS/nobody/-/data/indexes', (req, res, ctx) => res(ctx.status(200))),
 ];
diff --git a/ui/src/pages/Input/stories/InputPage.stories.tsx b/ui/src/pages/Input/stories/InputPage.stories.tsx
@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import BaseFormView from 'src/components/BaseFormView';
+import { rest } from 'msw';
+import { userEvent, within } from '@storybook/testing-library';
+import { setUnifiedConfig } from '../../../util/util';
+import globalConfig from './globalConfig.json';
+import InputPage from '../InputPage';
+import { mockServerResponse } from '../../../mocks/server-response';
+
+const meta = {
+    component: InputPage,
+    title: 'InputPage/Base',
+    render: (args) => {
+        setUnifiedConfig(args.globalConfig);
+        return <InputPage />;
+    },
+    args: {
+        globalConfig,
+    },
+    parameters: {
+        msw: {
+            handlers: [
+                rest.get('/servicesNS/nobody/-/:name', (req, res, ctx) =>
+                    res(ctx.json(mockServerResponse))
+                ),
+            ],
+        },
+    },
+} satisfies Meta<typeof BaseFormView>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const InputPageView: Story = {
+    play: async ({ canvasElement }) => {
+        const body = within(canvasElement.ownerDocument.body);
+        const canvas = within(canvasElement);
+
+        await userEvent.click(canvas.getByRole('button', { name: 'Create New Input' }));
+
+        await userEvent.click(await body.findByText('demo_input'));
+    },
+};
+export const InputTabView: Story = {
+    play: async ({ canvasElement }) => {
+        const body = within(canvasElement.ownerDocument.body);
+        const canvas = within(canvasElement);
+
+        await userEvent.click(canvas.getByRole('button', { name: 'Create New Input' }));
+
+        await userEvent.click(await body.findByText('Demo input page'));
+    },
+};