Iframe browsing frontend

catalog/app/components/Preview/Display.js

@@ -125,6 +125,12 @@ export default function PreviewDisplay({
             heading: 'Malformed JSON',
             body: message,
           }),
+        Expired: ({ retry }) =>
+          renderMessage({
+            heading: 'Session is expired',
+            body: 'Try to reload the page',
+            action: !!retry && renderAction({ label: 'Retry', onClick: retry }),
+          }),
         Unexpected: ({ retry }) =>
           renderMessage({
             heading: 'Unexpected Error',

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

@@ -1,41 +1,49 @@
 import * as React from 'react'
 
 import cfg from 'constants/config'
-import * as AWS from 'utils/AWS'
 import AsyncResult from 'utils/AsyncResult'
 import { useIsInStack } from 'utils/BucketConfig'
 import { useStatusReportsBucket } from 'utils/StatusReportsBucket'
-import useMemoEq from 'utils/useMemoEq'
-
-import { PreviewData } from '../types'
+import useQuery from 'utils/useQuery'
 
+import * as IFrame from './IFrame'
 import * as Text from './Text'
 import FileType from './fileType'
 import * as utils from './utils'
 
+import BUCKET_CONFIG_QUERY from './IFrame/BrowsableBucketConfig.generated'
+
 export const detect = utils.extIn(['.htm', '.html'])
 
 export const FILE_TYPE = FileType.Html
 
-function IFrameLoader({ handle, children }) {
-  const sign = AWS.Signer.useS3Signer()
-  const src = useMemoEq([handle, sign], () =>
-    sign(handle, { ResponseContentType: 'text/html' }),
-  )
-  // TODO: issue a head request to ensure existence and get storage class
-  return children(
-    AsyncResult.Ok(PreviewData.IFrame({ src, modes: [FileType.Html, FileType.Text] })),
+// It's unsafe to render HTML in these conditions
+function useHtmlAsText(handle) {
+  const isInStack = useIsInStack()
+  const statusReportsBucket = useStatusReportsBucket()
+  return (
+    cfg.mode !== 'LOCAL' &&
+    !isInStack(handle.bucket) &&
+    handle.bucket !== statusReportsBucket
   )
 }
 
 export const Loader = function HtmlLoader({ handle, children }) {
-  const isInStack = useIsInStack()
-  const statusReportsBucket = useStatusReportsBucket()
-  return cfg.mode === 'LOCAL' ||
-    isInStack(handle.bucket) ||
-    handle.bucket === statusReportsBucket ? (
-    <IFrameLoader {...{ handle, children }} />
-  ) : (
-    <Text.Loader {...{ handle, children }} />
-  )
+  const renderHtmlAsText = useHtmlAsText(handle)
+  const bucketData = useQuery({
+    query: BUCKET_CONFIG_QUERY,
+    variables: { bucket: handle.bucket },
+    pause: renderHtmlAsText,
+  })
+  if (renderHtmlAsText) return <Text.Loader {...{ handle, children }} />
+  return bucketData.case({
+    fetching: () => children(AsyncResult.Pending()),
+    error: (e) => children(AsyncResult.Err(e)),
+    data: ({ bucketConfig: { browsable } }) =>
+      browsable ? (
+        <IFrame.LoaderBrowsable {...{ handle, children }} />
+      ) : (
+        <IFrame.LoaderSigned {...{ handle, children }} />
+      ),
+  })
 }

catalog/app/components/Preview/loaders/IFrame/BrowsableBucketConfig.generated.ts

@@ -0,0 +1,71 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core'
+import * as Types from '../../../../model/graphql/types.generated'
+
+export type components_Preview_loaders_IFrame_BrowsableBucketConfigQueryVariables =
+  Types.Exact<{
+    bucket: Types.Scalars['String']
+  }>
+
+export type components_Preview_loaders_IFrame_BrowsableBucketConfigQuery = {
+  readonly __typename: 'Query'
+} & {
+  readonly bucketConfig: Types.Maybe<
+    { readonly __typename: 'BucketConfig' } & Pick<
+      Types.BucketConfig,
+      'name' | 'browsable'
+    >
+  >
+}
+
+export const components_Preview_loaders_IFrame_BrowsableBucketConfigDocument = {
+  kind: 'Document',
+  definitions: [
+    {
+      kind: 'OperationDefinition',
+      operation: 'query',
+      name: {
+        kind: 'Name',
+        value: 'components_Preview_loaders_IFrame_BrowsableBucketConfig',
+      },
+      variableDefinitions: [
+        {
+          kind: 'VariableDefinition',
+          variable: { kind: 'Variable', name: { kind: 'Name', value: 'bucket' } },
+          type: {
+            kind: 'NonNullType',
+            type: { kind: 'NamedType', name: { kind: 'Name', value: 'String' } },
+          },
+        },
+      ],
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'bucketConfig' },
+            arguments: [
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'name' },
+                value: { kind: 'Variable', name: { kind: 'Name', value: 'bucket' } },
+              },
+            ],
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [
+                { kind: 'Field', name: { kind: 'Name', value: 'name' } },
+                { kind: 'Field', name: { kind: 'Name', value: 'browsable' } },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<
+  components_Preview_loaders_IFrame_BrowsableBucketConfigQuery,
+  components_Preview_loaders_IFrame_BrowsableBucketConfigQueryVariables
+>
+
+export { components_Preview_loaders_IFrame_BrowsableBucketConfigDocument as default }

catalog/app/components/Preview/loaders/IFrame/BrowsableBucketConfig.graphql

@@ -0,0 +1,6 @@
+query ($bucket: String!) {
+  bucketConfig(name: $bucket) {
+    name
+    browsable
+  }
+}

catalog/app/components/Preview/loaders/IFrame/CreateBrowsingSession.generated.ts

@@ -0,0 +1,138 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core'
+import * as Types from '../../../../model/graphql/types.generated'
+
+export type components_Preview_loaders_IFrame_CreateBrowsingSessionMutationVariables =
+  Types.Exact<{
+    scope: Types.Scalars['String']
+    ttl: Types.Maybe<Types.Scalars['Int']>
+  }>
+
+export type components_Preview_loaders_IFrame_CreateBrowsingSessionMutation = {
+  readonly __typename: 'Mutation'
+} & {
+  readonly browsingSessionCreate:
+    | ({ readonly __typename: 'BrowsingSession' } & Pick<Types.BrowsingSession, 'id'>)
+    | ({ readonly __typename: 'InvalidInput' } & {
+        readonly errors: ReadonlyArray<
+          { readonly __typename: 'InputError' } & Pick<
+            Types.InputError,
+            'name' | 'path' | 'message'
+          >
+        >
+      })
+    | ({ readonly __typename: 'OperationError' } & Pick<
+        Types.OperationError,
+        'name' | 'message'
+      >)
+}
+
+export const components_Preview_loaders_IFrame_CreateBrowsingSessionDocument = {
+  kind: 'Document',
+  definitions: [
+    {
+      kind: 'OperationDefinition',
+      operation: 'mutation',
+      name: {
+        kind: 'Name',
+        value: 'components_Preview_loaders_IFrame_CreateBrowsingSession',
+      },
+      variableDefinitions: [
+        {
+          kind: 'VariableDefinition',
+          variable: { kind: 'Variable', name: { kind: 'Name', value: 'scope' } },
+          type: {
+            kind: 'NonNullType',
+            type: { kind: 'NamedType', name: { kind: 'Name', value: 'String' } },
+          },
+        },
+        {
+          kind: 'VariableDefinition',
+          variable: { kind: 'Variable', name: { kind: 'Name', value: 'ttl' } },
+          type: { kind: 'NamedType', name: { kind: 'Name', value: 'Int' } },
+        },
+      ],
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'browsingSessionCreate' },
+            arguments: [
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'scope' },
+                value: { kind: 'Variable', name: { kind: 'Name', value: 'scope' } },
+              },
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'ttl' },
+                value: { kind: 'Variable', name: { kind: 'Name', value: 'ttl' } },
+              },
+            ],
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [
+                { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
+                {
+                  kind: 'InlineFragment',
+                  typeCondition: {
+                    kind: 'NamedType',
+                    name: { kind: 'Name', value: 'BrowsingSession' },
+                  },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [{ kind: 'Field', name: { kind: 'Name', value: 'id' } }],
+                  },
+                },
+                {
+                  kind: 'InlineFragment',
+                  typeCondition: {
+                    kind: 'NamedType',
+                    name: { kind: 'Name', value: 'InvalidInput' },
+                  },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'errors' },
+                        selectionSet: {
+                          kind: 'SelectionSet',
+                          selections: [
+                            { kind: 'Field', name: { kind: 'Name', value: 'name' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'path' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'message' } },
+                          ],
+                        },
+                      },
+                    ],
+                  },
+                },
+                {
+                  kind: 'InlineFragment',
+                  typeCondition: {
+                    kind: 'NamedType',
+                    name: { kind: 'Name', value: 'OperationError' },
+                  },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      { kind: 'Field', name: { kind: 'Name', value: 'name' } },
+                      { kind: 'Field', name: { kind: 'Name', value: 'message' } },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<
+  components_Preview_loaders_IFrame_CreateBrowsingSessionMutation,
+  components_Preview_loaders_IFrame_CreateBrowsingSessionMutationVariables
+>
+
+export { components_Preview_loaders_IFrame_CreateBrowsingSessionDocument as default }

catalog/app/components/Preview/loaders/IFrame/CreateBrowsingSession.graphql

@@ -0,0 +1,19 @@
+mutation ($scope: String!, $ttl: Int) {
+  browsingSessionCreate(scope: $scope, ttl: $ttl) {
+    __typename
+    ... on BrowsingSession {
+      id
+    }
+    ... on InvalidInput {
+      errors {
+        name
+        path
+        message
+      }
+    }
+    ... on OperationError {
+      name
+      message
+    }
+  }
+}