feat: download manifest from search results (#376)

packages/data-explorer-ui/src/components/Export/components/DownloadCurlCommand/downloadCurlCommand.tsx

@@ -28,7 +28,7 @@ interface DownloadCurlCommandProps {
   fileManifestState: FileManifestState;
   fileManifestType: FileManifestType;
   fileSummaryFacetName: string;
-  filters: Filters; // Initializes export to terra filters.
+  filters: Filters; // Initializes bulk download filters.
   formFacet: FormFacet;
 }
 

packages/data-explorer-ui/src/components/Export/components/ManifestDownload/components/ManifestDownloadForm/manifestDownloadForm.tsx

@@ -0,0 +1,23 @@
+import React, { Dispatch, SetStateAction } from "react";
+import { FormFacet } from "../../../../common/entities";
+import { ExportForm } from "../../../ExportForm/exportForm";
+
+export interface ManifestDownloadFormProps {
+  formFacet: FormFacet;
+  isLoading: boolean;
+  setIsRequestFormValid: Dispatch<SetStateAction<boolean>>;
+}
+
+export const ManifestDownloadForm = ({
+  formFacet,
+  isLoading,
+  setIsRequestFormValid,
+}: ManifestDownloadFormProps): JSX.Element => {
+  return (
+    <ExportForm
+      formFacet={formFacet}
+      isLoading={isLoading}
+      setIsRequestFormValid={setIsRequestFormValid}
+    />
+  );
+};

packages/data-explorer-ui/src/components/Export/components/ManifestDownload/components/ManifestDownloadNotStarted/manifestDownloadNotStarted.tsx

@@ -0,0 +1,61 @@
+import React, { ElementType, useState } from "react";
+import { FileManifestState } from "../../../../../../providers/fileManifestState";
+import { ButtonPrimary } from "../../../../../common/Button/components/ButtonPrimary/buttonPrimary";
+import { PAPER_PANEL_STYLE } from "../../../../../common/Paper/paper";
+import { FluidPaper } from "../../../../../common/Paper/paper.styles";
+import { Loading } from "../../../../../Loading/loading";
+import { FormFacet } from "../../../../common/entities";
+import {
+  Section,
+  SectionActions,
+  SectionContent,
+} from "../../../../export.styles";
+
+export interface ManifestDownloadNotStartedProps {
+  fileManifestState: FileManifestState;
+  formFacet: FormFacet;
+  isLoading: boolean;
+  ManifestDownloadForm: ElementType;
+  ManifestDownloadStart: ElementType;
+  onRequestManifest: () => void;
+}
+
+export const ManifestDownloadNotStarted = ({
+  fileManifestState,
+  formFacet,
+  isLoading,
+  ManifestDownloadForm,
+  ManifestDownloadStart,
+  onRequestManifest,
+}: ManifestDownloadNotStartedProps): JSX.Element => {
+  const [isRequestFormValid, setIsRequestFormValid] = useState<boolean>(false);
+  return (
+    <div>
+      <Loading
+        loading={isLoading}
+        panelStyle={PAPER_PANEL_STYLE.FLUID}
+        text="Your manifest will be ready shortly..."
+      />
+      <FluidPaper>
+        <Section>
+          <SectionContent>
+            <ManifestDownloadStart />
+          </SectionContent>
+          <ManifestDownloadForm
+            formFacet={formFacet}
+            isLoading={fileManifestState.isLoading}
+            setIsRequestFormValid={setIsRequestFormValid}
+          />
+          <SectionActions>
+            <ButtonPrimary
+              disabled={fileManifestState.isLoading || !isRequestFormValid}
+              onClick={onRequestManifest}
+            >
+              Prepare Manifest
+            </ButtonPrimary>
+          </SectionActions>
+        </Section>
+      </FluidPaper>
+    </div>
+  );
+};

packages/data-explorer-ui/src/components/Export/components/ManifestDownload/components/ManifestDownloadReady/manifestDownloadReady.styles.ts

@@ -0,0 +1,11 @@
+import styled from "@emotion/styled";
+import { Code as DXCode } from "../../../../../common/Code/code";
+
+export const Code = styled(DXCode)`
+  code {
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
+  }
+`;

packages/data-explorer-ui/src/components/Export/components/ManifestDownload/components/ManifestDownloadReady/manifestDownloadReady.tsx

@@ -0,0 +1,40 @@
+import { Button } from "@mui/material";
+import React, { ElementType } from "react";
+import { FluidPaper } from "../../../../../common/Paper/paper.styles";
+import {
+  Section,
+  SectionActions,
+  SectionContent,
+} from "../../../../export.styles";
+import { Code } from "./manifestDownloadReady.styles";
+
+export interface ManifestDownloadReadyProps {
+  ManifestDownloadSuccess: ElementType;
+  manifestURL: string;
+}
+
+export const ManifestDownloadReady = ({
+  ManifestDownloadSuccess,
+  manifestURL,
+}: ManifestDownloadReadyProps): JSX.Element => {
+  return (
+    <FluidPaper>
+      <Section>
+        <SectionContent>
+          <ManifestDownloadSuccess />
+          <Code code={manifestURL} />
+        </SectionContent>
+        <SectionActions>
+          <Button
+            color="primary"
+            download
+            href={manifestURL}
+            variant="contained"
+          >
+            Download Manifest
+          </Button>
+        </SectionActions>
+      </Section>
+    </FluidPaper>
+  );
+};

packages/data-explorer-ui/src/components/Export/components/ManifestDownload/manifestDownload.tsx

@@ -0,0 +1,70 @@
+import React, { ElementType } from "react";
+import { MANIFEST_DOWNLOAD_FORMAT } from "../../../../apis/azul/common/entities";
+import { Filters } from "../../../../common/entities";
+import { FileManifestType } from "../../../../hooks/useFileManifest/common/entities";
+import { useRequestFileManifest } from "../../../../hooks/useFileManifest/useRequestFileManifest";
+import {
+  FileLocation,
+  useRequestFileLocation,
+} from "../../../../hooks/useRequestFileLocation";
+import { FileManifestState } from "../../../../providers/fileManifestState";
+import { FormFacet } from "../../common/entities";
+import { ManifestDownloadNotStarted } from "./components/ManifestDownloadNotStarted/manifestDownloadNotStarted";
+import { ManifestDownloadReady } from "./components/ManifestDownloadReady/manifestDownloadReady";
+
+export interface ManifestDownloadProps {
+  fileManifestState: FileManifestState;
+  fileManifestType: FileManifestType;
+  fileSummaryFacetName: string;
+  filters: Filters; // Initializes manifest download filters.
+  formFacet: FormFacet;
+  ManifestDownloadForm: ElementType;
+  ManifestDownloadStart: ElementType;
+  ManifestDownloadSuccess: ElementType;
+}
+
+export const ManifestDownload = ({
+  fileManifestState,
+  fileSummaryFacetName,
+  filters,
+  formFacet,
+  ManifestDownloadForm,
+  ManifestDownloadStart,
+  ManifestDownloadSuccess,
+}: ManifestDownloadProps): JSX.Element => {
+  useRequestFileManifest(
+    MANIFEST_DOWNLOAD_FORMAT.COMPACT,
+    filters,
+    fileSummaryFacetName
+  );
+  const { requestURL } = fileManifestState;
+  const { data, isLoading, run } = useRequestFileLocation(requestURL);
+  const manifestURL = getManifestDownloadURL(data);
+  return manifestURL ? (
+    <ManifestDownloadReady
+      ManifestDownloadSuccess={ManifestDownloadSuccess}
+      manifestURL={manifestURL}
+    />
+  ) : (
+    <ManifestDownloadNotStarted
+      ManifestDownloadForm={ManifestDownloadForm}
+      ManifestDownloadStart={ManifestDownloadStart}
+      fileManifestState={fileManifestState}
+      formFacet={formFacet}
+      isLoading={isLoading}
+      onRequestManifest={run}
+    />
+  );
+};
+
+/**
+ * Returns the manifest download URL for the generated manifest.
+ * @param fileLocation - Request file location.
+ * @returns manifest download URL.
+ */
+function getManifestDownloadURL(
+  fileLocation?: FileLocation
+): string | undefined {
+  const { location } = fileLocation || {};
+  return location;
+}

packages/data-explorer-ui/src/hooks/useFileManifest/common/entities.ts

@@ -35,8 +35,10 @@ export interface FileFacet {
 
 export enum FILE_MANIFEST_TYPE {
   BULK_DOWNLOAD = "BULK_DOWNLOAD",
+  DOWNLOAD_MANIFEST = "DOWNLOAD_MANIFEST",
   ENITY_EXPORT_TO_TERRA = "ENITY_EXPORT_TO_TERRA",
   ENTITY_BULK_DOWNLOAD = "ENTITY_BULK_DOWNLOAD",
+  ENTITY_DOWNLOAD_MANIFEST = "ENTITY_DOWNLOAD_MANIFEST",
   EXPORT_TO_TERRA = "EXPORT_TO_TERRA",
 }