Zip downloads: front-end only

app/src/app/App.tsx

@@ -2,7 +2,7 @@ import active from "../config/active.json";
 import { Header } from "./components/header";
 import { Main } from "./components/main";
 
-export default function App() {
+export const App = () => {
   return (
     <div data-testid="app" className={active.instance}>
       <Header />
@@ -11,4 +11,4 @@ export default function App() {
       </div>
     </div>
   );
-}
+};

app/src/app/components/contents/changelogs/ChangeLogs.tsx

@@ -1,3 +1,3 @@
-export default function ChangeLogs() {
+export const ChangeLogs = () => {
   return <div className="h-full flex-1 flex-col space-y-4 pl-8 lg:pl-0 pr-8">TODO</div>;
-}
+};

app/src/app/components/contents/changelogs/index.ts

@@ -1,3 +1,3 @@
-import ChangeLogs from "./ChangeLogs";
+import { ChangeLogs } from "./ChangeLogs";
 
-export {ChangeLogs};
+export { ChangeLogs };

app/src/app/components/contents/documents/ProjectDocumentation.tsx

@@ -1,3 +1,3 @@
-export default function ProjectDocumentation() {
+export const ProjectDocumentation = () => {
   return <div className="content">Project documentation page</div>;
-}
+};

app/src/app/components/contents/documents/index.ts

@@ -1,3 +1,3 @@
-import ProjectDocumentation from "./ProjectDocumentation";
+import { ProjectDocumentation } from "./ProjectDocumentation";
 
-export {ProjectDocumentation};
+export { ProjectDocumentation };

app/src/app/components/contents/downloads/DownloadButton.tsx

@@ -10,7 +10,7 @@ interface DownloadButtonProps {
   packetId: string;
 }
 
-export default function DownloadButton({ file, packetId }: DownloadButtonProps) {
+export const DownloadButton = ({ file, packetId }: DownloadButtonProps) => {
   const [error, setError] = useState("");
 
   const downloadFile = (file: FileMetadata) => {
@@ -33,4 +33,4 @@ export default function DownloadButton({ file, packetId }: DownloadButtonProps)
       <div className="text-red-500 pe-4">{error}</div>
     </div>
   );
-}
+};

app/src/app/components/contents/downloads/Downloads.tsx

@@ -2,10 +2,11 @@ import { useParams } from "react-router-dom";
 import { usePacketOutletContext } from "../../main/PacketOutlet";
 import { PacketHeader } from "../packets";
 import { Card, CardContent } from "../../Base/Card";
-import FileRow from "./FileRow";
+import { FileRow } from "./FileRow";
 import { OrderlyDownloads } from "./orderly/OrderlyDownloads";
+import { DownloadAllFilesButton } from "./orderly/DownloadAllFilesButton";
 
-export default function Downloads() {
+export const Downloads = () => {
   const { packetId, packetName } = useParams();
   const { packet } = usePacketOutletContext();
   const packetIsFromOrderly = !!packet?.custom?.orderly;
@@ -14,7 +15,12 @@ export default function Downloads() {
     <>
       {packet && (
         <>
-          <PacketHeader packetName={packetName ?? ""} packetId={packetId ?? ""} displayName={packet.displayName} />
+          <div className="md:flex justify-between">
+            <PacketHeader packetName={packetName ?? ""} packetId={packetId ?? ""} displayName={packet.displayName} />
+            <span className="self-end">
+              <DownloadAllFilesButton />
+            </span>
+          </div>
           {packetIsFromOrderly && <OrderlyDownloads />}
           {!packetIsFromOrderly && (
             <>
@@ -36,4 +42,4 @@ export default function Downloads() {
       )}
     </>
   );
-}
+};

app/src/app/components/contents/downloads/FileRow.tsx

@@ -1,5 +1,5 @@
 import { bytesToSize } from "../../../../helpers";
-import DownloadButton from "./DownloadButton";
+import { DownloadButton } from "./DownloadButton";
 import { usePacketOutletContext } from "../../main/PacketOutlet";
 import { ExtensionIcon } from "./ExtensionIcon";
 
@@ -8,7 +8,7 @@ interface FileRowProps {
   sharedResource?: boolean;
 }
 
-export default function FileRow({ path, sharedResource }: FileRowProps) {
+export const FileRow = ({ path, sharedResource }: FileRowProps) => {
   const { packet } = usePacketOutletContext();
   const file = packet?.files.filter((file) => {
     return file.path === path.replace("//", "/");
@@ -38,4 +38,4 @@ export default function FileRow({ path, sharedResource }: FileRowProps) {
       <DownloadButton file={file} packetId={packet.id} />
     </div>
   );
-}
+};

app/src/app/components/contents/downloads/index.ts

@@ -1,3 +1,3 @@
-import Downloads from "./Downloads";
+import { Downloads } from "./Downloads";
 
 export { Downloads };

app/src/app/components/contents/downloads/orderly/Artefacts.tsx

@@ -1,19 +1,21 @@
 import { Card, CardContent, CardHeader } from "../../../Base/Card";
-import FileRow from "../FileRow";
+import { FileRow } from "../FileRow";
 import { Artefact } from "../../../../../types";
+import { FileGroupDownloadButton } from "./FileGroupDownloadButton";
 
 interface ArtefactsProps {
   artefacts: Artefact[];
 }
 
-export default function Artefacts({ artefacts }: ArtefactsProps) {
+export const Artefacts = ({ artefacts }: ArtefactsProps) => {
   return (
     <ul className="space-y-4">
       {artefacts.map((artefact, key) => (
         <li key={key}>
           <Card>
-            <CardHeader className="bg-muted p-4">
+            <CardHeader className="bg-muted p-2 ps-6 flex-row justify-between items-center space-y-0">
               <h3 className="">{artefact.description}</h3>
+              <FileGroupDownloadButton />
             </CardHeader>
             <CardContent className="p-0">
               <ul>
@@ -29,4 +31,4 @@ export default function Artefacts({ artefacts }: ArtefactsProps) {
       ))}
     </ul>
   );
-}
+};

app/src/app/components/contents/downloads/orderly/DownloadAllFilesButton.tsx

@@ -0,0 +1,10 @@
+import { Button } from "../../../Base/Button";
+import { FolderDown } from "lucide-react";
+
+export const DownloadAllFilesButton = () => {
+  return (
+    <Button variant="default" className="py-1 h-fit">
+      <FolderDown size={26} className="pe-2" /> Download all as .zip
+    </Button>
+  );
+};

app/src/app/components/contents/downloads/orderly/FileGroupDownloadButton.tsx

@@ -0,0 +1,10 @@
+import { Button } from "../../../Base/Button";
+import { FolderDown } from "lucide-react";
+
+export const FileGroupDownloadButton = () => {
+  return (
+    <Button variant="outline" className="bg-gray-100 hover:bg-gray-50 py-1 h-fit">
+      <FolderDown size={26} className="pe-2" /> Download as .zip
+    </Button>
+  );
+};

app/src/app/components/contents/downloads/orderly/OrderlyDownloads.tsx

@@ -1,7 +1,7 @@
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../../../Base/Accordion";
 import { InputFileType } from "../../../../../types";
-import Artefacts from "./Artefacts";
-import OtherFiles from "./OtherFiles";
+import { Artefacts } from "./Artefacts";
+import { OtherFiles } from "./OtherFiles";
 import { usePacketOutletContext } from "../../../main/PacketOutlet";
 
 export const OrderlyDownloads = () => {

app/src/app/components/contents/downloads/orderly/OtherFiles.tsx

@@ -1,25 +1,31 @@
 import { Card, CardContent } from "../../../Base/Card";
-import FileRow from "../FileRow";
+import { FileRow } from "../FileRow";
 import { InputFiles, InputFileType } from "../../../../../types";
+import { FileGroupDownloadButton } from "./FileGroupDownloadButton";
 
 // 'Other files' are any files to display other than artefact groups.
 
 interface OtherFilesProps {
   inputFiles: InputFiles[];
 }
 
-export default function OtherFiles({ inputFiles }: OtherFilesProps) {
+export const OtherFiles = ({ inputFiles }: OtherFilesProps) => {
   return (
-    <Card>
-      <CardContent className="p-0">
-        <ul>
-          {inputFiles.map((input, index) => (
-            <li key={index} className="[&:not(:first-child)]:border-t">
-              <FileRow path={input.path} sharedResource={input.role === InputFileType.Shared} />
-            </li>
-          ))}
-        </ul>
-      </CardContent>
-    </Card>
+    <div className="flex flex-col">
+      <span className="self-end mb-2">
+        <FileGroupDownloadButton />
+      </span>
+      <Card>
+        <CardContent className="p-0">
+          <ul>
+            {inputFiles.map((input, index) => (
+              <li key={index} className="[&:not(:first-child)]:border-t">
+                <FileRow path={input.path} sharedResource={input.role === InputFileType.Shared} />
+              </li>
+            ))}
+          </ul>
+        </CardContent>
+      </Card>
+    </div>
   );
-}
+};

app/src/app/components/contents/index.tsx

@@ -1,7 +1,9 @@
 import { ChangeLogs } from "./changelogs";
 import { ProjectDocumentation } from "./documents";
 import { Downloads } from "./downloads";
+import { Home } from "./home";
 import { Metadata } from "./metadata";
+import { PacketGroup } from "./PacketGroup";
 import { WorkflowRunner } from "./workflow";
 
-export { ChangeLogs, Downloads, Metadata, ProjectDocumentation, WorkflowRunner };
+export { ChangeLogs, Downloads, Home, Metadata, PacketGroup, ProjectDocumentation, WorkflowRunner };

app/src/app/components/contents/metadata/Metadata.tsx

@@ -11,7 +11,7 @@ import {
   AccordionTrigger
 } from "../../Base/Accordion";
 
-export default function Metadata() {
+export const Metadata = () => {
   const { packetId, packetName } = useParams();
   const { packet } = usePacketOutletContext();
 
@@ -108,4 +108,4 @@ export default function Metadata() {
       )}
     </>
   );
-}
+};

app/src/app/components/contents/metadata/index.ts

@@ -1,3 +1,3 @@
-import Metadata from "./Metadata";
+import { Metadata } from "./Metadata";
 
-export {Metadata};
+export { Metadata };

app/src/app/components/contents/packets/PacketDetails.tsx

@@ -1,11 +1,11 @@
 import { useParams } from "react-router-dom";
 import { usePacketOutletContext } from "../../main/PacketOutlet";
-import PacketHeader from "./PacketHeader";
+import { PacketHeader } from "./PacketHeader";
 import { PacketParameters } from "./PacketParameters";
 import { PacketReports } from "./PacketReports";
 import { Separator } from "../../Base/Separator";
 
-export default function PacketDetails() {
+export const PacketDetails = () => {
   const { packetId, packetName } = useParams();
   const { packet } = usePacketOutletContext();
   const longDescription = packet?.custom?.orderly.description.long;
@@ -18,4 +18,4 @@ export default function PacketDetails() {
       <PacketReports packet={packet} />
     </>
   );
-}
+};

app/src/app/components/contents/packets/PacketHeader.tsx

@@ -4,7 +4,7 @@ interface PacketHeaderProps {
   displayName?: string;
 }
 
-export default function PacketHeader({ packetName, packetId, displayName }: PacketHeaderProps) {
+export const PacketHeader = ({ packetName, packetId, displayName }: PacketHeaderProps) => {
   if (!displayName || displayName === packetName) {
     return (
       <div>

app/src/app/components/contents/packets/index.ts

@@ -1,4 +1,5 @@
-import PacketDetails from "./PacketDetails";
-import PacketHeader from "./PacketHeader";
+import { PacketDetails } from "./PacketDetails";
+import { PacketHeader } from "./PacketHeader";
+import { PacketFileFullScreen } from "./PacketFileFullScreen";
 
-export { PacketDetails, PacketHeader };
+export { PacketDetails, PacketHeader, PacketFileFullScreen };

app/src/app/components/contents/runner/index.ts

@@ -1,5 +1,6 @@
 import { PacketRunnerLayout } from "./PacketRunnerLayout";
 import { PacketRun } from "./PacketRun";
 import { PacketRunTasksLogs } from "./PacketRunTasksLogs";
+import { PacketRunTaskLogs } from "./PacketRunTaskLogs";
 
-export { PacketRunnerLayout, PacketRun, PacketRunTasksLogs };
+export { PacketRunnerLayout, PacketRun, PacketRunTaskLogs, PacketRunTasksLogs };

app/src/app/components/contents/workflow/WorkflowRunner.tsx

@@ -1,3 +1,3 @@
-export default function WorkflowRunner() {
+export const WorkflowRunner = () => {
   return <div className="content">Workflow runner page</div>;
-}
+};

app/src/app/components/contents/workflow/index.ts

@@ -1,3 +1,3 @@
-import WorkflowRunner from "./WorkflowRunner";
+import { WorkflowRunner } from "./WorkflowRunner";
 
-export {WorkflowRunner};
+export { WorkflowRunner };

app/src/app/components/header/AccountHeaderDropdown.tsx

@@ -13,7 +13,7 @@ import {
 import { useRedirectOnLogin } from "../providers/RedirectOnLoginProvider";
 import { useUser } from "../providers/UserProvider";
 
-export function AccountHeaderDropdown() {
+export const AccountHeaderDropdown = () => {
   const navigate = useNavigate();
   const { removeUser, user } = useUser();
   const { setLoggingOut } = useRedirectOnLogin();
@@ -52,4 +52,4 @@ export function AccountHeaderDropdown() {
       </DropdownMenuContent>
     </DropdownMenu>
   );
-}
+};

app/src/app/components/header/Header.tsx

@@ -10,7 +10,7 @@ import { NavMenuMobile } from "./NavMenuMobile";
 import { LeftNav } from "./LeftNav";
 import { hasUserManagePermission } from "../../../lib/auth/hasPermission";
 
-export default function Header() {
+export const Header = () => {
   const { user } = useUser();
 
   return (
@@ -43,4 +43,4 @@ export default function Header() {
       </div>
     </header>
   );
-}
+};

app/src/app/components/header/index.ts

@@ -1,3 +1,3 @@
-import Header from "./Header";
+import { Header } from "./Header";
 
 export { Header };

app/src/app/components/login/Login.tsx

@@ -1,7 +1,7 @@
 import { UserAuthForm } from "./UserAuthForm";
 import { useSearchParams } from "react-router-dom";
 
-export default function Login() {
+export const Login = () => {
   const [searchParams] = useSearchParams();
   const sessionExpiryInfo = searchParams.get("info");
   return (
@@ -15,4 +15,4 @@ export default function Login() {
       <UserAuthForm />
     </>
   );
-}
+};

app/src/app/components/login/Redirect.tsx

@@ -3,7 +3,7 @@ import { useLocation, useNavigate } from "react-router-dom";
 import { useUser } from "../providers/UserProvider";
 import { useRedirectOnLogin } from "../providers/RedirectOnLoginProvider";
 
-export default function Redirect() {
+export const Redirect = () => {
   const navigate = useNavigate();
   const { setUser } = useUser();
   const { requestedUrl, setRequestedUrl } = useRedirectOnLogin();
@@ -12,7 +12,7 @@ export default function Redirect() {
   const token = searchParams.get("token");
   const error = searchParams.get("error");
 
-  const navigateToRequestedUrl  = () => {
+  const navigateToRequestedUrl = () => {
     const url = requestedUrl || "/";
     setRequestedUrl(null); // reset requested url before redirecting
     navigate(url);
@@ -34,4 +34,4 @@ export default function Redirect() {
       <p>Redirecting user ...</p>
     </div>
   );
-}
+};