fix: required star visibility when using modify prop (#1489)

**Issue number:**
https://splunk.atlassian.net/browse/ADDON-77024 
### PR Type

**What kind of change does this PR introduce?**
* [ ] Feature
* [x] Bug Fix
* [ ] Refactoring (no functional or API changes)
* [ ] Documentation Update
* [ ] Maintenance (dependency updates, CI, etc.)

## Summary

Correctly reflects component required property after modifications on
value change are applied.

### Changes

Fixes error that verified if required start should be displayed.

### User experience

Users see required star correct next to elements that are required
currently.


## Checklist

If an item doesn't apply to your changes, leave it unchecked.

* [x] I have performed a self-review of this change according to the
[development
guidelines](https://splunk.github.io/addonfactory-ucc-generator/contributing/#development-guidelines)
* [x] Tests have been added/modified to cover the changes [(testing
doc)](https://splunk.github.io/addonfactory-ucc-generator/contributing/#build-and-test)
* [ ] Changes are documented
* [x] PR title and description follows the [contributing
principles](https://splunk.github.io/addonfactory-ucc-generator/contributing/#pull-requests)

---------

Co-authored-by: srv-rr-github-token <[email protected]>

ui/src/components/ControlWrapper/ControlWrapper.tsx

@@ -26,7 +26,7 @@ const ControlGroupWrapper = styled(ControlGroup).attrs((props: { dataName: strin
     }
 `;
 
-interface ControlWrapperProps {
+export interface ControlWrapperProps {
     mode: Mode;
     utilityFuncts: UtilControlWrapper;
     value: AcceptableFormValueOrNullish;
@@ -128,12 +128,17 @@ class ControlWrapper extends React.PureComponent<ControlWrapperProps> {
             </>
         );
 
-        const isFieldRequired = // modifiedEntitiesData takes precedence over entity
-            this.props?.modifiedEntitiesData?.required || this.props.entity?.required === undefined
-                ? 'oauth_field' in (this.props.entity || {}) // if required is undefined use true for oauth fields and false for others
-                : this.props.entity?.required; // if required present use required
-        const label = this.props?.modifiedEntitiesData?.label || this?.props?.entity?.label || '';
+        const isRequiredModified =
+            typeof this.props?.modifiedEntitiesData?.required === 'boolean'
+                ? this.props?.modifiedEntitiesData?.required
+                : this.props.entity?.required;
+
+        const isFieldRequired =
+            isRequiredModified === undefined // // if oauth_field exists field required by default
+                ? 'oauth_field' in (this.props.entity || {}) // if oauth_field does not exists not required by default
+                : isRequiredModified;
 
+        const label = this.props?.modifiedEntitiesData?.label || this?.props?.entity?.label || '';
         return (
             this.props.display && (
                 <ControlGroupWrapper

ui/src/components/ControlWrapper/stories/ControlWrapper.stories.ts

@@ -49,3 +49,37 @@ export const Base: Story = {
         fileNameToDisplay: 'Previous File',
     },
 };
+
+export const WithModifications: Story = {
+    args: {
+        ...Base.args,
+        entity: {
+            field: 'url',
+            label: 'URL',
+            type: 'text',
+            help: 'Enter the URL, for example',
+            required: true,
+            encrypted: false,
+        },
+        modifiedEntitiesData: { required: false, label: 'Modified URL', help: 'Modified help' },
+    },
+};
+
+export const WithModificationsMakeRequired: Story = {
+    args: {
+        ...Base.args,
+        entity: {
+            field: 'url',
+            label: 'URL',
+            type: 'text',
+            help: 'Enter the URL, for example',
+            required: false,
+            encrypted: false,
+        },
+        modifiedEntitiesData: {
+            required: true,
+            label: 'Modified URL',
+            help: 'Modified help required',
+        },
+    },
+};

ui/src/components/ControlWrapper/test/ControlWrapper.test.tsx

@@ -0,0 +1,129 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import ControlWrapper, { ControlWrapperProps } from '../ControlWrapper';
+
+const renderControlWrapper = (props: Partial<ControlWrapperProps>) => {
+    render(
+        <ControlWrapper
+            mode="create"
+            utilityFuncts={{
+                utilCustomFunctions: {
+                    setState: () => {},
+                    setErrorFieldMsg: () => {},
+                    clearAllErrorMsg: () => {},
+                    setErrorMsg: () => {},
+                },
+                handleChange: () => {},
+                addCustomValidator: () => {},
+            }}
+            value=""
+            display
+            error={false}
+            disabled={false}
+            serviceName="testServiceName"
+            dependencyValues={undefined}
+            entity={{
+                field: 'url',
+                label: 'URL',
+                type: 'text',
+                help: 'Enter the URL, for example',
+                required: true,
+                validators: [
+                    {
+                        errorMsg:
+                            "Invalid URL provided. URL should start with 'https' as only secure URLs are supported. Provide URL in this format",
+                        type: 'regex',
+                        pattern: '^(https://)[^/]+/?$',
+                    },
+                ],
+                encrypted: false,
+            }}
+            {...props}
+        />
+    );
+};
+
+it('check if required star displayed correctly', () => {
+    renderControlWrapper({});
+    const requiredStar = screen.queryByText('*');
+    expect(requiredStar).toBeInTheDocument();
+});
+
+it('check if required star not displayed', () => {
+    renderControlWrapper({
+        entity: {
+            field: 'url',
+            label: 'URL',
+            type: 'text',
+            required: false,
+        },
+    });
+    const requiredStar = screen.queryByText('*');
+    expect(requiredStar).not.toBeInTheDocument();
+});
+
+it('check if required star displayed correctly from modifiedEntitiesData', () => {
+    renderControlWrapper({
+        entity: {
+            field: 'url',
+            label: 'URL',
+            type: 'text',
+            required: false,
+        },
+        modifiedEntitiesData: { required: true },
+    });
+    const requiredStar = screen.queryByText('*');
+    expect(requiredStar).toBeInTheDocument();
+});
+
+it('check if required star not displayed due to modifiedEntitiesData', () => {
+    renderControlWrapper({
+        entity: {
+            field: 'url',
+            label: 'URL',
+            type: 'text',
+            required: true,
+        },
+        modifiedEntitiesData: { required: false },
+    });
+
+    const requiredStar = screen.queryByText('*');
+    expect(requiredStar).not.toBeInTheDocument();
+});
+
+it('check if label and help updated due to modifiedEntitiesData', () => {
+    const modifications = { required: false, label: 'Modified URL', help: 'Modified help' };
+    renderControlWrapper({
+        entity: {
+            field: 'url',
+            label: 'URL',
+            help: 'Enter the URL, for example',
+            type: 'text',
+            required: true,
+        },
+        modifiedEntitiesData: modifications,
+    });
+
+    const label = screen.getByTestId('label'); // label replaced
+    expect(label).toHaveTextContent(modifications.label);
+
+    const help = screen.getByTestId('help'); // help replaced
+    expect(help).toHaveTextContent(modifications.help);
+});
+
+it('check if help added due to modifiedEntitiesData', () => {
+    const modifications = { help: 'Modified help' };
+
+    renderControlWrapper({
+        entity: {
+            field: 'url',
+            label: 'URL',
+            type: 'text',
+            required: true,
+        },
+        modifiedEntitiesData: modifications,
+    });
+
+    const help = screen.getByTestId('help');
+    expect(help).toHaveTextContent(modifications.help);
+});