github.com/treeverse/lakefs@v1.24.1-0.20240520134607-95648127bfb0/webui/src/pages/repositories/repository/fileRenderers/simple.tsx (about)

     1  import React, { FC } from "react";
     2  import Alert from "react-bootstrap/Alert";
     3  import { humanSize } from "../../../../lib/components/repository/tree";
     4  import { useAPI } from "../../../../lib/hooks/api";
     5  import { objects, qs } from "../../../../lib/api";
     6  import { AlertError, Loading } from "../../../../lib/components/controls";
     7  import SyntaxHighlighter from "react-syntax-highlighter";
     8  import { githubGist as syntaxHighlightStyle } from "react-syntax-highlighter/dist/esm/styles/hljs";
     9  import { IpynbRenderer as NbRenderer } from "react-ipynb-renderer";
    10  import { guessLanguage } from "./index";
    11  import {
    12    RendererComponent,
    13    RendererComponentWithText,
    14    RendererComponentWithTextCallback,
    15  } from "./types";
    16  
    17  import "react-ipynb-renderer/dist/styles/default.css";
    18  import { useMarkdownProcessor } from "./useMarkdownProcessor";
    19  
    20  export const ObjectTooLarge: FC<RendererComponent> = ({ path, sizeBytes }) => {
    21    return (
    22      <Alert variant="warning" className="m-5">
    23        <div>
    24          Could not render: <code>{path}</code>:
    25        </div>
    26        <div>{`size ${sizeBytes}b (${humanSize(sizeBytes)}) is too big`}</div>
    27      </Alert>
    28    );
    29  };
    30  
    31  export const UnsupportedFileType: FC<RendererComponent> = ({
    32    path,
    33    fileExtension,
    34    contentType,
    35  }) => {
    36    return (
    37      <Alert variant="warning" className="m-5">
    38        <div>
    39          Could not render: <code>{path}</code>: <br />
    40        </div>
    41        <div>{`lakeFS doesn't know how to render this file (extension = "${fileExtension}", content-type = "${contentType}")`}</div>
    42      </Alert>
    43    );
    44  };
    45  
    46  export const TextDownloader: FC<RendererComponentWithTextCallback> = ({
    47    repoId,
    48    refId,
    49    path,
    50    presign,
    51    onReady,
    52  }) => {
    53    const { response, error, loading } = useAPI(
    54      async () => await objects.get(repoId, refId, path, presign),
    55      [repoId, refId, path]
    56    );
    57    if (loading) {
    58      return <Loading />;
    59    }
    60    if (error) {
    61      return <AlertError error={error} />;
    62    }
    63  
    64    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    65    const component = onReady(response as any);
    66    return <>{component}</>;
    67  };
    68  
    69  export const MarkdownRenderer: FC<RendererComponentWithText> = ({
    70    text,
    71    repoId,
    72    refId,
    73    path,
    74    presign = false,
    75  }) => {
    76    return useMarkdownProcessor(text, repoId, refId, path, presign);
    77  };
    78  
    79  export const TextRenderer: FC<RendererComponentWithText> = ({
    80    contentType,
    81    fileExtension,
    82    text,
    83  }) => {
    84    const language = guessLanguage(fileExtension, contentType) ?? "plaintext";
    85    return (
    86      <SyntaxHighlighter
    87        style={syntaxHighlightStyle}
    88        language={language}
    89        showInlineLineNumbers={true}
    90        showLineNumbers={true}
    91      >
    92        {text}
    93      </SyntaxHighlighter>
    94    );
    95  };
    96  
    97  export const IpynbRenderer: FC<RendererComponentWithText> = ({ text }) => {
    98    return (
    99      <NbRenderer
   100        ipynb={JSON.parse(text)}
   101        syntaxTheme="ghcolors"
   102        language="python"
   103        bgTransparent={true}
   104      />
   105    );
   106  };
   107  
   108  export const ImageRenderer: FC<RendererComponent> = ({
   109    repoId,
   110    refId,
   111    path,
   112    presign,
   113  }) => {
   114    const query = qs({ path, presign });
   115    return (
   116      <p className="image-container">
   117        <img
   118          src={`/api/v1/repositories/${encodeURIComponent(
   119            repoId
   120          )}/refs/${encodeURIComponent(refId)}/objects?${query}`}
   121          alt={path}
   122        />
   123      </p>
   124    );
   125  };
   126  
   127  export const PDFRenderer: FC<RendererComponent> = ({
   128    repoId,
   129    refId,
   130    path,
   131    presign,
   132  }) => {
   133    const query = qs({ path, presign });
   134    return (
   135      <div className="m-3 object-viewer-pdf">
   136        <object
   137          data={`/api/v1/repositories/${encodeURIComponent(
   138            repoId
   139          )}/refs/${encodeURIComponent(refId)}/objects?${query}`}
   140          type="application/pdf"
   141        ></object>
   142      </div>
   143    );
   144  };