File view modes unit-test

catalog/app/components/Preview/loaders/Notebook.js

@@ -1,11 +1,19 @@
 import * as R from 'ramda'
+import * as React from 'react'
+
+import * as AWS from 'utils/AWS'
+import * as Data from 'utils/Data'
+import * as Config from 'utils/Config'
+import mkSearch from 'utils/mkSearch'
+import useMemoEq from 'utils/useMemoEq'
 
 import { PreviewData } from '../types'
 import * as utils from './utils'
+import * as Json from './Json'
 
 export const detect = R.pipe(utils.stripCompression, utils.extIs('.ipynb'))
 
-export const Loader = function NotebookLoader({ handle, children }) {
+function NotebookLoader({ handle, children }) {
   const data = utils.usePreview({ type: 'ipynb', handle })
   const processed = utils.useProcessing(data.result, (json) =>
     PreviewData.Notebook({
@@ -16,3 +24,76 @@ export const Loader = function NotebookLoader({ handle, children }) {
   )
   return children(utils.useErrorHandling(processed, { handle, retry: data.fetch }))
 }
+
+const IFRAME_SANDBOX_ATTRIBUTES = 'allow-scripts allow-same-origin'
+const IFRAME_LOAD_TIMEOUT = 30000
+
+function waitForIframe(src) {
+  let resolved = false
+
+  return new Promise((resolve, reject) => {
+    const handleError = (error) => {
+      document.body.removeChild(link)
+      reject(error)
+    }
+
+    const handleSuccess = () => {
+      resolved = true
+      document.body.removeChild(link)
+      resolve(src)
+    }
+
+    const timerId = setTimeout(() => {
+      if (resolved) return
+      handleError(new Error('Page is taking too long to load'))
+    }, IFRAME_LOAD_TIMEOUT)
+
+    const link = document.createElement('iframe')
+    link.addEventListener('load', () => {
+      clearTimeout(timerId)
+      handleSuccess()
+    })
+    link.src = src
+    link.style.display = 'none'
+    link.sandbox = IFRAME_SANDBOX_ATTRIBUTES
+
+    document.body.appendChild(link)
+
+    const iframeDocument = link.contentWindow || link.contentDocument
+    if (iframeDocument) {
+      iframeDocument.addEventListener('error', handleError)
+    }
+  })
+}
+
+async function loadVoila({ src }) {
+  // Preload iframe, then insert cached iframe
+  await waitForIframe(src)
+  return PreviewData.IFrame({ src, sandbox: IFRAME_SANDBOX_ATTRIBUTES })
+}
+
+const useVoilaUrl = (handle) => {
+  const sign = AWS.Signer.useS3Signer()
+  const endpoint = Config.use().registryUrl
+  return useMemoEq(
+    [endpoint, handle, sign],
+    () => `${endpoint}/voila/voila/render/${mkSearch({ url: sign(handle) })}`,
+  )
+}
+
+function VoilaLoader({ handle, children }) {
+  const src = useVoilaUrl(handle)
+  const data = Data.use(loadVoila, { src })
+  return children(utils.useErrorHandling(data.result, { handle, retry: data.fetch }))
+}
+
+export const Loader = function WrappedNotebookLoader({ handle, children }) {
+  switch (handle.mode) {
+    case 'voila':
+      return <VoilaLoader {...{ handle, children }} />
+    case 'json':
+      return <Json.Loader {...{ handle, children }} />
+    default:
+      return <NotebookLoader {...{ handle, children }} />
+  }
+}

catalog/app/components/SelectDropdown/SelectDropdown.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react'
+import * as M from '@material-ui/core'
+
+const useStyles = M.makeStyles((t) => ({
+  root: {
+    display: 'inline-block',
+    [t.breakpoints.down('sm')]: {
+      borderRadius: 0,
+      boxShadow: 'none',
+    },
+  },
+  button: {
+    ...t.typography.body1,
+    border: 0,
+    textTransform: 'none',
+  },
+  label: {
+    fontWeight: 600,
+    marginLeft: t.spacing(1),
+  },
+}))
+
+interface ValueBase {
+  toString: () => string
+  valueOf: () => string | number | boolean
+}
+
+interface SelectDropdownProps<Value extends ValueBase> {
+  children: React.ReactNode
+  onChange: (selected: Value) => void
+  options: Value[]
+  value: Value
+}
+
+export default function SelectDropdown<Value extends ValueBase>({
+  children,
+  onChange,
+  options,
+  value,
+}: SelectDropdownProps<Value>) {
+  const classes = useStyles()
+
+  const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null)
+
+  const handleOpen = React.useCallback((event) => setAnchorEl(event.currentTarget), [])
+
+  const handleClose = React.useCallback(() => setAnchorEl(null), [])
+
+  const handleSelect = React.useCallback(
+    (selected: Value) => () => {
+      setAnchorEl(null)
+      onChange(selected)
+    },
+    [onChange],
+  )
+
+  const t = M.useTheme()
+  const aboveSm = M.useMediaQuery(t.breakpoints.up('sm'))
+
+  return (
+    <M.Paper className={classes.root}>
+      <M.Button
+        className={classes.button}
+        onClick={handleOpen}
+        size="small"
+        variant="outlined"
+      >
+        {children}
+        {aboveSm && (
+          <>
+            <span className={classes.label}>{value.toString()}</span>
+            <M.Icon fontSize="inherit">expand_more</M.Icon>
+          </>
+        )}
+      </M.Button>
+
+      <M.Menu
+        anchorEl={anchorEl}
+        open={!!anchorEl}
+        onClose={handleClose}
+        MenuListProps={{ dense: true }}
+      >
+        {options.map((item) => (
+          <M.MenuItem
+            key={item.toString()}
+            onClick={handleSelect(item)}
+            selected={value.valueOf() === item.valueOf()}
+          >
+            <M.ListItemText primary={item.toString()} />
+          </M.MenuItem>
+        ))}
+      </M.Menu>
+    </M.Paper>
+  )
+}

catalog/app/components/SelectDropdown/index.ts

@@ -0,0 +1 @@
+export { default } from './SelectDropdown'

catalog/app/constants/routes.js

@@ -100,8 +100,8 @@ export const bucketSearch = {
 }
 export const bucketFile = {
   path: '/b/:bucket/tree/:path(.*[^/])',
-  url: (bucket, path, version) =>
-    `/b/${bucket}/tree/${encode(path)}${mkSearch({ version })}`,
+  url: (bucket, path, version, mode) =>
+    `/b/${bucket}/tree/${encode(path)}${mkSearch({ mode, version })}`,
 }
 export const bucketDir = {
   path: '/b/:bucket/tree/:path(.+/)?',
@@ -119,9 +119,11 @@ export const bucketPackageDetail = {
 }
 export const bucketPackageTree = {
   path: `/b/:bucket/packages/:name(${PACKAGE_PATTERN})/tree/:revision/:path(.*)?`,
-  url: (bucket, name, revision, path = '') =>
+  url: (bucket, name, revision, path = '', mode) =>
     path || (revision && revision !== 'latest')
-      ? `/b/${bucket}/packages/${name}/tree/${revision || 'latest'}/${encode(path)}`
+      ? `/b/${bucket}/packages/${name}/tree/${revision || 'latest'}/${encode(
+          path,
+        )}${mkSearch({ mode })}`
       : bucketPackageDetail.url(bucket, name),
 }
 export const bucketPackageRevisions = {

catalog/app/containers/Bucket/File.js

@@ -5,7 +5,7 @@ import dedent from 'dedent'
 import * as R from 'ramda'
 import * as React from 'react'
 import { FormattedRelative } from 'react-intl'
-import { Link } from 'react-router-dom'
+import { Link, useHistory } from 'react-router-dom'
 import * as M from '@material-ui/core'
 
 import { Crumb, copyWithoutSpaces, render as renderCrumbs } from 'components/BreadCrumbs'
@@ -31,6 +31,7 @@ import * as FileView from './FileView'
 import Section from './Section'
 import renderPreview from './renderPreview'
 import * as requests from './requests'
+import useViewModes from './viewModes'
 
 const getCrumbs = ({ bucket, path, urls }) =>
   R.chain(
@@ -289,6 +290,15 @@ function CenteredProgress() {
 }
 
 const useStyles = M.makeStyles((t) => ({
+  actions: {
+    marginLeft: 'auto',
+  },
+  at: {
+    color: t.palette.text.secondary,
+  },
+  button: {
+    marginLeft: t.spacing(2),
+  },
   crumbs: {
     ...t.typography.body1,
     maxWidth: '100%',
@@ -307,17 +317,6 @@ const useStyles = M.makeStyles((t) => ({
     display: 'flex',
     marginBottom: t.spacing(2),
   },
-  at: {
-    color: t.palette.text.secondary,
-  },
-  spacer: {
-    flexGrow: 1,
-  },
-  button: {
-    flexShrink: 0,
-    marginBottom: -3,
-    marginTop: -3,
-  },
 }))
 
 export default function File({
@@ -326,9 +325,10 @@ export default function File({
   },
   location,
 }) {
-  const { version } = parseSearch(location.search)
+  const { version, mode: viewModeSlug } = parseSearch(location.search)
   const classes = useStyles()
   const { urls } = NamedRoutes.use()
+  const history = useHistory()
   const { analyticsBucket, noDownload } = Config.use()
   const s3 = AWS.S3.use()
 
@@ -384,7 +384,7 @@ export default function File({
 
   const handle = { bucket, key: path, version }
 
-  const withPreview = (callback) =>
+  const withPreview = (callback, mode) =>
     requests.ObjectExistence.case({
       Exists: (h) => {
         if (h.deleted) {
@@ -393,12 +393,27 @@ export default function File({
         if (h.archived) {
           return callback(AsyncResult.Err(Preview.PreviewError.Archived({ handle })))
         }
-        return Preview.load(handle, callback)
+        return mode
+          ? Preview.load(R.assoc('mode', mode.key, handle), callback)
+          : Preview.load(handle, callback)
       },
       DoesNotExist: () =>
         callback(AsyncResult.Err(Preview.PreviewError.InvalidVersion({ handle }))),
     })
 
+  const { registryUrl } = Config.use()
+  const viewModes = useViewModes(registryUrl, path)
+  const viewMode = React.useMemo(
+    () => viewModes.find(({ key }) => key === viewModeSlug) || viewModes[0] || null,
+    [viewModes, viewModeSlug],
+  )
+  const onViewModeChange = React.useCallback(
+    (mode) => {
+      history.push(urls.bucketFile(bucket, encodedPath, version, mode.key))
+    },
+    [history, urls, bucket, encodedPath, version],
+  )
+
   return (
     <FileView.Root>
       <MetaTitle>{[path || 'Files', bucket]}</MetaTitle>
@@ -420,8 +435,20 @@ export default function File({
             'latest'
           )}
         </div>
-        <div className={classes.spacer} />
-        {downloadable && <FileView.DownloadButton handle={handle} />}
+
+        <div className={classes.actions}>
+          {!!viewModes.length && (
+            <FileView.ViewWithVoilaButtonLayout
+              className={classes.button}
+              modesList={viewModes}
+              mode={viewMode}
+              onChange={onViewModeChange}
+            />
+          )}
+          {downloadable && (
+            <FileView.DownloadButton className={classes.button} handle={handle} />
+          )}
+        </div>
       </div>
       {objExistsData.case({
         _: () => <CenteredProgress />,
@@ -448,7 +475,7 @@ export default function File({
                   Err: (e) => {
                     throw e
                   },
-                  Ok: withPreview(renderPreview),
+                  Ok: withPreview(renderPreview, viewMode),
                 })}
               </Section>
             </>