feat: #1033 configure my web component installations in the Marketplace

packages/elements/src/components/Checkbox/__tests__/__snapshots__/index.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Checkbox should match a snapshot 1`] = `
 <div
-  className="field pb-4"
+  className="field pb-4 "
 >
   <div
     className="control"

packages/elements/src/components/Checkbox/index.tsx

@@ -7,6 +7,7 @@ export interface CheckboxProps {
   name: string
   dataTest?: string
   value?: string
+  className?: string
 }
 
 export type HandleCheckboxOnChangeParams = {
@@ -30,9 +31,9 @@ export const handleOnCheckboxChange = ({ field, value }: HandleCheckboxOnChangeP
   return
 }
 
-export const Checkbox = ({ name, labelText, id, dataTest = '', value = '' }: CheckboxProps) => {
+export const Checkbox = ({ name, labelText, id, dataTest = '', value = '', className = '' }: CheckboxProps) => {
   return (
-    <div className="field pb-4">
+    <div className={`field pb-4 ${className}`}>
       <div className="control">
         <Field type="checkbox" name={name}>
           {({ field }: FieldProps<string | string[]>) => {

packages/elements/src/components/DropdownSelect/index.tsx

@@ -13,6 +13,7 @@ export interface DropdownSelectProps extends SelectProps {
   placeholder?: string
   options: SelectOption[]
   required?: boolean
+  subText?: string
 }
 
 export interface SelectOption {
@@ -29,6 +30,7 @@ export const DropdownSelect: React.FC<DropdownSelectProps> = ({
   placeholder,
   options,
   required = false,
+  subText,
   ...restProps
 }) => {
   const handleRenderTags = (props: CustomTagProps) => {
@@ -54,6 +56,7 @@ export const DropdownSelect: React.FC<DropdownSelectProps> = ({
             return (
               <div className="field field-dropdown-select">
                 <label className={`label ${required ? 'required-label' : ''}`}>{labelText}</label>
+                <label className="subtext mb-2">{subText}</label>
                 <Select
                   id={id}
                   placeholder={placeholder}

packages/elements/src/components/RadioSelect/__tests__/index.tsx

@@ -39,7 +39,7 @@ describe('RadioSelect', () => {
         )}
       </Formik>,
     )
-    expect(wrapper.find('label')).toHaveLength(3)
+    expect(wrapper.find('label')).toHaveLength(4)
     expect(wrapper.find('input')).toHaveLength(2)
   })
 })

packages/elements/src/components/RadioSelect/index.tsx

@@ -10,38 +10,43 @@ export type RadioSelectOption = {
 export type RadioSelectProps = {
   name: string
   labelText?: string
+  subText?: string
   id: string
   dataTest?: string
   options: RadioSelectOption[]
   setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void
   state: any
   disabled?: boolean
+  className?: string
 }
 
 export const RadioSelect: React.FC<RadioSelectProps> = ({
   name,
   labelText,
+  subText,
   id,
   dataTest,
   options,
   setFieldValue,
   state,
   disabled = false,
+  className,
 }) => {
   return (
     <Field type="radio" name={name}>
       {({ meta }: FieldProps<string>) => {
         const hasError = checkError(meta)
         return (
-          <div className="field pb-2">
+          <div className={`field pb-2 ${className}`}>
             <div className="control">
               <label className="label" htmlFor={id}>
                 {labelText}
               </label>
+              <label className="subtext mb-2">{subText}</label>
               {options.map(({ label, value }: RadioSelectOption, index: number) => (
                 <div key={index} data-test={dataTest} className="radio-wrap">
                   <input
-                    id={label as string}
+                    id={(name + label) as string}
                     className={`checkbox ${hasError ? 'checkbox-error' : ''}`}
                     type="radio"
                     key={value}
@@ -51,7 +56,7 @@ export const RadioSelect: React.FC<RadioSelectProps> = ({
                     disabled={disabled}
                     onChange={() => setFieldValue(name, value)}
                   />
-                  <label htmlFor={label as string}>{label}</label>
+                  <label htmlFor={(name + label) as string}>{label}</label>
                 </div>
               ))}
             </div>

packages/elements/src/styles/components/checkbox.scss

@@ -1,7 +1,6 @@
 @import '../base/colors.scss';
 
 .field {
-
   .checkbox {
     position: absolute;
     width: 0;
@@ -79,7 +78,19 @@
     margin-bottom: 4px;
   }
 
-
+  .control {
+    .subtext {
+      font-style: italic;
+      display: block;
+    }
+  }
+
+  &.checkbox-inline {
+    .radio-wrap {
+      display: inline-block;
+      margin-right: 1rem;
+    }
+  }
 }
 
 .field-checkbox {

packages/elements/src/styles/components/layout.scss

@@ -44,5 +44,8 @@
   &.has-background {
     background-color: $white;
   }
-}
 
+  &.flex-wrap {
+    flex-wrap: wrap;
+  }
+}

packages/marketplace/src/actions/__tests__/client.ts

@@ -3,6 +3,11 @@ import {
   clientFetchAppSummarySuccess,
   clientFetchAppSummaryFailed,
   clientClearAppSummary,
+  clientOpenWebComponentConfig,
+  clientCloseWebComponentConfig,
+  clientFetchWebComponentConfig,
+  clientFetchWebComponentConfigSuccess,
+  clientPutWebComponentConfig,
 } from '../client'
 import ActionTypes from '../../constants/action-types'
 import { appsDataStub, featuredAppsDataStub } from '../../sagas/__stubs__/apps'
@@ -29,4 +34,20 @@ describe('client actions', () => {
     expect(clientClearAppSummary.type).toEqual(ActionTypes.CLIENT_CLEAR_APP_SUMMARY)
     expect(clientClearAppSummary(null).data).toEqual(null)
   })
+  it('should create a clientOpenWebComponentConfig action', () => {
+    expect(clientOpenWebComponentConfig.type).toEqual(ActionTypes.CLIENT_WEB_COMPONENT_CONFIG_OPEN)
+  })
+  it('should create a clientCloseWebComponentConfig action', () => {
+    expect(clientCloseWebComponentConfig.type).toEqual(ActionTypes.CLIENT_WEB_COMPONENT_CONFIG_CLOSE)
+  })
+  it('should create a clientFetchWebComponentConfig action', () => {
+    expect(clientFetchWebComponentConfig.type).toEqual(ActionTypes.CLIENT_FETCH_WEB_COMPONENT_CONFIG)
+    expect(clientFetchWebComponentConfig({ customerId: 'DXX' }).data).toEqual({ customerId: 'DXX' })
+  })
+  it('should create a clientFetchWebComponentConfigSuccess action', () => {
+    expect(clientFetchWebComponentConfigSuccess.type).toEqual(ActionTypes.CLIENT_FETCH_WEB_COMPONENT_CONFIG_SUCCESS)
+  })
+  it('should create a clientPutWebComponentConfig action', () => {
+    expect(clientPutWebComponentConfig.type).toEqual(ActionTypes.CLIENT_PUT_WEB_COMPONENT_CONFIG)
+  })
 })

packages/marketplace/src/actions/client.ts

@@ -3,6 +3,11 @@ import ActionTypes from '@/constants/action-types'
 import { ClientAppSummary, ClientAppSummaryParams } from '@/reducers/client/app-summary'
 import { AppDetailData } from '@/reducers/client/app-detail'
 import { FetchAppByIdParams } from '@/services/apps'
+import {
+  PutWebComponentConfigParams,
+  FetchWebComponentConfigParams,
+  WebComponentConfigResult,
+} from '@/services/web-component'
 
 export const clientFetchAppSummary = actionCreator<ClientAppSummaryParams>(ActionTypes.CLIENT_FETCH_APP_SUMMARY)
 export const clientFetchAppSummarySuccess = actionCreator<ClientAppSummary | undefined>(
@@ -15,3 +20,15 @@ export const clientClearAppSummary = actionCreator<null>(ActionTypes.CLIENT_CLEA
 export const clientFetchAppDetail = actionCreator<FetchAppByIdParams>(ActionTypes.CLIENT_FETCH_APP_DETAIL)
 export const clientFetchAppDetailSuccess = actionCreator<AppDetailData>(ActionTypes.CLIENT_FETCH_APP_DETAIL_SUCCESS)
 export const clientFetchAppDetailFailed = actionCreator<string>(ActionTypes.CLIENT_FETCH_APP_DETAIL_FAILED)
+
+export const clientOpenWebComponentConfig = actionCreator<void>(ActionTypes.CLIENT_WEB_COMPONENT_CONFIG_OPEN)
+export const clientCloseWebComponentConfig = actionCreator<void>(ActionTypes.CLIENT_WEB_COMPONENT_CONFIG_CLOSE)
+export const clientFetchWebComponentConfig = actionCreator<FetchWebComponentConfigParams>(
+  ActionTypes.CLIENT_FETCH_WEB_COMPONENT_CONFIG,
+)
+export const clientFetchWebComponentConfigSuccess = actionCreator<WebComponentConfigResult>(
+  ActionTypes.CLIENT_FETCH_WEB_COMPONENT_CONFIG_SUCCESS,
+)
+export const clientPutWebComponentConfig = actionCreator<PutWebComponentConfigParams>(
+  ActionTypes.CLIENT_PUT_WEB_COMPONENT_CONFIG,
+)

packages/marketplace/src/components/pages/client-app-detail-manage/__test__/__snapshots__/client-app-detail-manage.test.tsx.snap

@@ -96,6 +96,36 @@ exports[`ClientAppDetailManage should match a snapshot 1`] = `
                         src="https://bulma.io/images/placeholders/48x48.png"
                       />
                     </div>
+                    <Component>
+                      <div
+                        className="column  "
+                      >
+                        <Component>
+                          <h6
+                            className="title is-6  "
+                            id=""
+                          >
+                            Settings
+                          </h6>
+                        </Component>
+                        <Component
+                          fullWidth={true}
+                          onClick={[Function]}
+                          type="button"
+                          variant="primary"
+                        >
+                          <button
+                            className="button  is-primary is-fullwidth "
+                            data-test=""
+                            disabled={false}
+                            onClick={[Function]}
+                            type="button"
+                          >
+                            Configuration
+                          </button>
+                        </Component>
+                      </div>
+                    </Component>
                   </div>
                 </Component>
                 <Component

packages/marketplace/src/components/pages/client-app-detail/__test__/__snapshots__/client-app-detail.test.tsx.snap

@@ -184,15 +184,42 @@ exports[`ClientAppDetail should not render loader when client.appDetail.data is
                   <div
                     data-test=""
                   >
+                    <div>
+                      <img
+                        className="image"
+                        src="https://bulma.io/images/placeholders/48x48.png"
+                      />
+                    </div>
                     <Component>
-                      <h5
-                        className="title is-5  "
-                        id=""
+                      <div
+                        className="column  "
                       >
-                        Developer
-                      </h5>
+                        <Component>
+                          <h6
+                            className="title is-6  "
+                            id=""
+                          >
+                            Settings
+                          </h6>
+                        </Component>
+                        <Component
+                          fullWidth={true}
+                          onClick={[Function]}
+                          type="button"
+                          variant="primary"
+                        >
+                          <button
+                            className="button  is-primary is-fullwidth "
+                            data-test=""
+                            disabled={false}
+                            onClick={[Function]}
+                            type="button"
+                          >
+                            Configuration
+                          </button>
+                        </Component>
+                      </div>
                     </Component>
-                    TBC
                   </div>
                 </Component>
               </Component>