feat: #1917 Update developer preview app page

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

@@ -0,0 +1,59 @@
+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, Loader, GridItem, Section } from '@reapit/elements'
+import { BackToAppsSection } from '../app-detail/app-sections'
+import useReactResponsive from '@/components/hooks/use-react-responsive'
+
+export type AppDetailPreviewProps = {}
+
+export const loadAppDetailPreviewDataFromLocalStorage = (
+  appId: string,
+  setAppDetailPreviewData: React.Dispatch<React.SetStateAction<AppDetailPreviewProps | null>>,
+) => () => {
+  try {
+    const appDataString = localStorage.getItem('developer-preview-app')
+    if (!appDataString) {
+      throw 'No app preview'
+    }
+
+    const appData = JSON.parse(appDataString) as AppDetailData
+    if (appData?.id !== appId) {
+      throw 'No app preview'
+    }
+    setAppDetailPreviewData(appData)
+  } catch (err) {}
+}
+
+const AppDetailPreview: React.FC<AppDetailPreviewProps> = () => {
+  const { isMobile } = useReactResponsive()
+  const [appDetailPreviewData, setAppDetailPreviewData] = React.useState<AppDetailPreviewProps | null>(null)
+  const { appId } = useParams()
+
+  React.useEffect(loadAppDetailPreviewDataFromLocalStorage(appId, setAppDetailPreviewData), [appId])
+
+  return (
+    <Grid dataTest="client-app-detail-container">
+      {!appDetailPreviewData ? (
+        <Loader dataTest="client-app-detail-loader" />
+      ) : (
+        <>
+          <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} />
+              {!isMobile && <BackToAppsSection onClick={() => {}} />}
+            </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,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ClientAppDetailButtonGroup should match snapshot when both buttons are hidden 1`] = `
+<Fragment>
+  <Component />
+</Fragment>
+`;
+
+exports[`ClientAppDetailButtonGroup should match snapshot when both buttons are showing 1`] = `
+<Fragment>
+  <Component
+    className="ml-0"
+    dataTest="detail-modal-uninstall-button"
+    onClick={[MockFunction]}
+    type="button"
+    variant="primary"
+  >
+    Uninstall App
+  </Component>
+</Fragment>
+`;

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>
+`;