[CLD-589] As a ‘Developer’, I want to see a message appear when I acc…

…ess the Apps and API pages (#233)

* [CLD-589] As a ‘Developer’, I want to see a message appear when I access the Apps and API pages

* Fix as comment

src/components/pages/__tests__/__snapshots__/developer-home.tsx.snap

@@ -65,6 +65,9 @@ exports[`DeveloperHome should match a snapshot 1`] = `
       }
       title="My Apps"
     />
+    <Component
+      loading={false}
+    />
     <withRouter()
       afterClose={[Function]}
     />
@@ -139,6 +142,9 @@ exports[`DeveloperHome should match a snapshot 3`] = `
       }
       title="My Apps"
     />
+    <Component
+      loading={false}
+    />
     <withRouter()
       afterClose={[Function]}
     />

src/components/pages/__tests__/__snapshots__/swagger.tsx.snap

@@ -15,6 +15,9 @@ exports[`Swagger should match a snapshot 1`] = `
         url="undefined/prod/swaggerdocs"
       />
     </div>
+    <Component
+      loading={true}
+    />
   </div>
 </Connect(ErrorBoundary)>
 `;

src/components/pages/developer-home.tsx

@@ -13,6 +13,7 @@ import DeveloperAppModal from '../ui/developer-app-modal'
 import { setDeveloperAppModalStateViewDetail, developerAppShowModal } from '@/actions/developer-app-modal'
 import { appDeleteSetInitFormState } from '@/actions/app-delete'
 import { AppSummaryModel } from '@reapit/foundations-ts-definitions'
+import { SandboxPopUp } from '../ui/sandbox-pop-up'
 
 export interface DeveloperMappedActions {
   fetchAppDetail: (id: string) => void
@@ -96,6 +97,7 @@ export const DeveloperHome: React.FunctionComponent<DeveloperProps> = ({
             onChange: handleOnChange(history)
           }}
         />
+        <SandboxPopUp loading={loading} />
         <DeveloperAppModal
           visible={isVisible}
           afterClose={handleAfterClose({ setVisible, removeAuthenticationCode })}

src/components/pages/swagger.tsx

@@ -6,6 +6,7 @@ import ErrorBoundary from '@/components/hocs/error-boundary'
 import { URLS, MARKETPLACE_HEADERS } from '../../constants/api'
 import { Loader } from '@reapit/elements'
 import { getAccessToken } from '@/utils/session'
+import { SandboxPopUp } from '../ui/sandbox-pop-up'
 
 export const fetchInterceptor = async (params: RequestInit) => {
   return {
@@ -33,6 +34,7 @@ export const SwaggerPage: React.SFC = () => {
             requestInterceptor={fetchInterceptor}
           />
         </div>
+        <SandboxPopUp loading={loading} />
       </div>
     </ErrorBoundary>
   )

src/components/ui/__tests__/__snapshots__/sandbox-pop-up.tsx.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SandboxPopUp should match snapshot with default 1`] = `
+<div>
+  <ToastMessage
+    message="Data in the dev portal APIs is sandbox and is regularly refreshed. You should not use these feeds for production apps, they are for development purposes only."
+    onCloseToast={[Function]}
+    variant="info"
+    visible={false}
+  />
+</div>
+`;
+
+exports[`SandboxPopUp should match snapshot with passed props 1`] = `
+<div>
+  <ToastMessage
+    message="mess"
+    onCloseToast={[Function]}
+    variant="info"
+    visible={false}
+  />
+</div>
+`;

src/components/ui/__tests__/sandbox-pop-up.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react'
+import { shallow } from 'enzyme'
+import { popUp, SandboxPopUp, HALF_SECOND } from '../sandbox-pop-up'
+
+const setOpen = jest.fn()
+jest.useFakeTimers()
+describe('popUp', () => {
+  afterEach(() => {
+    jest.clearAllMocks()
+    jest.clearAllTimers()
+  })
+  it('should call setTimeout if loading = false', () => {
+    const fn = popUp(setOpen, false)
+    fn()
+    expect(setTimeout).toHaveBeenCalledTimes(1)
+    expect(setTimeout).toHaveBeenCalledWith(expect.any(Function), HALF_SECOND)
+  })
+  it('should not call setTimeout if loading = true', () => {
+    const fn = popUp(setOpen, true)
+    fn()
+    expect(setTimeout).not.toHaveBeenCalled()
+  })
+})
+
+describe('SandboxPopUp', () => {
+  it('should match snapshot with default', () => {
+    expect(shallow(<SandboxPopUp />)).toMatchSnapshot()
+  })
+  it('should match snapshot with passed props', () => {
+    expect(shallow(<SandboxPopUp loading={true} message="mess" />)).toMatchSnapshot()
+  })
+})

src/components/ui/sandbox-pop-up.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+import { ToastMessage } from '@reapit/elements'
+import styles from '@/styles/blocks/sandbox-pop-up.scss?mod'
+
+export const HALF_SECOND = 500
+
+export const popUp = (setOpen, loading) => () => {
+  if (!loading) setTimeout(setOpen, HALF_SECOND)
+}
+
+export const SandboxPopUp = ({
+  loading = false,
+  message = 'Data in the dev portal APIs is sandbox and is regularly refreshed. You should not use these feeds for production apps, they are for development purposes only.'
+}) => {
+  const [isOpen, setIsOpen] = React.useState<boolean>(false)
+  const setOpen = React.useCallback(setIsOpen.bind(null, true), [setIsOpen])
+  const setClose = React.useCallback(setIsOpen.bind(null, false), [setIsOpen])
+
+  React.useEffect(popUp(setOpen, loading), [loading])
+
+  return (
+    <div className={styles['wrap-pop-up']}>
+      <ToastMessage visible={isOpen} message={message} variant="info" onCloseToast={setClose} />
+    </div>
+  )
+}

src/styles/blocks/sandbox-pop-up.scss

@@ -0,0 +1,6 @@
+.wrap-pop-up {
+  transform: translateX(-2rem);
+  width: 100vw;
+  position: fixed;
+  bottom: 0;
+}