feat: #1917 Rework developer preview app

packages/developer-portal/src/components/pages/app-detail-preview/__tests__/__snapshots__/app-detail-preview.test.tsx.snap

@@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AppDetailPreview should match a snapshot 1`] = `
+<Provider
+  store={
+    Object {
+      "clearActions": [Function],
+      "dispatch": [Function],
+      "getActions": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+    }
+  }
+>
+  <MemoryRouter
+    initialEntries={
+      Array [
+        Object {
+          "key": "clientAppDetailPreviewRoute",
+          "pathname": "/apps/:appid",
+        },
+      ]
+    }
+  >
+    <Router
+      history={
+        Object {
+          "action": "POP",
+          "block": [Function],
+          "canGo": [Function],
+          "createHref": [Function],
+          "entries": Array [
+            Object {
+              "hash": "",
+              "key": "clientAppDetailPreviewRoute",
+              "pathname": "/apps/:appid",
+              "search": "",
+            },
+          ],
+          "go": [Function],
+          "goBack": [Function],
+          "goForward": [Function],
+          "index": 0,
+          "length": 1,
+          "listen": [Function],
+          "location": Object {
+            "hash": "",
+            "key": "clientAppDetailPreviewRoute",
+            "pathname": "/apps/:appid",
+            "search": "",
+          },
+          "push": [Function],
+          "replace": [Function],
+        }
+      }
+    >
+      <AppDetailPreview>
+        <Component
+          dataTest="client-app-detail-container"
+        >
+          <div
+            className=""
+            data-test="client-app-detail-container"
+          >
+            <Component>
+              <div
+                className=""
+                data-test=""
+              >
+                <Component
+                  message="There is no preview app"
+                  type="danger"
+                >
+                  <div
+                    className="notification is-danger "
+                    data-test=""
+                    role="alert"
+                  >
+                    There is no preview app
+                  </div>
+                </Component>
+              </div>
+            </Component>
+          </div>
+        </Component>
+      </AppDetailPreview>
+    </Router>
+  </MemoryRouter>
+</Provider>
+`;

packages/developer-portal/src/components/pages/app-detail-preview/__tests__/app-detail-preview.test.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react'
+import * as ReactRedux from 'react-redux'
+import { MemoryRouter } from 'react-router'
+import { mount } from 'enzyme'
+import configureStore from 'redux-mock-store'
+import AppDetailPreview, { loadAppDetailPreviewDataFromLocalStorage } from '../app-detail-preview'
+import Routes from '@/constants/routes'
+import appState from '@/reducers/__stubs__/app-state'
+import { appDetailDataStub } from '@/sagas/__stubs__/app-detail'
+
+describe('AppDetailPreview', () => {
+  let store
+  let spyDispatch
+  beforeEach(() => {
+    /* mocking store */
+    const mockStore = configureStore()
+    store = mockStore({
+      ...appState,
+      client: {
+        appDetail: {
+          data: {},
+          loading: false,
+        },
+      },
+    })
+    spyDispatch = jest.spyOn(ReactRedux, 'useDispatch').mockImplementation(() => store.dispatch)
+  })
+
+  it('should match a snapshot', () => {
+    expect(
+      mount(
+        <ReactRedux.Provider store={store}>
+          <MemoryRouter initialEntries={[{ pathname: Routes.APP_DETAIL, key: 'clientAppDetailPreviewRoute' }]}>
+            <AppDetailPreview />
+          </MemoryRouter>
+        </ReactRedux.Provider>,
+      ),
+    ).toMatchSnapshot()
+  })
+  it('should run correctly', () => {
+    window.localStorage.setItem('developer-preview-app', JSON.stringify(appDetailDataStub.data))
+    const mockAppId = '9b6fd5f7-2c15-483d-b925-01b650538e52'
+    const mockSetAppDetailPreviewData = jest.fn()
+    const spyLocalStorageGetItem = jest.spyOn(window.localStorage, 'getItem')
+    const fn = loadAppDetailPreviewDataFromLocalStorage(mockAppId, mockSetAppDetailPreviewData, spyDispatch)
+    fn()
+    expect(spyLocalStorageGetItem).toBeCalledWith('developer-preview-app')
+    expect(mockSetAppDetailPreviewData).toBeCalled()
+  })
+})

packages/developer-portal/src/components/pages/app-detail-preview/app-detail-preview.tsx

@@ -0,0 +1,71 @@
+// The UI of this page should be the same as the Standalone App Detail page in Marketplace portal
+// Make sure to always update the UI in both places if needed
+import * as React from 'react'
+import AppContent from './client/app-content'
+import { Aside as AppAside } from './client/aside'
+import AppHeader from './common/ui-app-header'
+import { useParams } from 'react-router'
+import { AppDetailData } from '@/reducers/developer'
+import { Grid, GridItem, Section, Alert } from '@reapit/elements'
+import { Dispatch } from 'redux'
+import { showNotificationMessage } from '@/actions/notification-message'
+import { useDispatch } from 'react-redux'
+
+export type AppDetailPreviewProps = {}
+
+export const loadAppDetailPreviewDataFromLocalStorage = (
+  appId: string,
+  setAppDetailPreviewData: React.Dispatch<React.SetStateAction<AppDetailPreviewProps | null>>,
+  dispatch: Dispatch,
+) => () => {
+  try {
+    const appDataString = localStorage.getItem('developer-preview-app')
+    if (!appDataString) {
+      throw new Error('No app preview')
+    }
+
+    const appData = JSON.parse(appDataString) as AppDetailData
+    if (appData?.id !== appId) {
+      throw new Error('No app preview')
+    }
+    setAppDetailPreviewData(appData)
+  } catch (err) {
+    dispatch(
+      showNotificationMessage({
+        message: err.message,
+        variant: 'danger',
+      }),
+    )
+  }
+}
+
+const AppDetailPreview: React.FC<AppDetailPreviewProps> = () => {
+  const dispatch = useDispatch()
+  const [appDetailPreviewData, setAppDetailPreviewData] = React.useState<AppDetailPreviewProps | null>(null)
+  const { appId } = useParams()
+
+  React.useEffect(loadAppDetailPreviewDataFromLocalStorage(appId, setAppDetailPreviewData, dispatch), [appId, dispatch])
+
+  return (
+    <Grid dataTest="client-app-detail-container">
+      {!appDetailPreviewData ? (
+        <GridItem>
+          <Alert type="danger" message="There is no preview app" />
+        </GridItem>
+      ) : (
+        <>
+          <GridItem className="is-one-quarter">
+            <AppAside appDetailData={appDetailPreviewData} desktopIntegrationTypes={[]} />
+          </GridItem>
+          <GridItem className="is-three-quarters">
+            <Section isFlex isFlexColumn isFullHeight>
+              <AppHeader appDetailData={appDetailPreviewData} />
+              <AppContent appDetailData={appDetailPreviewData} />
+            </Section>
+          </GridItem>
+        </>
+      )}
+    </Grid>
+  )
+}
+export default AppDetailPreview

packages/developer-portal/src/components/pages/app-detail-preview/client/__tests__/__snapshots__/app-button-group.test.tsx.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ClientAppDetailButtonGroup should match snapshot when both buttons are hidden 1`] = `""`;
+
+exports[`ClientAppDetailButtonGroup should match snapshot when both buttons are showing 1`] = `
+<Component
+  className="ml-0"
+  dataTest="detail-modal-uninstall-button"
+  onClick={[MockFunction]}
+  type="button"
+  variant="primary"
+>
+  Uninstall App
+</Component>
+`;

packages/developer-portal/src/components/pages/app-detail-preview/client/__tests__/__snapshots__/app-content.test.tsx.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ClientAppContent ClientAppContent - should match snapshot 1`] = `
+<Component
+  hasMargin={false}
+  hasPadding={false}
+  isFlex={true}
+  isFlexColumn={true}
+>
+  <Component
+    summary=""
+  />
+  <Component
+    images={Array []}
+    numberImages={2}
+    splitIndex={1}
+  />
+  <Component
+    description=""
+  />
+  <Component
+    images={Array []}
+    numberImages={2}
+    splitIndex={3}
+  />
+  <Component
+    permissions={Array []}
+  />
+</Component>
+`;

packages/developer-portal/src/components/pages/app-detail-preview/client/__tests__/__snapshots__/aside.test.tsx.snap

@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ClientAside ClientAside - should match snapshot 1`] = `
+<Component
+  flexColumn={true}
+  hasBackground={true}
+  hasPadding={true}
+  isFullHeight={true}
+>
+  <Component
+    isSidebar={true}
+  />
+  <Component
+    desktopIntegrationTypes={
+      Array [
+        Object {
+          "description": "Replaces the standard ID check screen",
+          "id": "IdCheck",
+          "name": "Identity Check",
+          "url": "https://foundations-documentation.reapit.cloud/api/desktop-api#id-check",
+        },
+        Object {
+          "description": "Replaces the standard property marketing screen",
+          "id": "PrpMarketing",
+          "name": "Property Marketing Information",
+          "url": "https://foundations-documentation.reapit.cloud/api/desktop-api#property-marketing-information",
+        },
+        Object {
+          "description": "Replaces the vendor marketing report",
+          "id": "VendorMarketing",
+          "name": "Vendor Marketing Report",
+          "url": "https://foundations-documentation.reapit.cloud/api/desktop-api#vendor-marketing-report",
+        },
+        Object {
+          "description": "Replaces the functionality to generate property particulars",
+          "id": "PrintWizard",
+          "name": "Property Details Generation",
+          "url": "https://foundations-documentation.reapit.cloud/api/desktop-api#property-detail-generation",
+        },
+        Object {
+          "description": "Provides ability to export a saved applicant to third party system",
+          "id": "AppExport",
+          "name": "Applicant Export",
+          "url": "https://foundations-documentation.reapit.cloud/api/desktop-api#applicant-export",
+        },
+        Object {
+          "description": "Launchable from the property screen",
+          "id": "Property",
+          "name": "Property",
+          "url": "https://foundations-documentation.reapit.cloud/api/desktop-api#property-1",
+        },
+        Object {
+          "description": "Launchable from the applicant scree",
+          "id": "Applicant",
+          "name": "Applicant",
+          "url": "https://foundations-documentation.reapit.cloud/api/desktop-api#applicant",
+        },
+      ]
+    }
+    isSidebar={true}
+  />
+  <Component
+    isSidebar={true}
+  />
+  <Component
+    contact={
+      Object {
+        "developer": undefined,
+        "homePage": undefined,
+        "supportEmail": undefined,
+        "telephone": undefined,
+      }
+    }
+  />
+</Component>
+`;