fix: #84 general ui fixes for marketplace (#150)

* fix: #84 general ui fixes for marketplace * fix: remove css important, change render logic
reapit · Jan 31, 2020 · fc0b668 · fc0b668
1 parent d24eebe
commit fc0b668
Show file tree

Hide file tree

Showing 10 changed files with 156 additions and 63 deletions.
diff --git a/...e/src/components/pages/__tests__/__snapshots__/developer-submit-app-successfully.tsx.snap b/...e/src/components/pages/__tests__/__snapshots__/developer-submit-app-successfully.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`DeveloperSubmitAppSuccessfully renders correctly 1`] = `
 <Component
+  centerContent={true}
   flexColumn={true}
   hasPadding={true}
 >
@@ -19,17 +20,25 @@ exports[`DeveloperSubmitAppSuccessfully renders correctly 1`] = `
       title="Success"
     >
       <p>
-        Your App has been submitted successfully. For it to be available on the Marketplace, you will need to make it ‘Listed’. To do this, click ‘Apps’ from the menu bar, open your submitted App and click ‘Edit Details’, simply tick the ‘Is Listed’ checkbox.
+        Your App has been submitted successfully.
       </p>
+      <br />
+      <p>
+        For it to be available on the Marketplace, you will need to make it ‘Listed’. To do this, click ‘Apps’ from the menu bar, open your submitted App and click ‘Edit Details’, simply tick the ‘Is Listed’ checkbox.
+      </p>
+      <br />
       <p>
         You can also use this section to make any additional changes. Once you are ready to proceed, click ‘Submit App’. Our Administration department will then review the details you have submitted. Whilst this review is taking place, this App will be marked as ‘Pending Revision’ and you will not be able to make any further changes.
       </p>
+      <br />
       <p>
         You can check the status of any submissions by accessing ‘Apps’ from the menu bar.
       </p>
+      <br />
       <p>
         For any help or support, please visit the ‘Help’ page.
       </p>
+      <br />
     </CallToAction>
   </Component>
 </Component>

diff --git a/packages/marketplace/src/components/pages/developer-submit-app-successfully.tsx b/packages/marketplace/src/components/pages/developer-submit-app-successfully.tsx
@@ -1,12 +1,13 @@
 import * as React from 'react'
 import { FlexContainerResponsive } from '@reapit/elements'
 import CallToAction from '../ui/call-to-action'
+import styles from '@/styles/pages/developer-submit-app-successfully.scss?mod'
 
 export interface DeveloperSubmitAppSuccessfullyProps {
   onClickHandler: () => void
 }
 export const DeveloperSubmitAppSuccessfully: React.FC<DeveloperSubmitAppSuccessfullyProps> = ({ onClickHandler }) => (
-  <FlexContainerResponsive hasPadding flexColumn>
+  <FlexContainerResponsive hasPadding flexColumn centerContent className={styles.wrapDeveloperSuccess}>
     <FlexContainerResponsive flexColumn hasBackground hasPadding>
       <CallToAction
         dataTest="submit-success-section"
@@ -16,19 +17,25 @@ export const DeveloperSubmitAppSuccessfully: React.FC<DeveloperSubmitAppSuccessf
         buttonDataTest="submit-another-button"
         isCard
       >
+        <p>Your App has been submitted successfully.</p>
+        <br />
         <p>
-          Your App has been submitted successfully. For it to be available on the Marketplace, you will need to make it
-          ‘Listed’. To do this, click ‘Apps’ from the menu bar, open your submitted App and click ‘Edit Details’, simply
-          tick the ‘Is Listed’ checkbox.
+          For it to be available on the Marketplace, you will need to make it ‘Listed’. To do this, click ‘Apps’ from
+          the menu bar, open your submitted App and click ‘Edit Details’, simply tick the ‘Is Listed’ checkbox.
         </p>
+        <br />
         <p>
           You can also use this section to make any additional changes. Once you are ready to proceed, click ‘Submit
           App’. Our Administration department will then review the details you have submitted. Whilst this review is
           taking place, this App will be marked as ‘Pending Revision’ and you will not be able to make any further
           changes.
         </p>
+        <br />
         <p>You can check the status of any submissions by accessing ‘Apps’ from the menu bar.</p>
+        <br />
         <p>For any help or support, please visit the ‘Help’ page.</p>
+
+        <br />
       </CallToAction>
     </FlexContainerResponsive>
   </FlexContainerResponsive>

diff --git a/packages/marketplace/src/components/ui/__tests__/__snapshots__/app-confirm-install.tsx.snap b/packages/marketplace/src/components/ui/__tests__/__snapshots__/app-confirm-install.tsx.snap
@@ -10,14 +10,12 @@ exports[`AppConfirmInstallContent render correctly 1`] = `
   <Component
     body={
       <React.Fragment>
-        <Unknown
-          isCentered={true}
-        >
+        <p>
           This action will install the app for ALL platform users.
           <br />
           Peter's Properties
            requires the permissions below. By installing you are granting permission to your data.
-        </Unknown>
+        </p>
         <ul>
           <li>
             Read data about developers
@@ -65,14 +63,12 @@ exports[`AppConfirmInstallContent render correctly 2`] = `
   <Component
     body={
       <React.Fragment>
-        <Unknown
-          isCentered={true}
-        >
+        <p>
           This action will install the app for ALL platform users.
           <br />
           Peter's Properties
            requires the permissions below. By installing you are granting permission to your data.
-        </Unknown>
+        </p>
         <ul>
           <li>
             Read data about developers
@@ -120,14 +116,12 @@ exports[`AppConfirmInstallContent render correctly 3`] = `
   <Component
     body={
       <React.Fragment>
-        <Unknown
-          isCentered={true}
-        >
+        <p>
           This action will install the app for ALL platform users.
           <br />
           Peter's Properties
            requires the permissions below. By installing you are granting permission to your data.
-        </Unknown>
+        </p>
         <ul>
           <li>
             Read data about developers
@@ -175,14 +169,12 @@ exports[`AppConfirmInstallContent render correctly 4`] = `
   <Component
     body={
       <React.Fragment>
-        <Unknown
-          isCentered={true}
-        >
+        <p>
           This action will install the app for ALL platform users.
           <br />
           Peter's Properties
            requires the permissions below. By installing you are granting permission to your data.
-        </Unknown>
+        </p>
         <ul>
           <li>
             Read data about developers
@@ -230,14 +222,12 @@ exports[`AppConfirmInstallContent render correctly 5`] = `
   <Component
     body={
       <React.Fragment>
-        <Unknown
-          isCentered={true}
-        >
+        <p>
           This action will install the app for ALL platform users.
           <br />
           Peter's Properties
            requires the permissions below. By installing you are granting permission to your data.
-        </Unknown>
+        </p>
         <ul>
           <li>
             Read data about developers

diff --git a/...ages/marketplace/src/components/ui/__tests__/__snapshots__/app-confirm-uninstall.tsx.snap b/...ages/marketplace/src/components/ui/__tests__/__snapshots__/app-confirm-uninstall.tsx.snap
@@ -9,13 +9,11 @@ exports[`AppConfirmUninstall render correctly 1`] = `
   />
   <Component
     body={
-      <Unknown
-        isCentered={true}
-      >
+      <React.Fragment>
         Are you sure you wish to uninstall 
         Peter's Properties
         ? This action will uninstall the app for ALL platform users.
-      </Unknown>
+      </React.Fragment>
     }
   />
   <Component
@@ -58,13 +56,11 @@ exports[`AppConfirmUninstall render correctly 2`] = `
   />
   <Component
     body={
-      <Unknown
-        isCentered={true}
-      >
+      <React.Fragment>
         Are you sure you wish to uninstall 
         Peter's Properties
         ? This action will uninstall the app for ALL platform users.
-      </Unknown>
+      </React.Fragment>
     }
   />
   <Component
@@ -107,13 +103,11 @@ exports[`AppConfirmUninstall render correctly 3`] = `
   />
   <Component
     body={
-      <Unknown
-        isCentered={true}
-      >
+      <React.Fragment>
         Are you sure you wish to uninstall 
         Peter's Properties
         ? This action will uninstall the app for ALL platform users.
-      </Unknown>
+      </React.Fragment>
     }
   />
   <Component
@@ -156,13 +150,11 @@ exports[`AppConfirmUninstall render correctly 4`] = `
   />
   <Component
     body={
-      <Unknown
-        isCentered={true}
-      >
+      <React.Fragment>
         Are you sure you wish to uninstall 
         Peter's Properties
         ? This action will uninstall the app for ALL platform users.
-      </Unknown>
+      </React.Fragment>
     }
   />
   <Component
@@ -205,13 +197,11 @@ exports[`AppConfirmUninstall render correctly 5`] = `
   />
   <Component
     body={
-      <Unknown
-        isCentered={true}
-      >
+      <React.Fragment>
         Are you sure you wish to uninstall 
         Peter's Properties
         ? This action will uninstall the app for ALL platform users.
-      </Unknown>
+      </React.Fragment>
     }
   />
   <Component

diff --git a/packages/marketplace/src/components/ui/__tests__/__snapshots__/app-detail.tsx.snap b/packages/marketplace/src/components/ui/__tests__/__snapshots__/app-detail.tsx.snap
@@ -53,14 +53,24 @@ exports[`AppDetailModalInner should match a snapshot 1`] = `
         <Unknown>
           Permissions requested
         </Unknown>
-        <Unknown />
       </React.Fragment>
     }
   />
   <Component />
 </Fragment>
 `;
 
+exports[`ScopeGridThreeCol should match snapshot 1`] = `
+Array [
+  <Component>
+    <li />
+  </Component>,
+  <Component>
+    <li />
+  </Component>,
+]
+`;
+
 exports[`SlickButtonNav should match snapshot 1`] = `
 <button
   currentSlide=""

diff --git a/packages/marketplace/src/components/ui/__tests__/app-detail.tsx b/packages/marketplace/src/components/ui/__tests__/app-detail.tsx
@@ -1,6 +1,13 @@
 import * as React from 'react'
 import { shallow } from 'enzyme'
-import { AppDetail, AppDetailProps, mapDispatchToProps, SlickButtonNav } from '../app-detail'
+import {
+  AppDetail,
+  AppDetailProps,
+  mapDispatchToProps,
+  SlickButtonNav,
+  ScopeGridThreeCol,
+  sliceThreeItemEach,
+} from '../app-detail'
 import { setDeveloperAppModalStateDelete } from '@/actions/developer-app-modal'
 import { setAppDetailModalStateInstall, setAppDetailModalStateUninstall } from '@/actions/app-detail-modal'
 
@@ -14,6 +21,56 @@ const props: AppDetailProps = {
   afterClose: jest.fn(),
 }
 
+const scopes = [
+  {
+    name: 'agencyCloud/applicants.read',
+    description: 'Read applicants',
+  },
+  {
+    name: 'agencyCloud/companies.read',
+    description: 'Read companies',
+  },
+  {
+    name: 'agencyCloud/companies.read1',
+    description: 'Read companies2',
+  },
+  {
+    name: 'agencyCloud/companies.read2',
+    description: 'Read companies2',
+  },
+  {
+    name: 'agencyCloud/companies.read3',
+    description: 'Read companies3',
+  },
+]
+
+const scopeArrayItem = [
+  [
+    {
+      name: 'agencyCloud/applicants.read',
+      description: 'Read applicants',
+    },
+    {
+      name: 'agencyCloud/companies.read',
+      description: 'Read companies',
+    },
+    {
+      name: 'agencyCloud/companies.read1',
+      description: 'Read companies2',
+    },
+  ],
+  [
+    {
+      name: 'agencyCloud/companies.read2',
+      description: 'Read companies2',
+    },
+    {
+      name: 'agencyCloud/companies.read3',
+      description: 'Read companies3',
+    },
+  ],
+]
+
 describe('AppDetailModalInner', () => {
   it('should match a snapshot', () => {
     expect(shallow(<AppDetail {...props} />)).toMatchSnapshot()
@@ -64,3 +121,15 @@ describe('SlickButtonNav', () => {
     expect(wrapper).toMatchSnapshot()
   })
 })
+
+describe('sliceThreeItemEach', () => {
+  it('should return correctly', () => {
+    expect(sliceThreeItemEach(scopes)).toEqual(scopeArrayItem)
+  })
+})
+
+describe('ScopeGridThreeCol', () => {
+  it('should match snapshot', () => {
+    expect(shallow(<ScopeGridThreeCol scopeArrayItem={scopeArrayItem} />)).toMatchSnapshot()
+  })
+})
diff --git a/packages/marketplace/src/components/ui/app-confirm-install.tsx b/packages/marketplace/src/components/ui/app-confirm-install.tsx
@@ -3,7 +3,7 @@ import { connect } from 'react-redux'
 import { FormState, ReduxState } from '@/types/core'
 import { AppDetailModel } from '@reapit/foundations-ts-definitions'
 import appPermissionContentStyles from '@/styles/pages/app-permission-content.scss?mod'
-import { Button, SubTitleH6, ModalHeader, ModalBody, ModalFooter } from '@reapit/elements'
+import { Button, ModalHeader, ModalBody, ModalFooter } from '@reapit/elements'
 import { setAppDetailModalStateBrowse, setAppDetailModalStateSuccess } from '@/actions/app-detail-modal'
 import { InstallParams, appInstallationsRequestInstall } from '@/actions/app-installations'
 
@@ -60,11 +60,11 @@ export const AppConfirmInstallContent = ({
         body={
           scopes.length ? (
             <>
-              <SubTitleH6 isCentered>
+              <p>
                 This action will install the app for ALL platform users.
                 <br />
                 {name} requires the permissions below. By installing you are granting permission to your data.
-              </SubTitleH6>
+              </p>
               <ul className={appPermissionContentStyles.permissionList}>
                 {scopes.map(({ description, name }) => (
                   <li key={name} className={appPermissionContentStyles.permissionListItem}>
@@ -74,7 +74,7 @@ export const AppConfirmInstallContent = ({
               </ul>
             </>
           ) : (
-            <SubTitleH6 isCentered>This action will install the app for ALL platform users.</SubTitleH6>
+            <>This action will install the app for ALL platform users.</>
           )
         }
       />