From adb0bae401d11744651e6e303c1fa3e0e3a8ac30 Mon Sep 17 00:00:00 2001
From: Vu Nguyen <vunp@reapit.com>
Date: Mon, 22 Jun 2020 17:34:12 +0700
Subject: [PATCH 1/4] refactor: #1325 Refactor confirm uninstall app using
 react-redux hooks

---
 .../src/components/TextArea/index.tsx         |  10 +-
 .../developer/developer-app-content.tsx       |   2 +-
 .../__snapshots__/confirm-uninstall.tsx.snap  | 135 ---------
 .../__tests__/confirm-uninstall.tsx           | 102 -------
 .../app-installations/confirm-uninstall.tsx   | 191 ------------
 .../confirm-uninstall.test.tsx.snap           | 286 ++++++++++++++++++
 .../__tests__/confirm-uninstall.test.tsx      |  83 +++++
 .../confirm-uninstall/confirm-uninstall.tsx   | 130 ++++++++
 .../form-schema/form-fields.ts                |  10 +
 .../form-schema/validation-schema.ts          |  16 +
 .../confirm-uninstall/index.ts                |   2 +
 11 files changed, 534 insertions(+), 433 deletions(-)
 delete mode 100644 packages/marketplace/src/components/ui/app-installations/__tests__/__snapshots__/confirm-uninstall.tsx.snap
 delete mode 100644 packages/marketplace/src/components/ui/app-installations/__tests__/confirm-uninstall.tsx
 delete mode 100644 packages/marketplace/src/components/ui/app-installations/confirm-uninstall.tsx
 create mode 100644 packages/marketplace/src/components/ui/app-installations/confirm-uninstall/__tests__/__snapshots__/confirm-uninstall.test.tsx.snap
 create mode 100644 packages/marketplace/src/components/ui/app-installations/confirm-uninstall/__tests__/confirm-uninstall.test.tsx
 create mode 100644 packages/marketplace/src/components/ui/app-installations/confirm-uninstall/confirm-uninstall.tsx
 create mode 100644 packages/marketplace/src/components/ui/app-installations/confirm-uninstall/form-schema/form-fields.ts
 create mode 100644 packages/marketplace/src/components/ui/app-installations/confirm-uninstall/form-schema/validation-schema.ts
 create mode 100644 packages/marketplace/src/components/ui/app-installations/confirm-uninstall/index.ts

diff --git a/packages/elements/src/components/TextArea/index.tsx b/packages/elements/src/components/TextArea/index.tsx
index 22d3fd4927..7b05c1aeee 100644
--- a/packages/elements/src/components/TextArea/index.tsx
+++ b/packages/elements/src/components/TextArea/index.tsx
@@ -5,7 +5,7 @@ import { checkError } from '../../utils/form'
 export interface TextAreaProps {
   placeholder?: string
   id: string
-  labelText: string
+  labelText?: string
   name: string
   dataTest?: string
   validate?: (value: string) => string | null
@@ -31,9 +31,11 @@ export const TextArea = ({
       return (
         <div className="field">
           <div className="control">
-            <label className={`label ${required ? 'required-label' : ''}`} htmlFor={id}>
-              {labelText}
-            </label>
+            {labelText && (
+              <label className={`label ${required ? 'required-label' : ''}`} htmlFor={id}>
+                {labelText}
+              </label>
+            )}
             <textarea data-test={dataTest || ''} id={id} placeholder={placeholder} className={className} {...field} />
           </div>
           {hasError && (
diff --git a/packages/marketplace/src/components/pages/app-detail/developer/developer-app-content.tsx b/packages/marketplace/src/components/pages/app-detail/developer/developer-app-content.tsx
index 312196dd65..d53e67801e 100644
--- a/packages/marketplace/src/components/pages/app-detail/developer/developer-app-content.tsx
+++ b/packages/marketplace/src/components/pages/app-detail/developer/developer-app-content.tsx
@@ -76,7 +76,7 @@ const AppContent: React.FC<AppContentProps> = ({ appDetailState }) => {
   return (
     <FlexContainerBasic flexColumn>
       {isVisibleUninstallModal && (
-        <Modal renderChildren visible={isVisibleUninstallModal}>
+        <Modal renderChildren visible={isVisibleUninstallModal} afterClose={handleAfterClose({ setUninstallApp })}>
           <ConfirmUninstall
             isSetAppDetailStaleAfterUninstallSuccess={false}
             appName={name}
diff --git a/packages/marketplace/src/components/ui/app-installations/__tests__/__snapshots__/confirm-uninstall.tsx.snap b/packages/marketplace/src/components/ui/app-installations/__tests__/__snapshots__/confirm-uninstall.tsx.snap
deleted file mode 100644
index 340c419590..0000000000
--- a/packages/marketplace/src/components/ui/app-installations/__tests__/__snapshots__/confirm-uninstall.tsx.snap
+++ /dev/null
@@ -1,135 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ConfirmUninstall should match a snapshot when FORMSTATE is PENDING 1`] = `
-<Fragment>
-  <Component
-    afterClose={[MockFunction]}
-    title="Confirm Uninstall"
-  />
-  <Component
-    body={
-      <React.Fragment>
-        <Unknown>
-          Are you sure you wish to uninstall ‘
-          1
-          ’ from ‘
-          DXX
-          ’?
-        </Unknown>
-        <Unknown>
-          *Please confirm reason for uninstalling
-        </Unknown>
-        <Unknown
-          id="terminatedReason"
-          labelText=""
-          name="terminatedReason"
-        />
-      </React.Fragment>
-    }
-  />
-  <Component
-    footerItems={
-      <React.Fragment>
-        <Unknown
-          className="mx-4"
-          disabled={false}
-          fullWidth={true}
-          loading={false}
-          onClick={[MockFunction]}
-          type="button"
-          variant="primary"
-        >
-          Yes, Uninstall
-        </Unknown>
-        <Unknown
-          className="mx-4"
-          disabled={false}
-          fullWidth={true}
-          onClick={[MockFunction]}
-          type="button"
-          variant="danger"
-        >
-          Cancel
-        </Unknown>
-      </React.Fragment>
-    }
-  />
-</Fragment>
-`;
-
-exports[`ConfirmUninstall should match a snapshot when FORMSTATE is SUBMITTING 1`] = `
-<Fragment>
-  <Component
-    afterClose={[MockFunction]}
-    title="Confirm Uninstall"
-  />
-  <Component
-    body={
-      <React.Fragment>
-        <Unknown>
-          Are you sure you wish to uninstall ‘
-          1
-          ’ from ‘
-          DXX
-          ’?
-        </Unknown>
-        <Unknown>
-          *Please confirm reason for uninstalling
-        </Unknown>
-        <Unknown
-          id="terminatedReason"
-          labelText=""
-          name="terminatedReason"
-        />
-      </React.Fragment>
-    }
-  />
-  <Component
-    footerItems={
-      <React.Fragment>
-        <Unknown
-          className="mx-4"
-          disabled={true}
-          fullWidth={true}
-          loading={true}
-          onClick={[MockFunction]}
-          type="button"
-          variant="primary"
-        >
-          Yes, Uninstall
-        </Unknown>
-        <Unknown
-          className="mx-4"
-          disabled={true}
-          fullWidth={true}
-          onClick={[MockFunction]}
-          type="button"
-          variant="danger"
-        >
-          Cancel
-        </Unknown>
-      </React.Fragment>
-    }
-  />
-</Fragment>
-`;
-
-exports[`ConfirmUninstall should match a snapshot when FORMSTATE is SUCCESS 1`] = `
-<CallToAction
-  buttonText="Back to List"
-  dataTest="alertUninstallSuccess"
-  isCenter={true}
-  onButtonClick={[Function]}
-  title="Success"
->
-  <div
-    className="mb-3"
-  >
-    ‘
-    1
-    ’ has been successfully uninstalled from ‘
-    DXX
-    ’
-  </div>
-</CallToAction>
-`;
diff --git a/packages/marketplace/src/components/ui/app-installations/__tests__/confirm-uninstall.tsx b/packages/marketplace/src/components/ui/app-installations/__tests__/confirm-uninstall.tsx
deleted file mode 100644
index ddcfb10e97..0000000000
--- a/packages/marketplace/src/components/ui/app-installations/__tests__/confirm-uninstall.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import * as React from 'react'
-import { shallow } from 'enzyme'
-import {
-  ConfirmUninstall,
-  ConfirmUninstallProps,
-  mapDispatchToProps,
-  mapStateToProps,
-  TerminatedValues,
-  handleSuccessUninstall,
-  handleSubmit,
-} from '../confirm-uninstall'
-import { ReduxState, FormState } from '@/types/core'
-import { UninstallParams } from '@/actions/app-installations'
-import { installationStub } from '@/sagas/__stubs__/installation'
-import { FormikProps } from '@reapit/elements'
-import { mockWithFormik } from '@/utils/mock-formik'
-
-const props = {
-  appName: '1',
-  afterClose: jest.fn(),
-  formState: 'PENDING',
-  setFormState: jest.fn(),
-  setAppDetailStale: jest.fn(),
-  installationDetail: installationStub,
-  onUninstallSuccess: jest.fn(),
-  uninstallApp: jest.fn(),
-  getFieldHelpers: jest.fn(),
-  ...mockWithFormik({ terminatedReason: '' }),
-} as ConfirmUninstallProps & FormikProps<TerminatedValues>
-
-describe('ConfirmUninstall', () => {
-  it('should match a snapshot when FORMSTATE is PENDING', () => {
-    expect(shallow(<ConfirmUninstall {...props} />)).toMatchSnapshot()
-  })
-
-  it('should match a snapshot when FORMSTATE is SUBMITTING', () => {
-    const newProps = { ...props, formState: 'SUBMITTING' as FormState }
-    expect(shallow(<ConfirmUninstall {...newProps} />)).toMatchSnapshot()
-  })
-
-  it('should match a snapshot when FORMSTATE is SUCCESS', () => {
-    const newProps = { ...props, formState: 'SUCCESS' as FormState }
-    expect(shallow(<ConfirmUninstall {...newProps} />)).toMatchSnapshot()
-  })
-
-  describe('handleSuccessUninstall', () => {
-    it('should run correctly', () => {
-      const onUninstallSuccess = jest.fn()
-      const setFormState = jest.fn()
-      const setAppDetailStale = jest.fn()
-      handleSuccessUninstall({
-        onUninstallSuccess,
-        setFormState,
-        setAppDetailStale,
-        isSetAppDetailStaleAfterUninstallSuccess: true,
-      })()
-      expect(onUninstallSuccess).toBeCalled()
-      expect(setAppDetailStale).toBeCalled()
-    })
-  })
-
-  describe('handleSubmit', () => {
-    it('should run corectly', () => {
-      const mockValues = {
-        terminatedReason: 'test',
-      }
-      const mockProps = {
-        uninstallApp: jest.fn(),
-      }
-      handleSubmit(mockValues, { props: mockProps })
-      expect(mockProps.uninstallApp).toBeCalled()
-    })
-  })
-
-  describe('mapStateToProps', () => {
-    it('should run correctly', () => {
-      const mockState = {
-        installations: {
-          formState: 'PENDING',
-        },
-      } as ReduxState
-      const expected = {
-        formState: 'PENDING',
-      }
-      const result = mapStateToProps(mockState)
-      expect(result).toEqual(expected)
-    })
-  })
-
-  describe('mapDispatchToProps', () => {
-    const dispatch = jest.fn()
-    const fn = mapDispatchToProps(dispatch)
-    it('setFormState', () => {
-      fn.setFormState('PENDING')
-      expect(dispatch).toBeCalled()
-    })
-    it('setFormState', () => {
-      fn.uninstallApp({ installationId: '1' } as UninstallParams)
-      expect(dispatch).toBeCalled()
-    })
-  })
-})
diff --git a/packages/marketplace/src/components/ui/app-installations/confirm-uninstall.tsx b/packages/marketplace/src/components/ui/app-installations/confirm-uninstall.tsx
deleted file mode 100644
index e717e564ef..0000000000
--- a/packages/marketplace/src/components/ui/app-installations/confirm-uninstall.tsx
+++ /dev/null
@@ -1,191 +0,0 @@
-import * as React from 'react'
-import { compose, Dispatch } from 'redux'
-import { connect } from 'react-redux'
-import { InstallationModel } from '@reapit/foundations-ts-definitions'
-import {
-  ModalHeader,
-  ModalBody,
-  TextArea,
-  withFormik as formik,
-  FormikProps,
-  ModalFooter,
-  Button,
-  SubTitleH6,
-} from '@reapit/elements'
-import {
-  UninstallParams,
-  appInstallationsRequestUninstall,
-  appInstallationsSetFormState,
-} from '@/actions/app-installations'
-import { FormState, ReduxState } from '@/types/core'
-import CallToAction from '../call-to-action'
-import { setAppDetailStale } from '@/actions/app-detail'
-
-export interface ConfirmUninstallInnerProps {
-  appName: string
-  installationDetail: InstallationModel | undefined
-  onUninstallSuccess: () => void
-  afterClose?: () => void
-  isSetAppDetailStaleAfterUninstallSuccess?: boolean
-}
-export interface ConfirmUninstallMappedProps {
-  formState: FormState
-}
-
-export interface ConfirmUninstallMappedActions {
-  setFormState: (formState: FormState) => void
-  uninstallApp: (params: UninstallParams) => void
-  setAppDetailStale: (stale: boolean) => void
-}
-
-export type ConfirmUninstallProps = ConfirmUninstallInnerProps &
-  ConfirmUninstallMappedProps &
-  ConfirmUninstallMappedActions &
-  FormikProps<TerminatedValues>
-
-export const handleSuccessUninstall = ({
-  onUninstallSuccess,
-  setFormState,
-  setAppDetailStale,
-  isSetAppDetailStaleAfterUninstallSuccess,
-}) => () => {
-  onUninstallSuccess()
-  setFormState('PENDING')
-  if (isSetAppDetailStaleAfterUninstallSuccess) {
-    setAppDetailStale(true)
-  }
-}
-
-export const ConfirmUninstall: React.FC<ConfirmUninstallProps> = ({
-  appName,
-  afterClose,
-  formState,
-  setFormState,
-  installationDetail,
-  onUninstallSuccess,
-  handleSubmit,
-  setAppDetailStale,
-  isSetAppDetailStaleAfterUninstallSuccess = true,
-}) => {
-  const isSuccessed = formState === 'SUCCESS'
-  const isSubmitting = formState === 'SUBMITTING'
-
-  if (isSuccessed) {
-    return (
-      <CallToAction
-        title="Success"
-        buttonText="Back to List"
-        dataTest="alertUninstallSuccess"
-        onButtonClick={handleSuccessUninstall({
-          onUninstallSuccess,
-          setFormState,
-          setAppDetailStale,
-          isSetAppDetailStaleAfterUninstallSuccess,
-        })}
-        isCenter
-      >
-        <div className="mb-3">
-          &lsquo;{appName}&rsquo; has been successfully uninstalled from &lsquo;{installationDetail?.client}&rsquo;
-        </div>
-      </CallToAction>
-    )
-  }
-
-  return (
-    <>
-      <ModalHeader title="Confirm Uninstall" afterClose={afterClose as () => void} />
-      <ModalBody
-        body={
-          <>
-            <SubTitleH6>
-              Are you sure you wish to uninstall &lsquo;{appName}&rsquo; from ‘{installationDetail?.client}’?
-            </SubTitleH6>
-            <SubTitleH6>&#42;Please confirm reason for uninstalling</SubTitleH6>
-            <TextArea name="terminatedReason" id="terminatedReason" labelText="" />
-          </>
-        }
-      />
-      <ModalFooter
-        footerItems={
-          <>
-            <Button
-              type="button"
-              variant="primary"
-              loading={isSubmitting}
-              disabled={isSubmitting}
-              onClick={handleSubmit}
-              className="mx-4"
-              fullWidth
-            >
-              Yes, Uninstall
-            </Button>
-            <Button
-              type="button"
-              variant="danger"
-              disabled={isSubmitting}
-              onClick={afterClose}
-              className="mx-4"
-              fullWidth
-            >
-              Cancel
-            </Button>
-          </>
-        }
-      />
-    </>
-  )
-}
-
-// Redux
-
-export const mapStateToProps = (state: ReduxState): ConfirmUninstallMappedProps => ({
-  formState: state.installations.formState,
-})
-
-export const mapDispatchToProps = (dispatch: Dispatch): ConfirmUninstallMappedActions => ({
-  setFormState: (formState: FormState) => dispatch(appInstallationsSetFormState(formState)),
-  uninstallApp: (params: UninstallParams) => dispatch(appInstallationsRequestUninstall(params)),
-  setAppDetailStale: (stale: boolean) => dispatch(setAppDetailStale(stale)),
-})
-
-const withConnect = connect(mapStateToProps, mapDispatchToProps)
-
-// Formik
-export interface TerminatedValues {
-  terminatedReason: string
-}
-
-export interface TerminatedErrors {
-  terminatedReason: string
-}
-
-export const mapPropsToValues = (): TerminatedValues => ({
-  terminatedReason: '',
-})
-
-export const handleSubmit = (values: TerminatedValues, { props }) => {
-  const { id = '', appId = '' } = props.installationDetail || {}
-  const params: UninstallParams = {
-    installationId: id,
-    appId: appId,
-    terminatedReason: values.terminatedReason,
-  }
-  props.uninstallApp(params)
-}
-
-export const validate = (values: TerminatedValues) => {
-  let errors = {} as TerminatedErrors
-  if (!values.terminatedReason) {
-    errors.terminatedReason = 'Required'
-  }
-  return errors
-}
-
-export const withFormik = formik({
-  displayName: 'Terminated',
-  mapPropsToValues: mapPropsToValues,
-  validate: validate,
-  handleSubmit: handleSubmit,
-})
-
-export default compose<React.FC<ConfirmUninstallInnerProps>>(withConnect, withFormik)(ConfirmUninstall)
diff --git a/packages/marketplace/src/components/ui/app-installations/confirm-uninstall/__tests__/__snapshots__/confirm-uninstall.test.tsx.snap b/packages/marketplace/src/components/ui/app-installations/confirm-uninstall/__tests__/__snapshots__/confirm-uninstall.test.tsx.snap
new file mode 100644
index 0000000000..cdabbba067
--- /dev/null
+++ b/packages/marketplace/src/components/ui/app-installations/confirm-uninstall/__tests__/__snapshots__/confirm-uninstall.test.tsx.snap
@@ -0,0 +1,286 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ConfirmUninstall should match a snapshot 1`] = `
+<Provider
+  store={
+    Object {
+      "clearActions": [Function],
+      "dispatch": [Function],
+      "getActions": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+    }
+  }
+>
+  <Component
+    afterClose={[MockFunction]}
+    appName="1"
+    installationDetail={
+      Object {
+        "appId": "062a376c-f5a3-46a0-a64b-e4bc6e5af2c1",
+        "client": "DXX",
+        "created": "2019-12-03T05:33:20",
+        "id": "b3c2f644-3241-4298-b320-b0398ff492f9",
+        "links": Array [
+          Object {
+            "action": "GET",
+            "href": "http://dev.platformmarketplace.reapit.net/installations/b3c2f644-3241-4298-b320-b0398ff492f9",
+            "rel": "self",
+          },
+          Object {
+            "action": "GET",
+            "href": "http://dev.platformmarketplace.reapit.net/apps/062a376c-f5a3-46a0-a64b-e4bc6e5af2c1",
+            "rel": "app",
+          },
+        ],
+        "status": "Active",
+      }
+    }
+    onUninstallSuccess={[MockFunction]}
+  >
+    <Formik
+      initialValues={
+        Object {
+          "terminatedReason": "",
+        }
+      }
+      onSubmit={[Function]}
+      validationSchema={
+        ObjectSchema {
+          "_blacklist": RefSet {
+            "list": Set {},
+            "refs": Map {},
+          },
+          "_conditions": Array [],
+          "_defaultDefault": [Function],
+          "_deps": Array [],
+          "_excludedEdges": Array [],
+          "_exclusive": Object {},
+          "_mutate": undefined,
+          "_nodes": Array [
+            "terminatedReason",
+          ],
+          "_options": Object {
+            "abortEarly": true,
+            "recursive": true,
+          },
+          "_type": "object",
+          "_typeError": [Function],
+          "_whitelist": RefSet {
+            "list": Set {},
+            "refs": Map {},
+          },
+          "fields": Object {
+            "terminatedReason": StringSchema {
+              "_blacklist": RefSet {
+                "list": Set {},
+                "refs": Map {},
+              },
+              "_conditions": Array [],
+              "_deps": Array [],
+              "_exclusive": Object {
+                "min": true,
+                "required": true,
+                "trim": false,
+              },
+              "_mutate": undefined,
+              "_options": Object {
+                "abortEarly": true,
+                "recursive": true,
+              },
+              "_type": "string",
+              "_typeError": [Function],
+              "_whitelist": RefSet {
+                "list": Set {},
+                "refs": Map {},
+              },
+              "tests": Array [
+                [Function],
+                [Function],
+                [Function],
+              ],
+              "transforms": Array [
+                [Function],
+                [Function],
+              ],
+              "type": "string",
+            },
+          },
+          "tests": Array [],
+          "transforms": Array [
+            [Function],
+          ],
+          "type": "object",
+        }
+      }
+    >
+      <Form>
+        <form
+          action="#"
+          onReset={[Function]}
+          onSubmit={[Function]}
+        >
+          <Component
+            afterClose={[MockFunction]}
+            title="Confirm Uninstall"
+          >
+            <header
+              className="modal-card-head"
+            >
+              <h4
+                className="modal-card-title is-4"
+              >
+                Confirm Uninstall
+              </h4>
+              <button
+                aria-label="close"
+                className="delete"
+                data-test="modal-close-button"
+                onClick={[Function]}
+              />
+            </header>
+          </Component>
+          <Component
+            body={
+              <React.Fragment>
+                <Unknown>
+                  Are you sure you wish to uninstall ‘
+                  1
+                  ’ from ‘
+                  DXX
+                  ’?
+                </Unknown>
+                <Unknown>
+                  *Please confirm reason for uninstalling
+                </Unknown>
+                <Unknown
+                  id="terminatedReason"
+                  name="terminatedReason"
+                />
+              </React.Fragment>
+            }
+          >
+            <section
+              className="modal-card-body"
+            >
+              <Component>
+                <h6
+                  className="subtitle is-6  "
+                  id=""
+                >
+                  Are you sure you wish to uninstall ‘
+                  1
+                  ’ from ‘
+                  DXX
+                  ’?
+                </h6>
+              </Component>
+              <Component>
+                <h6
+                  className="subtitle is-6  "
+                  id=""
+                >
+                  *Please confirm reason for uninstalling
+                </h6>
+              </Component>
+              <Component
+                id="terminatedReason"
+                name="terminatedReason"
+              >
+                <Field
+                  name="terminatedReason"
+                  validate={null}
+                >
+                  <div
+                    className="field"
+                  >
+                    <div
+                      className="control"
+                    >
+                      <textarea
+                        className="textarea is-primary"
+                        data-test=""
+                        id="terminatedReason"
+                        name="terminatedReason"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        placeholder=""
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </Field>
+              </Component>
+            </section>
+          </Component>
+          <Component
+            footerItems={
+              <React.Fragment>
+                <Unknown
+                  className="mx-4"
+                  disabled={false}
+                  fullWidth={true}
+                  loading={false}
+                  type="submit"
+                >
+                  Yes, Uninstall
+                </Unknown>
+                <Unknown
+                  className="mx-4"
+                  disabled={false}
+                  fullWidth={true}
+                  onClick={[MockFunction]}
+                  type="button"
+                  variant="danger"
+                >
+                  Cancel
+                </Unknown>
+              </React.Fragment>
+            }
+          >
+            <footer
+              className="modal-card-foot"
+            >
+              <Component
+                className="mx-4"
+                disabled={false}
+                fullWidth={true}
+                loading={false}
+                type="submit"
+              >
+                <button
+                  className="button mx-4 is-primary is-fullwidth "
+                  data-test=""
+                  disabled={false}
+                  type="submit"
+                >
+                  Yes, Uninstall
+                </button>
+              </Component>
+              <Component
+                className="mx-4"
+                disabled={false}
+                fullWidth={true}
+                onClick={[MockFunction]}
+                type="button"
+                variant="danger"
+              >
+                <button
+                  className="button mx-4 is-danger is-fullwidth "
+                  data-test=""
+                  disabled={false}
+                  onClick={[MockFunction]}
+                  type="button"
+                >
+                  Cancel
+                </button>
+              </Component>
+            </footer>
+          </Component>
+        </form>
+      </Form>
+    </Formik>
+  </Component>
+</Provider>
+`;
diff --git a/packages/marketplace/src/components/ui/app-installations/confirm-uninstall/__tests__/confirm-uninstall.test.tsx b/packages/marketplace/src/components/ui/app-installations/confirm-uninstall/__tests__/confirm-uninstall.test.tsx
new file mode 100644
index 0000000000..898dab7b52
--- /dev/null
+++ b/packages/marketplace/src/components/ui/app-installations/confirm-uninstall/__tests__/confirm-uninstall.test.tsx
@@ -0,0 +1,83 @@
+import * as React from 'react'
+import { mount } from 'enzyme'
+import * as ReactRedux from 'react-redux'
+import configureStore from 'redux-mock-store'
+import appState from '@/reducers/__stubs__/app-state'
+import ConfirmUninstall, { ConfirmUninstallProps, handleSuccessUninstall, handleSubmit } from '../confirm-uninstall'
+import { installationStub } from '@/sagas/__stubs__/installation'
+import {
+  appInstallationsSetFormState,
+  UninstallParams,
+  appInstallationsRequestUninstall,
+} from '@/actions/app-installations'
+import { setAppDetailStale } from '@/actions/app-detail'
+
+const props: ConfirmUninstallProps = {
+  appName: '1',
+  afterClose: jest.fn(),
+  installationDetail: installationStub,
+  onUninstallSuccess: jest.fn(),
+}
+
+describe('ConfirmUninstall', () => {
+  let store
+  let spyDispatch
+  beforeEach(() => {
+    /* mocking store */
+    const mockStore = configureStore()
+    store = mockStore(appState)
+    spyDispatch = jest.spyOn(ReactRedux, 'useDispatch').mockImplementation(() => store.dispatch)
+  })
+
+  it('should match a snapshot', () => {
+    expect(
+      mount(
+        <ReactRedux.Provider store={store}>
+          <ConfirmUninstall {...props} />
+        </ReactRedux.Provider>,
+      ),
+    ).toMatchSnapshot()
+  })
+
+  describe('handleSuccessUninstall', () => {
+    it('should run correctly', () => {
+      const onUninstallSuccess = jest.fn()
+      const isSetAppDetailStaleAfterUninstallSuccess = true
+      const fn = handleSuccessUninstall(onUninstallSuccess, spyDispatch, isSetAppDetailStaleAfterUninstallSuccess)
+      fn()
+      expect(onUninstallSuccess).toBeCalled()
+      expect(spyDispatch).toBeCalledWith(appInstallationsSetFormState('PENDING'))
+      expect(spyDispatch).toBeCalledWith(setAppDetailStale(true))
+      spyDispatch.mockClear()
+    })
+  })
+
+  describe('handleSuccessUninstall', () => {
+    it('should run correctly', () => {
+      const onUninstallSuccess = jest.fn()
+      const isSetAppDetailStaleAfterUninstallSuccess = false
+      const fn = handleSuccessUninstall(onUninstallSuccess, spyDispatch, isSetAppDetailStaleAfterUninstallSuccess)
+      fn()
+      expect(onUninstallSuccess).toBeCalled()
+      expect(spyDispatch).toBeCalledWith(appInstallationsSetFormState('PENDING'))
+      expect(spyDispatch).not.toBeCalledWith(setAppDetailStale(true))
+    })
+  })
+
+  describe('handleSubmit', () => {
+    it('should run correctly', () => {
+      const { id = '', appId = '' } = props.installationDetail || {}
+      const formValues = {
+        terminatedReason: 'testtttttt',
+      }
+      const fn = handleSubmit(spyDispatch, props.installationDetail)
+      fn(formValues)
+      const params: UninstallParams = {
+        installationId: id,
+        appId: appId,
+        terminatedReason: formValues.terminatedReason,
+      }
+      expect(spyDispatch).toBeCalledWith(appInstallationsRequestUninstall(params))
+    })
+  })
+})
diff --git a/packages/marketplace/src/components/ui/app-installations/confirm-uninstall/confirm-uninstall.tsx b/packages/marketplace/src/components/ui/app-installations/confirm-uninstall/confirm-uninstall.tsx
new file mode 100644
index 0000000000..4bbfd3f06e
--- /dev/null
+++ b/packages/marketplace/src/components/ui/app-installations/confirm-uninstall/confirm-uninstall.tsx
@@ -0,0 +1,130 @@
+import * as React from 'react'
+import { Dispatch } from 'redux'
+import { useSelector, useDispatch } from 'react-redux'
+import { InstallationModel } from '@reapit/foundations-ts-definitions'
+import { ModalHeader, ModalBody, TextArea, ModalFooter, Button, SubTitleH6, Formik, Form } from '@reapit/elements'
+import {
+  UninstallParams,
+  appInstallationsRequestUninstall,
+  appInstallationsSetFormState,
+} from '@/actions/app-installations'
+import CallToAction from '@/components/ui/call-to-action'
+import { setAppDetailStale } from '@/actions/app-detail'
+import { selectInstallationFormState } from '@/selector/installations'
+import formFields from './form-schema/form-fields'
+import validationSchema from './form-schema/validation-schema'
+
+const { terminatedReasonField } = formFields
+
+export type ConfirmUninstallProps = {
+  appName: string
+  installationDetail: InstallationModel | undefined
+  onUninstallSuccess: () => void
+  afterClose?: () => void
+  isSetAppDetailStaleAfterUninstallSuccess?: boolean
+}
+
+export type ConfirmUninstallFormValues = {
+  terminatedReason: string
+}
+
+export const initialValues: ConfirmUninstallFormValues = {
+  terminatedReason: '',
+}
+
+export const handleSuccessUninstall = (
+  onUninstallSuccess: () => void,
+  dispatch: Dispatch,
+  isSetAppDetailStaleAfterUninstallSuccess: boolean,
+) => () => {
+  onUninstallSuccess()
+  dispatch(appInstallationsSetFormState('PENDING'))
+  if (isSetAppDetailStaleAfterUninstallSuccess) {
+    dispatch(setAppDetailStale(true))
+  }
+}
+
+export const handleSubmit = (dispatch: Dispatch, installationDetail?: InstallationModel) => {
+  return (values: ConfirmUninstallFormValues) => {
+    const { id = '', appId = '' } = installationDetail || {}
+    const params: UninstallParams = {
+      installationId: id,
+      appId: appId,
+      terminatedReason: values.terminatedReason,
+    }
+    dispatch(appInstallationsRequestUninstall(params))
+  }
+}
+
+export const ConfirmUninstall: React.FC<ConfirmUninstallProps> = ({
+  appName,
+  afterClose,
+  installationDetail,
+  onUninstallSuccess,
+  isSetAppDetailStaleAfterUninstallSuccess = true,
+}) => {
+  const dispatch = useDispatch()
+  const formState = useSelector(selectInstallationFormState)
+  const isSuccess = formState === 'SUCCESS'
+  const isSubmitting = formState === 'SUBMITTING'
+
+  if (isSuccess) {
+    return (
+      <CallToAction
+        title="Success"
+        buttonText="Back to App"
+        dataTest="alertUninstallSuccess"
+        onButtonClick={handleSuccessUninstall(onUninstallSuccess, dispatch, isSetAppDetailStaleAfterUninstallSuccess)}
+        isCenter
+      >
+        <div className="mb-3">
+          &lsquo;{appName}&rsquo; has been successfully uninstalled from &lsquo;{installationDetail?.client}&rsquo;
+        </div>
+      </CallToAction>
+    )
+  }
+
+  return (
+    <Formik
+      initialValues={initialValues}
+      onSubmit={handleSubmit(dispatch, installationDetail)}
+      validationSchema={validationSchema}
+    >
+      <Form>
+        <ModalHeader title="Confirm Uninstall" afterClose={afterClose as () => void} />
+        <ModalBody
+          body={
+            <>
+              <SubTitleH6>
+                Are you sure you wish to uninstall &lsquo;{appName}&rsquo; from ‘{installationDetail?.client}’?
+              </SubTitleH6>
+              <SubTitleH6>&#42;Please confirm reason for uninstalling</SubTitleH6>
+              <TextArea name={terminatedReasonField.name} id={terminatedReasonField.name} />
+            </>
+          }
+        />
+        <ModalFooter
+          footerItems={
+            <>
+              <Button type="submit" loading={isSubmitting} disabled={isSubmitting} className="mx-4" fullWidth>
+                Yes, Uninstall
+              </Button>
+              <Button
+                type="button"
+                variant="danger"
+                disabled={isSubmitting}
+                onClick={afterClose}
+                className="mx-4"
+                fullWidth
+              >
+                Cancel
+              </Button>
+            </>
+          }
+        />
+      </Form>
+    </Formik>
+  )
+}
+
+export default ConfirmUninstall
diff --git a/packages/marketplace/src/components/ui/app-installations/confirm-uninstall/form-schema/form-fields.ts b/packages/marketplace/src/components/ui/app-installations/confirm-uninstall/form-schema/form-fields.ts
new file mode 100644
index 0000000000..78fec99aef
--- /dev/null
+++ b/packages/marketplace/src/components/ui/app-installations/confirm-uninstall/form-schema/form-fields.ts
@@ -0,0 +1,10 @@
+import { FormFieldInfo } from '@reapit/elements'
+type Field = 'terminatedReasonField'
+
+const formFields: Record<Field, FormFieldInfo> = {
+  terminatedReasonField: {
+    name: 'terminatedReason',
+  },
+}
+
+export default formFields
diff --git a/packages/marketplace/src/components/ui/app-installations/confirm-uninstall/form-schema/validation-schema.ts b/packages/marketplace/src/components/ui/app-installations/confirm-uninstall/form-schema/validation-schema.ts
new file mode 100644
index 0000000000..91b954c02b
--- /dev/null
+++ b/packages/marketplace/src/components/ui/app-installations/confirm-uninstall/form-schema/validation-schema.ts
@@ -0,0 +1,16 @@
+import * as Yup from 'yup'
+import formFields from './form-fields'
+import errorMessages from '@/constants/error-messages'
+
+const { FIELD_REQUIRED, MINIMUM_CHARACTER_LENGTH } = errorMessages
+
+const { terminatedReasonField } = formFields
+
+const confirmUninstallValidationSchema = Yup.object().shape({
+  [terminatedReasonField.name]: Yup.string()
+    .trim()
+    .required(FIELD_REQUIRED)
+    .min(10, MINIMUM_CHARACTER_LENGTH(10)),
+})
+
+export default confirmUninstallValidationSchema
diff --git a/packages/marketplace/src/components/ui/app-installations/confirm-uninstall/index.ts b/packages/marketplace/src/components/ui/app-installations/confirm-uninstall/index.ts
new file mode 100644
index 0000000000..23b89562de
--- /dev/null
+++ b/packages/marketplace/src/components/ui/app-installations/confirm-uninstall/index.ts
@@ -0,0 +1,2 @@
+import ConfirmUninstall from './confirm-uninstall'
+export default ConfirmUninstall

From 0121d14d9462d34ce445c1d67da503f4086e0b84 Mon Sep 17 00:00:00 2001
From: Vu Nguyen <vunp@reapit.com>
Date: Tue, 23 Jun 2020 10:19:33 +0700
Subject: [PATCH 2/4] refactor: #1325 Replace classnames with cx from linaria

---
 .../src/components/FileInput/index.tsx        |  8 +---
 .../src/components/RadioSelect/index.tsx      | 11 ++---
 .../src/components/TextArea/index.tsx         |  6 ++-
 .../components/breadcrumb/breadcrumb-item.tsx |  6 +--
 .../breadcrumb/breadcrumb-separator.tsx       |  4 +-
 .../__snapshots__/client.test.tsx.snap        | 48 +++++++++----------
 .../developer-submit-app.test.tsx.snap        | 40 ++++++++--------
 .../general-information-section.test.tsx.snap |  4 +-
 .../confirm-uninstall.test.tsx.snap           |  2 +-
 .../config-modal-inner.test.tsx.snap          | 40 ++++++++--------
 10 files changed, 81 insertions(+), 88 deletions(-)

diff --git a/packages/elements/src/components/FileInput/index.tsx b/packages/elements/src/components/FileInput/index.tsx
index 51c503b331..2996bed533 100644
--- a/packages/elements/src/components/FileInput/index.tsx
+++ b/packages/elements/src/components/FileInput/index.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { Field, FieldProps, FieldInputProps } from 'formik'
 import { isBase64 } from '../../utils/is-base64'
 import { checkError } from '../../utils/form'
-import classnames from 'classnames'
+import { cx } from 'linaria'
 
 const { useState } = React
 
@@ -65,11 +65,7 @@ export const FileInput = ({
 }: FileInputProps) => {
   const [fileUrl, setFileName] = useState<string>()
   const inputFile = React.useRef<HTMLInputElement>(null)
-  const fileInputContainerClassName = classnames({
-    control: true,
-    'file-input-container': true,
-    'is-full-width': !isNarrowWidth,
-  })
+  const fileInputContainerClassName = cx('control', 'file-input-container', !isNarrowWidth && 'is-full-width')
 
   return (
     <Field name={name}>
diff --git a/packages/elements/src/components/RadioSelect/index.tsx b/packages/elements/src/components/RadioSelect/index.tsx
index 6d612aeb0c..8c5b111add 100644
--- a/packages/elements/src/components/RadioSelect/index.tsx
+++ b/packages/elements/src/components/RadioSelect/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import classnames from 'classnames'
+import { cx } from 'linaria'
 import { Field, FieldProps } from 'formik'
 import { checkError } from '../../utils/form'
 import { Grid, GridItem } from '../Layout'
@@ -36,13 +36,8 @@ export const RadioSelect: React.FC<RadioSelectProps> = ({
   isHorizontal = false,
   className = '',
 }) => {
-  const radioGridClassName = classnames({
-    'is-gapless': !isHorizontal,
-  })
-  const radioGridItemClassName = classnames({
-    'is-full': !isHorizontal,
-    'is-narrow': isHorizontal,
-  })
+  const radioGridClassName = cx(!isHorizontal && 'is-gapless')
+  const radioGridItemClassName = cx(isHorizontal ? 'is-narrow' : 'is-full')
 
   return (
     <Field type="radio" name={name}>
diff --git a/packages/elements/src/components/TextArea/index.tsx b/packages/elements/src/components/TextArea/index.tsx
index 7b05c1aeee..bfb36fe4bf 100644
--- a/packages/elements/src/components/TextArea/index.tsx
+++ b/packages/elements/src/components/TextArea/index.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { Field, FieldProps } from 'formik'
+import { cx } from 'linaria'
 import { checkError } from '../../utils/form'
 
 export interface TextAreaProps {
@@ -27,12 +28,13 @@ export const TextArea = ({
   <Field name={name} validate={required ? validate : null}>
     {({ field, meta }: FieldProps<string>) => {
       const hasError = checkError(meta)
-      const className = hasError ? textareaError : textareaPrimary
+      const className = cx(hasError ? textareaError : textareaPrimary)
+      const labelClassname = cx('label', required && 'required-label')
       return (
         <div className="field">
           <div className="control">
             {labelText && (
-              <label className={`label ${required ? 'required-label' : ''}`} htmlFor={id}>
+              <label className={labelClassname} htmlFor={id}>
                 {labelText}
               </label>
             )}
diff --git a/packages/elements/src/v2/src/components/breadcrumb/breadcrumb-item.tsx b/packages/elements/src/v2/src/components/breadcrumb/breadcrumb-item.tsx
index e7ca87df44..420e21c457 100644
--- a/packages/elements/src/v2/src/components/breadcrumb/breadcrumb-item.tsx
+++ b/packages/elements/src/v2/src/components/breadcrumb/breadcrumb-item.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import classNames from 'classnames'
+import { cx } from 'linaria'
 import { breadcrumbItem, breadcrumbBold, breadcrumbLastItem } from './__styles__/styles'
 
 export type RenderLinksParams = {
@@ -18,7 +18,7 @@ export const renderLinks = ({ children, href, onClick, style, isCurrent, classNa
       <a
         href={href}
         style={style}
-        className={classNames(className, isCurrent && breadcrumbBold, isLast && breadcrumbLastItem)}
+        className={cx(className, isCurrent && breadcrumbBold, isLast && breadcrumbLastItem)}
         onClick={onClick}
       >
         {children}
@@ -28,7 +28,7 @@ export const renderLinks = ({ children, href, onClick, style, isCurrent, classNa
   return (
     <span
       style={style}
-      className={classNames(className, isCurrent && breadcrumbBold, isLast && breadcrumbLastItem)}
+      className={cx(className, isCurrent && breadcrumbBold, isLast && breadcrumbLastItem)}
       onClick={onClick}
     >
       {children}
diff --git a/packages/elements/src/v2/src/components/breadcrumb/breadcrumb-separator.tsx b/packages/elements/src/v2/src/components/breadcrumb/breadcrumb-separator.tsx
index 7387743927..8be4747b51 100644
--- a/packages/elements/src/v2/src/components/breadcrumb/breadcrumb-separator.tsx
+++ b/packages/elements/src/v2/src/components/breadcrumb/breadcrumb-separator.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import classNames from 'classnames'
+import { cx } from 'linaria'
 import { breadcrumbSeparator } from './__styles__/styles'
 
 export interface BreadcrumbSeparatorProps {
@@ -14,7 +14,7 @@ export const BreadcrumbSeparator: React.FC<BreadcrumbSeparatorProps> = ({
   style,
 }: BreadcrumbSeparatorProps) => {
   return (
-    <span style={style} className={classNames(breadcrumbSeparator, className)}>
+    <span style={style} className={cx(breadcrumbSeparator, className)}>
       {children || '/'}
     </span>
   )
diff --git a/packages/marketplace/src/components/pages/client/__tests__/__snapshots__/client.test.tsx.snap b/packages/marketplace/src/components/pages/client/__tests__/__snapshots__/client.test.tsx.snap
index e413d9402c..21db6f820f 100644
--- a/packages/marketplace/src/components/pages/client/__tests__/__snapshots__/client.test.tsx.snap
+++ b/packages/marketplace/src/components/pages/client/__tests__/__snapshots__/client.test.tsx.snap
@@ -362,19 +362,19 @@ exports[`Client should match a snapshot when LOADING false 1`] = `
                                           htmlFor="searchBy"
                                         />
                                         <Component
-                                          className="is-gapless"
+                                          className=""
                                           isMultiLine={true}
                                         >
                                           <div
-                                            className="columns is-multiline is-gapless"
+                                            className="columns is-multiline "
                                             data-test=""
                                           >
                                             <Component
-                                              className="is-full"
+                                              className=""
                                               key="0"
                                             >
                                               <div
-                                                className="column  is-full"
+                                                className="column  "
                                                 data-test=""
                                               >
                                                 <div
@@ -400,11 +400,11 @@ exports[`Client should match a snapshot when LOADING false 1`] = `
                                               </div>
                                             </Component>
                                             <Component
-                                              className="is-full"
+                                              className=""
                                               key="1"
                                             >
                                               <div
-                                                className="column  is-full"
+                                                className="column  "
                                                 data-test=""
                                               >
                                                 <div
@@ -889,19 +889,19 @@ exports[`Client should match a snapshot when LOADING false 2`] = `
                                           htmlFor="searchBy"
                                         />
                                         <Component
-                                          className="is-gapless"
+                                          className=""
                                           isMultiLine={true}
                                         >
                                           <div
-                                            className="columns is-multiline is-gapless"
+                                            className="columns is-multiline "
                                             data-test=""
                                           >
                                             <Component
-                                              className="is-full"
+                                              className=""
                                               key="0"
                                             >
                                               <div
-                                                className="column  is-full"
+                                                className="column  "
                                                 data-test=""
                                               >
                                                 <div
@@ -927,11 +927,11 @@ exports[`Client should match a snapshot when LOADING false 2`] = `
                                               </div>
                                             </Component>
                                             <Component
-                                              className="is-full"
+                                              className=""
                                               key="1"
                                             >
                                               <div
-                                                className="column  is-full"
+                                                className="column  "
                                                 data-test=""
                                               >
                                                 <div
@@ -1416,19 +1416,19 @@ exports[`Client should match a snapshot when featured apps is empty [] 1`] = `
                                           htmlFor="searchBy"
                                         />
                                         <Component
-                                          className="is-gapless"
+                                          className=""
                                           isMultiLine={true}
                                         >
                                           <div
-                                            className="columns is-multiline is-gapless"
+                                            className="columns is-multiline "
                                             data-test=""
                                           >
                                             <Component
-                                              className="is-full"
+                                              className=""
                                               key="0"
                                             >
                                               <div
-                                                className="column  is-full"
+                                                className="column  "
                                                 data-test=""
                                               >
                                                 <div
@@ -1454,11 +1454,11 @@ exports[`Client should match a snapshot when featured apps is empty [] 1`] = `
                                               </div>
                                             </Component>
                                             <Component
-                                              className="is-full"
+                                              className=""
                                               key="1"
                                             >
                                               <div
-                                                className="column  is-full"
+                                                className="column  "
                                                 data-test=""
                                               >
                                                 <div
@@ -2032,19 +2032,19 @@ exports[`Client should match a snapshot when featured apps is undefined 1`] = `
                                           htmlFor="searchBy"
                                         />
                                         <Component
-                                          className="is-gapless"
+                                          className=""
                                           isMultiLine={true}
                                         >
                                           <div
-                                            className="columns is-multiline is-gapless"
+                                            className="columns is-multiline "
                                             data-test=""
                                           >
                                             <Component
-                                              className="is-full"
+                                              className=""
                                               key="0"
                                             >
                                               <div
-                                                className="column  is-full"
+                                                className="column  "
                                                 data-test=""
                                               >
                                                 <div
@@ -2070,11 +2070,11 @@ exports[`Client should match a snapshot when featured apps is undefined 1`] = `
                                               </div>
                                             </Component>
                                             <Component
-                                              className="is-full"
+                                              className=""
                                               key="1"
                                             >
                                               <div
-                                                className="column  is-full"
+                                                className="column  "
                                                 data-test=""
                                               >
                                                 <div
diff --git a/packages/marketplace/src/components/pages/developer-submit-app/__test__/__snapshots__/developer-submit-app.test.tsx.snap b/packages/marketplace/src/components/pages/developer-submit-app/__test__/__snapshots__/developer-submit-app.test.tsx.snap
index aeccb0e37f..2d2b154c11 100644
--- a/packages/marketplace/src/components/pages/developer-submit-app/__test__/__snapshots__/developer-submit-app.test.tsx.snap
+++ b/packages/marketplace/src/components/pages/developer-submit-app/__test__/__snapshots__/developer-submit-app.test.tsx.snap
@@ -495,13 +495,13 @@ exports[`DeveloperSubmitApp should match a snapshot when pendingRevisions = fals
                                             className="control"
                                           >
                                             <label
-                                              className="label required-label"
+                                              className=""
                                               htmlFor="summary"
                                             >
                                               Summary
                                             </label>
                                             <textarea
-                                              className="textarea is-primary"
+                                              className=""
                                               data-test="submit-app-summary"
                                               id="summary"
                                               name="summary"
@@ -1193,19 +1193,19 @@ exports[`DeveloperSubmitApp should match a snapshot when pendingRevisions = fals
                                               htmlFor="authFlow"
                                             />
                                             <Component
-                                              className="is-gapless"
+                                              className=""
                                               isMultiLine={true}
                                             >
                                               <div
-                                                className="columns is-multiline is-gapless"
+                                                className="columns is-multiline "
                                                 data-test=""
                                               >
                                                 <Component
-                                                  className="is-full"
+                                                  className=""
                                                   key="0"
                                                 >
                                                   <div
-                                                    className="column  is-full"
+                                                    className="column  "
                                                     data-test=""
                                                   >
                                                     <div
@@ -1231,11 +1231,11 @@ exports[`DeveloperSubmitApp should match a snapshot when pendingRevisions = fals
                                                   </div>
                                                 </Component>
                                                 <Component
-                                                  className="is-full"
+                                                  className=""
                                                   key="1"
                                                 >
                                                   <div
-                                                    className="column  is-full"
+                                                    className="column  "
                                                     data-test=""
                                                   >
                                                     <div
@@ -1465,19 +1465,19 @@ exports[`DeveloperSubmitApp should match a snapshot when pendingRevisions = fals
                                               htmlFor="isPrivateApp"
                                             />
                                             <Component
-                                              className="is-gapless"
+                                              className=""
                                               isMultiLine={true}
                                             >
                                               <div
-                                                className="columns is-multiline is-gapless"
+                                                className="columns is-multiline "
                                                 data-test=""
                                               >
                                                 <Component
-                                                  className="is-full"
+                                                  className=""
                                                   key="0"
                                                 >
                                                   <div
-                                                    className="column  is-full"
+                                                    className="column  "
                                                     data-test=""
                                                   >
                                                     <div
@@ -1503,11 +1503,11 @@ exports[`DeveloperSubmitApp should match a snapshot when pendingRevisions = fals
                                                   </div>
                                                 </Component>
                                                 <Component
-                                                  className="is-full"
+                                                  className=""
                                                   key="1"
                                                 >
                                                   <div
-                                                    className="column  is-full"
+                                                    className="column  "
                                                     data-test=""
                                                   >
                                                     <div
@@ -1646,7 +1646,7 @@ exports[`DeveloperSubmitApp should match a snapshot when pendingRevisions = fals
                                               className="file is-primary  field pb-2"
                                             >
                                               <div
-                                                className="control file-input-container is-full-width"
+                                                className=""
                                               >
                                                 <label
                                                   className="file-label"
@@ -1711,7 +1711,7 @@ exports[`DeveloperSubmitApp should match a snapshot when pendingRevisions = fals
                                               className="file is-primary  field pb-2"
                                             >
                                               <div
-                                                className="control file-input-container is-full-width"
+                                                className=""
                                               >
                                                 <label
                                                   className="file-label"
@@ -1775,7 +1775,7 @@ exports[`DeveloperSubmitApp should match a snapshot when pendingRevisions = fals
                                               className="file is-primary  field pb-2"
                                             >
                                               <div
-                                                className="control file-input-container is-full-width"
+                                                className=""
                                               >
                                                 <label
                                                   className="file-label"
@@ -1839,7 +1839,7 @@ exports[`DeveloperSubmitApp should match a snapshot when pendingRevisions = fals
                                               className="file is-primary  field pb-2"
                                             >
                                               <div
-                                                className="control file-input-container is-full-width"
+                                                className=""
                                               >
                                                 <label
                                                   className="file-label"
@@ -1903,7 +1903,7 @@ exports[`DeveloperSubmitApp should match a snapshot when pendingRevisions = fals
                                               className="file is-primary  field pb-2"
                                             >
                                               <div
-                                                className="control file-input-container is-full-width"
+                                                className=""
                                               >
                                                 <label
                                                   className="file-label"
@@ -1967,7 +1967,7 @@ exports[`DeveloperSubmitApp should match a snapshot when pendingRevisions = fals
                                               className="file is-primary  field pb-2"
                                             >
                                               <div
-                                                className="control file-input-container is-full-width"
+                                                className=""
                                               >
                                                 <label
                                                   className="file-label"
diff --git a/packages/marketplace/src/components/pages/developer-submit-app/__test__/__snapshots__/general-information-section.test.tsx.snap b/packages/marketplace/src/components/pages/developer-submit-app/__test__/__snapshots__/general-information-section.test.tsx.snap
index 45f092e89f..9978dc86e2 100644
--- a/packages/marketplace/src/components/pages/developer-submit-app/__test__/__snapshots__/general-information-section.test.tsx.snap
+++ b/packages/marketplace/src/components/pages/developer-submit-app/__test__/__snapshots__/general-information-section.test.tsx.snap
@@ -399,13 +399,13 @@ exports[`GeneralInformationSection should match a snapshot 1`] = `
                               className="control"
                             >
                               <label
-                                className="label required-label"
+                                className=""
                                 htmlFor="summary"
                               >
                                 Summary
                               </label>
                               <textarea
-                                className="textarea is-primary"
+                                className=""
                                 data-test="submit-app-summary"
                                 id="summary"
                                 name="summary"
diff --git a/packages/marketplace/src/components/ui/app-installations/confirm-uninstall/__tests__/__snapshots__/confirm-uninstall.test.tsx.snap b/packages/marketplace/src/components/ui/app-installations/confirm-uninstall/__tests__/__snapshots__/confirm-uninstall.test.tsx.snap
index cdabbba067..082a99f0d6 100644
--- a/packages/marketplace/src/components/ui/app-installations/confirm-uninstall/__tests__/__snapshots__/confirm-uninstall.test.tsx.snap
+++ b/packages/marketplace/src/components/ui/app-installations/confirm-uninstall/__tests__/__snapshots__/confirm-uninstall.test.tsx.snap
@@ -199,7 +199,7 @@ exports[`ConfirmUninstall should match a snapshot 1`] = `
                       className="control"
                     >
                       <textarea
-                        className="textarea is-primary"
+                        className=""
                         data-test=""
                         id="terminatedReason"
                         name="terminatedReason"
diff --git a/packages/marketplace/src/components/ui/web-component-config-modal/__test__/__snapshots__/config-modal-inner.test.tsx.snap b/packages/marketplace/src/components/ui/web-component-config-modal/__test__/__snapshots__/config-modal-inner.test.tsx.snap
index 4bb7d8caf4..74821aafa2 100644
--- a/packages/marketplace/src/components/ui/web-component-config-modal/__test__/__snapshots__/config-modal-inner.test.tsx.snap
+++ b/packages/marketplace/src/components/ui/web-component-config-modal/__test__/__snapshots__/config-modal-inner.test.tsx.snap
@@ -308,19 +308,19 @@ exports[`Config-modal-inner should WebComponentConfigModalInner match a snapshot
                           Select a time between each appointment
                         </label>
                         <Component
-                          className="is-gapless"
+                          className=""
                           isMultiLine={true}
                         >
                           <div
-                            className="columns is-multiline is-gapless"
+                            className="columns is-multiline "
                             data-test=""
                           >
                             <Component
-                              className="is-full"
+                              className=""
                               key="0"
                             >
                               <div
-                                className="column  is-full"
+                                className="column  "
                                 data-test=""
                               >
                                 <div
@@ -346,11 +346,11 @@ exports[`Config-modal-inner should WebComponentConfigModalInner match a snapshot
                               </div>
                             </Component>
                             <Component
-                              className="is-full"
+                              className=""
                               key="1"
                             >
                               <div
-                                className="column  is-full"
+                                className="column  "
                                 data-test=""
                               >
                                 <div
@@ -376,11 +376,11 @@ exports[`Config-modal-inner should WebComponentConfigModalInner match a snapshot
                               </div>
                             </Component>
                             <Component
-                              className="is-full"
+                              className=""
                               key="2"
                             >
                               <div
-                                className="column  is-full"
+                                className="column  "
                                 data-test=""
                               >
                                 <div
@@ -406,11 +406,11 @@ exports[`Config-modal-inner should WebComponentConfigModalInner match a snapshot
                               </div>
                             </Component>
                             <Component
-                              className="is-full"
+                              className=""
                               key="3"
                             >
                               <div
-                                className="column  is-full"
+                                className="column  "
                                 data-test=""
                               >
                                 <div
@@ -492,19 +492,19 @@ exports[`Config-modal-inner should WebComponentConfigModalInner match a snapshot
                           Select a length of appointments
                         </label>
                         <Component
-                          className="is-gapless"
+                          className=""
                           isMultiLine={true}
                         >
                           <div
-                            className="columns is-multiline is-gapless"
+                            className="columns is-multiline "
                             data-test=""
                           >
                             <Component
-                              className="is-full"
+                              className=""
                               key="0"
                             >
                               <div
-                                className="column  is-full"
+                                className="column  "
                                 data-test=""
                               >
                                 <div
@@ -530,11 +530,11 @@ exports[`Config-modal-inner should WebComponentConfigModalInner match a snapshot
                               </div>
                             </Component>
                             <Component
-                              className="is-full"
+                              className=""
                               key="1"
                             >
                               <div
-                                className="column  is-full"
+                                className="column  "
                                 data-test=""
                               >
                                 <div
@@ -560,11 +560,11 @@ exports[`Config-modal-inner should WebComponentConfigModalInner match a snapshot
                               </div>
                             </Component>
                             <Component
-                              className="is-full"
+                              className=""
                               key="2"
                             >
                               <div
-                                className="column  is-full"
+                                className="column  "
                                 data-test=""
                               >
                                 <div
@@ -590,11 +590,11 @@ exports[`Config-modal-inner should WebComponentConfigModalInner match a snapshot
                               </div>
                             </Component>
                             <Component
-                              className="is-full"
+                              className=""
                               key="3"
                             >
                               <div
-                                className="column  is-full"
+                                className="column  "
                                 data-test=""
                               >
                                 <div

From 2da896dfe83b3f4e5e138e4bacaa532b9950568a Mon Sep 17 00:00:00 2001
From: Vu Nguyen <vunp@reapit.com>
Date: Tue, 23 Jun 2020 10:42:42 +0700
Subject: [PATCH 3/4] refactor: #1325 Update snapshot tests

---
 .../config-modal-inner.test.tsx.snap          | 386 +++++++++---------
 1 file changed, 202 insertions(+), 184 deletions(-)

diff --git a/packages/marketplace/src/components/ui/web-component-config-modal/__test__/__snapshots__/config-modal-inner.test.tsx.snap b/packages/marketplace/src/components/ui/web-component-config-modal/__test__/__snapshots__/config-modal-inner.test.tsx.snap
index 407f0a5979..474db60cce 100644
--- a/packages/marketplace/src/components/ui/web-component-config-modal/__test__/__snapshots__/config-modal-inner.test.tsx.snap
+++ b/packages/marketplace/src/components/ui/web-component-config-modal/__test__/__snapshots__/config-modal-inner.test.tsx.snap
@@ -306,109 +306,118 @@ exports[`Config-modal-inner should WebComponentConfigModalInner match a snapshot
                       >
                         <Component
                           className=""
-                          isMultiLine={true}
+                          key="0"
                         >
                           <div
-                            className="columns is-multiline "
+                            className="column  "
                             data-test=""
                           >
-                            <Component
-                              className=""
-                              key="0"
+                            <div
+                              className="radio-wrap"
                             >
-                              <div
-                                className="column  "
-                                data-test=""
+                              <input
+                                checked={false}
+                                className="checkbox "
+                                disabled={false}
+                                id="appointmentTimeGap15 mins"
+                                key="15"
+                                name="appointmentTimeGap"
+                                onChange={[Function]}
+                                type="radio"
+                                value={15}
+                              />
+                              <label
+                                htmlFor="appointmentTimeGap15 mins"
                               >
-                                <div
-                                  className="radio-wrap"
-                                >
-                                  <input
-                                    checked={false}
-                                    className="checkbox "
-                                    disabled={false}
-                                    id="appointmentTimeGap15 mins"
-                                    key="15"
-                                    name="appointmentTimeGap"
-                                    onChange={[Function]}
-                                    type="radio"
-                                    value={15}
-                                  />
-                                  <label
-                                    htmlFor="appointmentTimeGap15 mins"
-                                  >
-                                    15 mins
-                                  </label>
-                                </div>
-                              </div>
-                            </Component>
-                            <Component
-                              className=""
-                              key="1"
+                                15 mins
+                              </label>
+                            </div>
+                          </div>
+                        </Component>
+                        <Component
+                          className=""
+                          key="1"
+                        >
+                          <div
+                            className="column  "
+                            data-test=""
+                          >
+                            <div
+                              className="radio-wrap"
                             >
-                              <div
-                                className="column  "
-                                data-test=""
+                              <input
+                                checked={true}
+                                className="checkbox "
+                                disabled={false}
+                                id="appointmentTimeGap30 mins"
+                                key="30"
+                                name="appointmentTimeGap"
+                                onChange={[Function]}
+                                type="radio"
+                                value={30}
+                              />
+                              <label
+                                htmlFor="appointmentTimeGap30 mins"
                               >
-                                <div
-                                  className="radio-wrap"
-                                >
-                                  <input
-                                    checked={true}
-                                    className="checkbox "
-                                    disabled={false}
-                                    id="appointmentTimeGap30 mins"
-                                    key="30"
-                                    name="appointmentTimeGap"
-                                    onChange={[Function]}
-                                    type="radio"
-                                    value={30}
-                                  />
-                                  <label
-                                    htmlFor="appointmentTimeGap30 mins"
-                                  >
-                                    30 mins
-                                  </label>
-                                </div>
-                              </div>
-                            </Component>
-                            <Component
-                              className=""
-                              key="2"
+                                30 mins
+                              </label>
+                            </div>
+                          </div>
+                        </Component>
+                        <Component
+                          className=""
+                          key="2"
+                        >
+                          <div
+                            className="column  "
+                            data-test=""
+                          >
+                            <div
+                              className="radio-wrap"
                             >
-                              <div
-                                className="column  "
-                                data-test=""
+                              <input
+                                checked={false}
+                                className="checkbox "
+                                disabled={false}
+                                id="appointmentTimeGap1hr"
+                                key="60"
+                                name="appointmentTimeGap"
+                                onChange={[Function]}
+                                type="radio"
+                                value={60}
+                              />
+                              <label
+                                htmlFor="appointmentTimeGap1hr"
                               >
-                                <div
-                                  className="radio-wrap"
-                                >
-                                  <input
-                                    checked={false}
-                                    className="checkbox "
-                                    disabled={false}
-                                    id="appointmentTimeGap1hr"
-                                    key="60"
-                                    name="appointmentTimeGap"
-                                    onChange={[Function]}
-                                    type="radio"
-                                    value={60}
-                                  />
-                                  <label
-                                    htmlFor="appointmentTimeGap1hr"
-                                  >
-                                    1hr
-                                  </label>
-                                </div>
-                              </div>
-                            </Component>
-                            <Component
-                              className=""
-                              key="3"
+                                1hr
+                              </label>
+                            </div>
+                          </div>
+                        </Component>
+                        <Component
+                          className=""
+                          key="3"
+                        >
+                          <div
+                            className="column  "
+                            data-test=""
+                          >
+                            <div
+                              className="radio-wrap"
                             >
-                              <div
-                                className="column  "
-                                data-test=""
+                              <input
+                                checked={false}
+                                className="checkbox "
+                                disabled={false}
+                                id="appointmentTimeGap1hr 30mins"
+                                key="90"
+                                name="appointmentTimeGap"
+                                onChange={[Function]}
+                                type="radio"
+                                value={90}
+                              />
+                              <label
+                                htmlFor="appointmentTimeGap1hr 30mins"
                               >
                                 1hr 30mins
                               </label>
@@ -482,109 +491,118 @@ exports[`Config-modal-inner should WebComponentConfigModalInner match a snapshot
                       >
                         <Component
                           className=""
-                          isMultiLine={true}
+                          key="0"
                         >
                           <div
-                            className="columns is-multiline "
+                            className="column  "
                             data-test=""
                           >
-                            <Component
-                              className=""
-                              key="0"
+                            <div
+                              className="radio-wrap"
                             >
-                              <div
-                                className="column  "
-                                data-test=""
+                              <input
+                                checked={false}
+                                className="checkbox "
+                                disabled={false}
+                                id="appointmentLength15 mins"
+                                key="15"
+                                name="appointmentLength"
+                                onChange={[Function]}
+                                type="radio"
+                                value={15}
+                              />
+                              <label
+                                htmlFor="appointmentLength15 mins"
                               >
-                                <div
-                                  className="radio-wrap"
-                                >
-                                  <input
-                                    checked={false}
-                                    className="checkbox "
-                                    disabled={false}
-                                    id="appointmentLength15 mins"
-                                    key="15"
-                                    name="appointmentLength"
-                                    onChange={[Function]}
-                                    type="radio"
-                                    value={15}
-                                  />
-                                  <label
-                                    htmlFor="appointmentLength15 mins"
-                                  >
-                                    15 mins
-                                  </label>
-                                </div>
-                              </div>
-                            </Component>
-                            <Component
-                              className=""
-                              key="1"
+                                15 mins
+                              </label>
+                            </div>
+                          </div>
+                        </Component>
+                        <Component
+                          className=""
+                          key="1"
+                        >
+                          <div
+                            className="column  "
+                            data-test=""
+                          >
+                            <div
+                              className="radio-wrap"
                             >
-                              <div
-                                className="column  "
-                                data-test=""
+                              <input
+                                checked={true}
+                                className="checkbox "
+                                disabled={false}
+                                id="appointmentLength30 mins"
+                                key="30"
+                                name="appointmentLength"
+                                onChange={[Function]}
+                                type="radio"
+                                value={30}
+                              />
+                              <label
+                                htmlFor="appointmentLength30 mins"
                               >
-                                <div
-                                  className="radio-wrap"
-                                >
-                                  <input
-                                    checked={true}
-                                    className="checkbox "
-                                    disabled={false}
-                                    id="appointmentLength30 mins"
-                                    key="30"
-                                    name="appointmentLength"
-                                    onChange={[Function]}
-                                    type="radio"
-                                    value={30}
-                                  />
-                                  <label
-                                    htmlFor="appointmentLength30 mins"
-                                  >
-                                    30 mins
-                                  </label>
-                                </div>
-                              </div>
-                            </Component>
-                            <Component
-                              className=""
-                              key="2"
+                                30 mins
+                              </label>
+                            </div>
+                          </div>
+                        </Component>
+                        <Component
+                          className=""
+                          key="2"
+                        >
+                          <div
+                            className="column  "
+                            data-test=""
+                          >
+                            <div
+                              className="radio-wrap"
                             >
-                              <div
-                                className="column  "
-                                data-test=""
+                              <input
+                                checked={false}
+                                className="checkbox "
+                                disabled={false}
+                                id="appointmentLength1hr"
+                                key="60"
+                                name="appointmentLength"
+                                onChange={[Function]}
+                                type="radio"
+                                value={60}
+                              />
+                              <label
+                                htmlFor="appointmentLength1hr"
                               >
-                                <div
-                                  className="radio-wrap"
-                                >
-                                  <input
-                                    checked={false}
-                                    className="checkbox "
-                                    disabled={false}
-                                    id="appointmentLength1hr"
-                                    key="60"
-                                    name="appointmentLength"
-                                    onChange={[Function]}
-                                    type="radio"
-                                    value={60}
-                                  />
-                                  <label
-                                    htmlFor="appointmentLength1hr"
-                                  >
-                                    1hr
-                                  </label>
-                                </div>
-                              </div>
-                            </Component>
-                            <Component
-                              className=""
-                              key="3"
+                                1hr
+                              </label>
+                            </div>
+                          </div>
+                        </Component>
+                        <Component
+                          className=""
+                          key="3"
+                        >
+                          <div
+                            className="column  "
+                            data-test=""
+                          >
+                            <div
+                              className="radio-wrap"
                             >
-                              <div
-                                className="column  "
-                                data-test=""
+                              <input
+                                checked={false}
+                                className="checkbox "
+                                disabled={false}
+                                id="appointmentLength1hr 30mins"
+                                key="90"
+                                name="appointmentLength"
+                                onChange={[Function]}
+                                type="radio"
+                                value={90}
+                              />
+                              <label
+                                htmlFor="appointmentLength1hr 30mins"
                               >
                                 1hr 30mins
                               </label>

From 29699f98500c73abffd82919b01c88982cbd5dd4 Mon Sep 17 00:00:00 2001
From: Vu Nguyen <vunp@reapit.com>
Date: Tue, 23 Jun 2020 14:08:07 +0700
Subject: [PATCH 4/4] refactor: #1325 Update snapshot tests

---
 .../__tests__/__snapshots__/breadcrumb-item.test.tsx.snap   | 6 +++---
 .../__snapshots__/breadcrumb-separator.test.tsx.snap        | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/elements/src/v2/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-item.test.tsx.snap b/packages/elements/src/v2/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-item.test.tsx.snap
index 9891497916..2ddcd236a0 100644
--- a/packages/elements/src/v2/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-item.test.tsx.snap
+++ b/packages/elements/src/v2/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-item.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`breadcrumb-item BreadcrumbItem should match snapshot 4`] = `
   className=""
 >
   <a
-    className="mockClassName"
+    className=""
     href="#"
     onClick={[Function]}
   >
@@ -30,7 +30,7 @@ exports[`breadcrumb-item BreadcrumbItem should match snapshot when full props 1`
 exports[`breadcrumb-item renderLinks should run correctly and match snapshot 1`] = `
 <div>
   <a
-    className="mockClassName"
+    className=""
     href="#123"
     onClick={[MockFunction]}
     style={
@@ -49,7 +49,7 @@ exports[`breadcrumb-item renderLinks should run correctly and match snapshot 1`]
 exports[`breadcrumb-item renderLinks should run correctly and match snapshot when no href 1`] = `
 <div>
   <a
-    className="mockClassName"
+    className=""
     href="#123"
     onClick={[MockFunction]}
     style={
diff --git a/packages/elements/src/v2/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-separator.test.tsx.snap b/packages/elements/src/v2/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-separator.test.tsx.snap
index 97c3bc3503..bb13c32173 100644
--- a/packages/elements/src/v2/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-separator.test.tsx.snap
+++ b/packages/elements/src/v2/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-separator.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`breadcrumb-separator BreadcrumbSeparator should match snapshot 1`] = `
 <span
-  className="mockClassname"
+  className=""
   style={
     Object {
       "font": "1rem",
@@ -15,7 +15,7 @@ exports[`breadcrumb-separator BreadcrumbSeparator should match snapshot 1`] = `
 
 exports[`breadcrumb-separator BreadcrumbSeparator should match snapshot 2`] = `
 <span
-  className="mockClassname"
+  className=""
   style={
     Object {
       "font": "1rem",