[CLD-534][CLD-535][CLD-536] add direct api ui (#212)

src/components/pages/__tests__/__snapshots__/developer-submit-app.tsx.snap

@@ -73,6 +73,7 @@ exports[`DeveloperSubmitApp should match submit revision form snapshot 1`] = `
           "developerId": undefined,
           "homePage": "http://myawesomeproptechproduct.io",
           "iconImageUrl": "",
+          "isDirectApi": undefined,
           "isListed": undefined,
           "launchUri": undefined,
           "name": "Peter's Properties",

src/components/pages/__tests__/developer-submit-app.tsx

@@ -228,7 +228,7 @@ describe('DeveloperSubmitApp', () => {
     }
 
     const wrapper = mount(<SubmitApp {...props} />)
-    expect(wrapper.find('Checkbox')).toHaveLength(1)
+    expect(wrapper.find('Checkbox')).toHaveLength(2)
   })
 })
 

src/components/pages/developer-submit-app.tsx

@@ -93,6 +93,7 @@ export const generateInitialValues = (appDetail: AppDetailModel | null, develope
       media,
       name,
       isListed,
+      isDirectApi,
       scopes: appScopes
     } = appDetail
 
@@ -114,6 +115,7 @@ export const generateInitialValues = (appDetail: AppDetailModel | null, develope
       launchUri,
       iconImageUrl,
       isListed,
+      isDirectApi,
       scopes: appScopes?.map(item => item.name),
       ...images
     }
@@ -249,7 +251,8 @@ export const SubmitApp: React.FC<SubmitAppProps> = ({
                       <FormHeading>App Listing</FormHeading>
                       <FormSubHeading>
                         These fields refer to the name and icon of your application as they will appear to a user in the
-                        Marketplace and in their installed apps.
+                        Marketplace and in their installed apps. If your App is an external application, please select
+                        'Direct API'.
                       </FormSubHeading>
                       <Grid isMultiLine>
                         <GridItem>
@@ -268,13 +271,16 @@ export const SubmitApp: React.FC<SubmitAppProps> = ({
                           </div>
                         </GridItem>
                       </Grid>
-                      {isSubmitRevision && (
-                        <Grid>
+                      <Grid>
+                        {isSubmitRevision && (
                           <GridItem>
                             <Checkbox name="isListed" labelText="Is Listed" id="isListed" />
                           </GridItem>
-                        </Grid>
-                      )}
+                        )}
+                        <GridItem>
+                          <Checkbox name="isDirectApi" labelText="Direct API" id="isDirectApi" />
+                        </GridItem>
+                      </Grid>
                     </FormSection>
                     <FormSection>
                       <FormHeading>APP CATEGORY</FormHeading>

src/components/ui/__tests__/__snapshots__/app-card.tsx.snap

@@ -11,7 +11,14 @@ exports[`AppCard should match a snapshot 1`] = `
       src="https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/d10e790c-2bf2-40ae-9c43-82c1534bde31.png"
     />
   }
-  subHeading="Pete's Proptech World Ltd"
+  subHeading={
+    <React.Fragment>
+      Pete's Proptech World Ltd
+      <span>
+        (Direct API)
+      </span>
+    </React.Fragment>
+  }
 >
   <p>
     nXXT2zaK807ysWgy8F0WEhIYRP3TgosAtfuiLtQCImoSx0kynxbIF0nkGHU36Oz13kM3DG0Bcsicr8L6eWFKLBg4axlmiOEWcvwHAbBP9LRvoFkCl58k1wjhOExnpaZItEyOT1AXVKv8PE44aMGtVz

src/components/ui/__tests__/__snapshots__/app-detail.tsx.snap

@@ -17,7 +17,11 @@ exports[`AppDetailModalInner should match a snapshot 1`] = `
               src="https://bulma.io/images/placeholders/48x48.png"
             />
           }
-          subHeading=""
+          subHeading={
+            <React.Fragment>
+              
+            </React.Fragment>
+          }
         >
           <div>
             <FaTimes />

src/components/ui/__tests__/app-card.tsx

@@ -12,6 +12,7 @@ const props: AppCardProps = {
       'nXXT2zaK807ysWgy8F0WEhIYRP3TgosAtfuiLtQCImoSx0kynxbIF0nkGHU36Oz13kM3DG0Bcsicr8L6eWFKLBg4axlmiOEWcvwHAbBP9LRvoFkCl58k1wjhOExnpaZItEyOT1AXVKv8PE44aMGtVz',
     developer: "Pete's Proptech World Ltd",
     homePage: 'http://google.com/abc',
+    isDirectApi: true,
     iconUri: 'https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/d10e790c-2bf2-40ae-9c43-82c1534bde31.png',
     links: [
       {

src/components/ui/app-card.tsx

@@ -21,7 +21,12 @@ const AppCard: React.FunctionComponent<AppCardProps> = ({ app, onClick, onSettin
       onClick={onClick as () => void}
       dataTest={dataTest.join('_')}
       heading={app.name || ''}
-      subHeading={app.developer || ''}
+      subHeading={
+        <>
+          {app.developer}
+          {app.isDirectApi ? <span className={appCardStyles.directAPI}>(Direct API)</span> : ''}
+        </>
+      }
       image={
         <img className="image" src={app.iconUri || 'https://bulma.io/images/placeholders/48x48.png'} alt={app.name} />
       }

src/components/ui/app-detail.tsx

@@ -1,15 +1,16 @@
 import * as React from 'react'
-import { ReduxState, FormState } from '@/types/core'
+import { ReduxState } from '@/types/core'
 import Slider, { Settings } from 'react-slick'
 import carouselStyles from '../../styles/elements/carousel.scss?mod'
 import ChevronLeftIcon from '@/components/svg/chevron-left'
 import '@/styles/vendor/slick.scss'
 import { connect } from 'react-redux'
 import { setAppDetailModalStateInstall, setAppDetailModalStateUninstall } from '@/actions/app-detail-modal'
 import { AppDetailModel } from '@/types/marketplace-api-schema'
-import { Button, Tile, ModalHeader, ModalBody, ModalFooter, H6 } from '@reapit/elements'
+import { Tile, ModalHeader, ModalBody, ModalFooter, H6 } from '@reapit/elements'
 import { setDeveloperAppModalStateDelete } from '@/actions/developer-app-modal'
 import styles from '@/styles/blocks/app-detail.scss?mod'
+import appCardStyles from '@/styles/blocks/app-card.scss?mod'
 import { FaCheck, FaTimes } from 'react-icons/fa'
 
 export interface AppDetailModalInnerProps {
@@ -48,7 +49,18 @@ export const AppDetail: React.FunctionComponent<AppDetailProps> = ({
     return null
   }
 
-  const { id, media = [], description, name, summary, developer, installedOn, scopes = [], isListed } = data
+  const {
+    id,
+    media = [],
+    description,
+    name,
+    summary,
+    developer,
+    installedOn,
+    scopes = [],
+    isListed,
+    isDirectApi
+  } = data
   const icon = media.filter(({ type }) => type === 'icon')[0]
   const carouselImages = media.filter(({ type }) => type === 'image')
 
@@ -78,7 +90,12 @@ export const AppDetail: React.FunctionComponent<AppDetailProps> = ({
           <>
             <Tile
               heading={name || ''}
-              subHeading={summary || ''}
+              subHeading={
+                <>
+                  {summary}
+                  {isDirectApi ? <span className={appCardStyles.directAPI}>(Direct API)</span> : ''}
+                </>
+              }
               image={
                 <img
                   className="image"

src/sagas/client.ts

@@ -38,7 +38,8 @@ export const clientDataFetch = function*({ data }) {
           appName: search,
           pageNumber: page,
           pageSize: APPS_PER_PAGE,
-          IsFeatured: false
+          IsFeatured: isFilteringForDirectApiApps ? undefined : false,
+          IsDirectApi: isFilteringForDirectApiApps
         })}`,
         api: REAPIT_API_BASE_URL,
         method: 'GET',

src/styles/blocks/app-card.scss

@@ -1,3 +1,5 @@
+@import '../base/colors.scss';
+
 // This solution is a bit shit and will only add an elipsis in webkit browsers
 // Sorry but other browsers no-supporty...
 .content {
@@ -9,3 +11,10 @@
   text-overflow: ellipsis;
   height: 60px;
 }
+
+.directAPI {
+  color: $black;
+  font-weight: 400;
+  margin-left: 5px;
+  white-space: nowrap;
+}