Initial commit: Plane

Synced from upstream: 8853637e981ed7d8a6cff32bd98e7afe20f54362

apps/web/core/components/exporter/column.tsx

@@ -0,0 +1,112 @@
+import { Download } from "lucide-react";
+import type { IExportData } from "@plane/types";
+import { getDate, getFileURL, renderFormattedDate } from "@plane/utils";
+
+type RowData = IExportData;
+const checkExpiry = (inputDateString: string) => {
+  const currentDate = new Date();
+  const expiryDate = getDate(inputDateString);
+  if (!expiryDate) return false;
+  expiryDate.setDate(expiryDate.getDate() + 7);
+  return expiryDate > currentDate;
+};
+export const useExportColumns = () => {
+  const columns = [
+    {
+      key: "Exported By",
+      content: "Exported By",
+      tdRender: (rowData: RowData) => {
+        const { avatar_url, display_name, email } = rowData.initiated_by_detail;
+        return (
+          <div className="flex items-center gap-x-2">
+            <div>
+              {avatar_url && avatar_url.trim() !== "" ? (
+                <span className="relative flex h-4 w-4 items-center justify-center rounded-full capitalize text-white">
+                  <img
+                    src={getFileURL(avatar_url)}
+                    className="absolute left-0 top-0 h-full w-full rounded-full object-cover"
+                    alt={display_name || email}
+                  />
+                </span>
+              ) : (
+                <span className="relative flex h-4 w-4 items-center justify-center rounded-full bg-gray-700 capitalize text-white text-xs">
+                  {(email ?? display_name ?? "?")[0]}
+                </span>
+              )}
+            </div>
+            <div>{display_name}</div>
+          </div>
+        );
+      },
+    },
+    {
+      key: "Exported On",
+      content: "Exported On",
+      tdRender: (rowData: RowData) => <span>{renderFormattedDate(rowData.created_at)}</span>,
+    },
+
+    {
+      key: "Exported projects",
+      content: "Exported projects",
+      tdRender: (rowData: RowData) => <div className="text-sm">{rowData.project.length} project(s)</div>,
+    },
+    {
+      key: "Format",
+      content: "Format",
+      tdRender: (rowData: RowData) => (
+        <span className="text-sm">
+          {rowData.provider === "csv"
+            ? "CSV"
+            : rowData.provider === "xlsx"
+              ? "Excel"
+              : rowData.provider === "json"
+                ? "JSON"
+                : ""}
+        </span>
+      ),
+    },
+    {
+      key: "Status",
+      content: "Status",
+      tdRender: (rowData: RowData) => (
+        <span
+          className={`rounded text-xs px-2 py-1 capitalize ${
+            rowData.status === "completed"
+              ? "bg-green-500/20 text-green-500"
+              : rowData.status === "processing"
+                ? "bg-yellow-500/20 text-yellow-500"
+                : rowData.status === "failed"
+                  ? "bg-red-500/20 text-red-500"
+                  : rowData.status === "expired"
+                    ? "bg-orange-500/20 text-orange-500"
+                    : "bg-gray-500/20 text-gray-500"
+          }`}
+        >
+          {rowData.status}
+        </span>
+      ),
+    },
+    {
+      key: "Download",
+      content: "Download",
+      tdRender: (rowData: RowData) =>
+        checkExpiry(rowData.created_at) ? (
+          <>
+            {rowData.status == "completed" ? (
+              <a target="_blank" href={rowData?.url} rel="noopener noreferrer">
+                <button className="w-full flex items-center gap-1 text-custom-primary-100 font-medium">
+                  <Download className="h-4 w-4" />
+                  <div>Download</div>
+                </button>
+              </a>
+            ) : (
+              "-"
+            )}
+          </>
+        ) : (
+          <div className="text-xs text-red-500">Expired</div>
+        ),
+    },
+  ];
+  return columns;
+};

apps/web/core/components/exporter/export-form.tsx

@@ -0,0 +1,200 @@
+import { useState } from "react";
+import { intersection } from "lodash-es";
+import { Controller, useForm } from "react-hook-form";
+import {
+  EUserPermissions,
+  EUserPermissionsLevel,
+  EXPORTERS_LIST,
+  WORKSPACE_SETTINGS_TRACKER_EVENTS,
+  WORKSPACE_SETTINGS_TRACKER_ELEMENTS,
+} from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { CustomSearchSelect, CustomSelect } from "@plane/ui";
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
+import { useProject } from "@/hooks/store/use-project";
+import { useUser, useUserPermissions } from "@/hooks/store/user";
+import { ProjectExportService } from "@/services/project/project-export.service";
+
+type Props = {
+  workspaceSlug: string;
+  provider: string | null;
+  mutateServices: () => void;
+};
+type FormData = {
+  provider: (typeof EXPORTERS_LIST)[0];
+  project: string[];
+  multiple: boolean;
+};
+const projectExportService = new ProjectExportService();
+
+export const ExportForm = (props: Props) => {
+  // props
+  const { workspaceSlug, mutateServices } = props;
+  // states
+  const [exportLoading, setExportLoading] = useState(false);
+  // store hooks
+  const { allowPermissions } = useUserPermissions();
+  const { data: user, canPerformAnyCreateAction, projectsWithCreatePermissions } = useUser();
+  const { workspaceProjectIds, getProjectById } = useProject();
+  const { t } = useTranslation();
+  // form
+  const { handleSubmit, control } = useForm<FormData>({
+    defaultValues: {
+      provider: EXPORTERS_LIST[0],
+      project: [],
+      multiple: false,
+    },
+  });
+  // derived values
+  const hasProjects = workspaceProjectIds && workspaceProjectIds.length > 0;
+  const isMember = allowPermissions([EUserPermissions.ADMIN, EUserPermissions.MEMBER], EUserPermissionsLevel.WORKSPACE);
+  const wsProjectIdsWithCreatePermisisons = projectsWithCreatePermissions
+    ? intersection(workspaceProjectIds, Object.keys(projectsWithCreatePermissions))
+    : [];
+  const options = wsProjectIdsWithCreatePermisisons?.map((projectId) => {
+    const projectDetails = getProjectById(projectId);
+
+    return {
+      value: projectDetails?.id,
+      query: `${projectDetails?.name} ${projectDetails?.identifier}`,
+      content: (
+        <div className="flex items-center gap-2">
+          <span className="text-[0.65rem] text-custom-text-200 flex-shrink-0">{projectDetails?.identifier}</span>
+          <span className="truncate">{projectDetails?.name}</span>
+        </div>
+      ),
+    };
+  });
+
+  // handlers
+  const ExportCSVToMail = async (formData: FormData) => {
+    console.log(formData);
+    setExportLoading(true);
+    if (workspaceSlug && user) {
+      const payload = {
+        provider: formData.provider.provider,
+        project: formData.project,
+        multiple: formData.project.length > 1,
+      };
+      await projectExportService
+        .csvExport(workspaceSlug as string, payload)
+        .then(() => {
+          mutateServices();
+          setExportLoading(false);
+          captureSuccess({
+            eventName: WORKSPACE_SETTINGS_TRACKER_EVENTS.csv_exported,
+            payload: {
+              provider: formData.provider.provider,
+            },
+          });
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
+            title: t("workspace_settings.settings.exports.modal.toasts.success.title"),
+            message: t("workspace_settings.settings.exports.modal.toasts.success.message", {
+              entity:
+                formData.provider.provider === "csv"
+                  ? "CSV"
+                  : formData.provider.provider === "xlsx"
+                    ? "Excel"
+                    : formData.provider.provider === "json"
+                      ? "JSON"
+                      : "",
+            }),
+          });
+        })
+        .catch((error) => {
+          setExportLoading(false);
+          captureError({
+            eventName: WORKSPACE_SETTINGS_TRACKER_EVENTS.csv_exported,
+            payload: {
+              provider: formData.provider.provider,
+            },
+            error: error as Error,
+          });
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: t("error"),
+            message: t("workspace_settings.settings.exports.modal.toasts.error.message"),
+          });
+        });
+    }
+  };
+  return (
+    <form onSubmit={handleSubmit(ExportCSVToMail)} className="flex flex-col gap-4 mt-4">
+      <div className="flex gap-4">
+        {/* Project Selector */}
+        <div className="w-1/2">
+          <div className="text-sm font-medium text-custom-text-200 mb-2">
+            {t("workspace_settings.settings.exports.exporting_projects")}
+          </div>
+          <Controller
+            control={control}
+            name="project"
+            disabled={!isMember && (!hasProjects || !canPerformAnyCreateAction)}
+            render={({ field: { value, onChange } }) => (
+              <CustomSearchSelect
+                value={value ?? []}
+                onChange={(val: string[]) => onChange(val)}
+                options={options}
+                input
+                label={
+                  value && value.length > 0
+                    ? value
+                        .map((projectId) => {
+                          const projectDetails = getProjectById(projectId);
+
+                          return projectDetails?.identifier;
+                        })
+                        .join(", ")
+                    : "All projects"
+                }
+                optionsClassName="max-w-48 sm:max-w-[532px]"
+                placement="bottom-end"
+                multiple
+              />
+            )}
+          />
+        </div>
+        {/* Format Selector */}
+        <div className="w-1/2">
+          <div className="text-sm font-medium text-custom-text-200 mb-2">
+            {t("workspace_settings.settings.exports.format")}
+          </div>
+          <Controller
+            control={control}
+            name="provider"
+            disabled={!isMember && (!hasProjects || !canPerformAnyCreateAction)}
+            render={({ field: { value, onChange } }) => (
+              <CustomSelect
+                value={value}
+                onChange={onChange}
+                label={t(value.i18n_title)}
+                optionsClassName="max-w-48 sm:max-w-[532px]"
+                placement="bottom-end"
+                buttonClassName="py-2 text-sm"
+              >
+                {EXPORTERS_LIST.map((service) => (
+                  <CustomSelect.Option key={service.provider} className="flex items-center gap-2" value={service}>
+                    <span className="truncate">{t(service.i18n_title)}</span>
+                  </CustomSelect.Option>
+                ))}
+              </CustomSelect>
+            )}
+          />
+        </div>
+      </div>
+      <div className="flex items-center justify-between ">
+        <Button
+          variant="primary"
+          type="submit"
+          loading={exportLoading}
+          data-ph-element={WORKSPACE_SETTINGS_TRACKER_ELEMENTS.EXPORT_BUTTON}
+        >
+          {exportLoading ? `${t("workspace_settings.settings.exports.exporting")}...` : t("export")}
+        </Button>
+      </div>
+    </form>
+  );
+};

apps/web/core/components/exporter/export-modal.tsx

@@ -0,0 +1,201 @@
+"use client";
+
+import React, { useState } from "react";
+import { intersection } from "lodash-es";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { Dialog, Transition } from "@headlessui/react";
+// types
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IUser, IImporterService } from "@plane/types";
+// ui
+import { CustomSearchSelect } from "@plane/ui";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useUser } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+// services
+import { ProjectExportService } from "@/services/project";
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  data: IImporterService | null;
+  user: IUser | null;
+  provider: string | string[];
+  mutateServices: () => void;
+};
+
+const projectExportService = new ProjectExportService();
+
+export const Exporter: React.FC<Props> = observer((props) => {
+  const { isOpen, handleClose, user, provider, mutateServices } = props;
+  // states
+  const [exportLoading, setExportLoading] = useState(false);
+  const [isSelectOpen, setIsSelectOpen] = useState(false);
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { workspaceProjectIds, getProjectById } = useProject();
+  const { projectsWithCreatePermissions } = useUser();
+  const { t } = useTranslation();
+
+  const wsProjectIdsWithCreatePermisisons = projectsWithCreatePermissions
+    ? intersection(workspaceProjectIds, Object.keys(projectsWithCreatePermissions))
+    : [];
+
+  const options = wsProjectIdsWithCreatePermisisons?.map((projectId) => {
+    const projectDetails = getProjectById(projectId);
+
+    return {
+      value: projectDetails?.id,
+      query: `${projectDetails?.name} ${projectDetails?.identifier}`,
+      content: (
+        <div className="flex items-center gap-2">
+          <span className="text-[0.65rem] text-custom-text-200 flex-shrink-0">{projectDetails?.identifier}</span>
+          <span className="truncate">{projectDetails?.name}</span>
+        </div>
+      ),
+    };
+  });
+
+  const [value, setValue] = React.useState<string[]>([]);
+  const [multiple, setMultiple] = React.useState<boolean>(false);
+  const onChange = (val: any) => {
+    setValue(val);
+  };
+  const ExportCSVToMail = async () => {
+    setExportLoading(true);
+    if (workspaceSlug && user && typeof provider === "string") {
+      const payload = {
+        provider: provider,
+        project: value,
+        multiple: multiple,
+      };
+      await projectExportService
+        .csvExport(workspaceSlug as string, payload)
+        .then(() => {
+          mutateServices();
+          router.push(`/${workspaceSlug}/settings/exports`);
+          setExportLoading(false);
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
+            title: t("workspace_settings.settings.exports.modal.toasts.success.title"),
+            message: t("workspace_settings.settings.exports.modal.toasts.success.message", {
+              entity: provider === "csv" ? "CSV" : provider === "xlsx" ? "Excel" : provider === "json" ? "JSON" : "",
+            }),
+          });
+        })
+        .catch(() => {
+          setExportLoading(false);
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: t("error"),
+            message: t("workspace_settings.settings.exports.modal.toasts.error.message"),
+          });
+        });
+    }
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog
+        as="div"
+        className="relative z-20"
+        onClose={() => {
+          if (!isSelectOpen) handleClose();
+        }}
+      >
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center  sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-xl">
+                <div className="flex flex-col gap-6 gap-y-4 p-6">
+                  <div className="flex w-full items-center justify-start gap-6">
+                    <span className="flex items-center justify-start">
+                      <h3 className="text-xl font-medium 2xl:text-2xl">
+                        {t("workspace_settings.settings.exports.modal.title")}{" "}
+                        {provider === "csv" ? "CSV" : provider === "xlsx" ? "Excel" : provider === "json" ? "JSON" : ""}
+                      </h3>
+                    </span>
+                  </div>
+                  <div>
+                    <CustomSearchSelect
+                      value={value ?? []}
+                      onChange={(val: string[]) => onChange(val)}
+                      options={options}
+                      input
+                      label={
+                        value && value.length > 0
+                          ? value
+                              .map((projectId) => {
+                                const projectDetails = getProjectById(projectId);
+
+                                return projectDetails?.identifier;
+                              })
+                              .join(", ")
+                          : "All projects"
+                      }
+                      onOpen={() => setIsSelectOpen(true)}
+                      onClose={() => setIsSelectOpen(false)}
+                      optionsClassName="max-w-48 sm:max-w-[532px]"
+                      placement="bottom-end"
+                      multiple
+                    />
+                  </div>
+                  <div
+                    onClick={() => setMultiple(!multiple)}
+                    className="flex max-w-min cursor-pointer items-center gap-2"
+                  >
+                    <input type="checkbox" checked={multiple} onChange={() => setMultiple(!multiple)} />
+                    <div className="whitespace-nowrap text-sm">
+                      {t("workspace_settings.settings.exports.export_separate_files")}
+                    </div>
+                  </div>
+                  <div className="flex justify-end gap-2">
+                    <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                      {t("cancel")}
+                    </Button>
+                    <Button
+                      variant="primary"
+                      size="sm"
+                      onClick={ExportCSVToMail}
+                      disabled={exportLoading}
+                      loading={exportLoading}
+                    >
+                      {exportLoading
+                        ? `${t("workspace_settings.settings.exports.exporting")}...`
+                        : t("workspace_settings.settings.exports.title")}
+                    </Button>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+});

apps/web/core/components/exporter/guide.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { useParams, useSearchParams } from "next/navigation";
+import { mutate } from "swr";
+import { EXPORT_SERVICES_LIST } from "@/constants/fetch-keys";
+import { ExportForm } from "./export-form";
+import { PrevExports } from "./prev-exports";
+
+const IntegrationGuide = observer(() => {
+  // router
+  const { workspaceSlug } = useParams();
+  const searchParams = useSearchParams();
+  const provider = searchParams.get("provider");
+  // state
+  const per_page = 10;
+  const [cursor, setCursor] = useState<string | undefined>(`10:0:0`);
+
+  return (
+    <>
+      <div className="h-full w-full">
+        <>
+          <ExportForm
+            workspaceSlug={workspaceSlug as string}
+            provider={provider}
+            mutateServices={() => mutate(EXPORT_SERVICES_LIST(workspaceSlug as string, `${cursor}`, `${per_page}`))}
+          />
+          <PrevExports
+            workspaceSlug={workspaceSlug as string}
+            cursor={cursor}
+            per_page={per_page}
+            setCursor={setCursor}
+          />
+        </>
+      </div>
+    </>
+  );
+});
+
+export default IntegrationGuide;

apps/web/core/components/exporter/prev-exports.tsx

@@ -0,0 +1,140 @@
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import useSWR, { mutate } from "swr";
+import { MoveLeft, MoveRight, RefreshCw } from "lucide-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { EmptyStateCompact } from "@plane/propel/empty-state";
+import type { IExportData } from "@plane/types";
+import { Table } from "@plane/ui";
+// components
+import { ImportExportSettingsLoader } from "@/components/ui/loader/settings/import-and-export";
+// constants
+import { EXPORT_SERVICES_LIST } from "@/constants/fetch-keys";
+// services
+import { IntegrationService } from "@/services/integrations";
+// local imports
+import { useExportColumns } from "./column";
+
+const integrationService = new IntegrationService();
+
+type Props = {
+  workspaceSlug: string;
+  cursor: string | undefined;
+  per_page: number;
+  setCursor: (cursor: string) => void;
+};
+type RowData = IExportData;
+export const PrevExports = observer((props: Props) => {
+  // props
+  const { workspaceSlug, cursor, per_page, setCursor } = props;
+  // state
+  const [refreshing, setRefreshing] = useState(false);
+  // hooks
+  const { t } = useTranslation();
+  const columns = useExportColumns();
+
+  const { data: exporterServices } = useSWR(
+    workspaceSlug && cursor ? EXPORT_SERVICES_LIST(workspaceSlug as string, cursor, `${per_page}`) : null,
+    workspaceSlug && cursor
+      ? () => integrationService.getExportsServicesList(workspaceSlug as string, cursor, per_page)
+      : null
+  );
+
+  const handleRefresh = () => {
+    setRefreshing(true);
+    mutate(EXPORT_SERVICES_LIST(workspaceSlug as string, `${cursor}`, `${per_page}`)).then(() => setRefreshing(false));
+  };
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (exporterServices?.results?.some((service) => service.status === "processing")) {
+        handleRefresh();
+      } else {
+        clearInterval(interval);
+      }
+    }, 3000);
+
+    return () => clearInterval(interval);
+  }, [exporterServices]);
+
+  return (
+    <div>
+      <div className="flex items-center justify-between border-b border-custom-border-100 pb-3.5 pt-7">
+        <div className="flex items-center gap-2">
+          <h3 className="flex gap-2 text-xl font-medium">
+            {t("workspace_settings.settings.exports.previous_exports")}
+          </h3>
+
+          <button
+            type="button"
+            className="flex flex-shrink-0 items-center gap-1 rounded bg-custom-background-80 px-1.5 py-1 text-xs outline-none"
+            onClick={handleRefresh}
+          >
+            <RefreshCw className={`h-3 w-3 ${refreshing ? "animate-spin" : ""}`} />{" "}
+            {refreshing ? `${t("refreshing")}...` : t("refresh_status")}
+          </button>
+        </div>
+        <div className="flex items-center gap-2 text-xs">
+          <button
+            disabled={!exporterServices?.prev_page_results}
+            onClick={() => exporterServices?.prev_page_results && setCursor(exporterServices?.prev_cursor)}
+            className={`flex items-center rounded border border-custom-primary-100 px-1 text-custom-primary-100 ${
+              exporterServices?.prev_page_results
+                ? "cursor-pointer hover:bg-custom-primary-100 hover:text-white"
+                : "cursor-not-allowed opacity-75"
+            }`}
+          >
+            <MoveLeft className="h-4 w-4" />
+            <div className="pr-1">{t("prev")}</div>
+          </button>
+          <button
+            disabled={!exporterServices?.next_page_results}
+            onClick={() => exporterServices?.next_page_results && setCursor(exporterServices?.next_cursor)}
+            className={`flex items-center rounded border border-custom-primary-100 px-1 text-custom-primary-100 ${
+              exporterServices?.next_page_results
+                ? "cursor-pointer hover:bg-custom-primary-100 hover:text-white"
+                : "cursor-not-allowed opacity-75"
+            }`}
+          >
+            <div className="pl-1">{t("next")}</div>
+            <MoveRight className="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+
+      <div className="flex flex-col">
+        {exporterServices && exporterServices?.results ? (
+          exporterServices?.results?.length > 0 ? (
+            <div>
+              <div className="divide-y divide-custom-border-200">
+                <Table
+                  columns={columns}
+                  data={exporterServices?.results ?? []}
+                  keyExtractor={(rowData: RowData) => rowData?.id ?? ""}
+                  tHeadClassName="border-b border-custom-border-100"
+                  thClassName="text-left font-medium divide-x-0 text-custom-text-400"
+                  tBodyClassName="divide-y-0"
+                  tBodyTrClassName="divide-x-0 p-4 h-[40px] text-custom-text-200"
+                  tHeadTrClassName="divide-x-0"
+                />
+              </div>
+            </div>
+          ) : (
+            <div className="flex h-full w-full items-center justify-center">
+              <EmptyStateCompact
+                assetKey="export"
+                title={t("settings_empty_state.exports.title")}
+                description={t("settings_empty_state.exports.description")}
+                align="start"
+                rootClassName="py-20"
+              />
+            </div>
+          )
+        ) : (
+          <ImportExportSettingsLoader />
+        )}
+      </div>
+    </div>
+  );
+});

apps/web/core/components/exporter/single-export.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import type { FC } from "react";
+import { useState } from "react";
+// ui
+import { Button } from "@plane/propel/button";
+import type { IExportData } from "@plane/types";
+// helpers
+import { getDate, renderFormattedDate } from "@plane/utils";
+// types
+
+type Props = {
+  service: IExportData;
+  refreshing: boolean;
+};
+
+export const SingleExport: FC<Props> = ({ service, refreshing }) => {
+  const provider = service.provider;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [isLoading] = useState(false);
+
+  const checkExpiry = (inputDateString: string) => {
+    const currentDate = new Date();
+    const expiryDate = getDate(inputDateString);
+    if (!expiryDate) return false;
+    expiryDate.setDate(expiryDate.getDate() + 7);
+    return expiryDate > currentDate;
+  };
+
+  return (
+    <div className="flex items-center justify-between gap-2 px-4 py-3">
+      <div>
+        <h4 className="flex items-center gap-2 text-sm">
+          <span>
+            Export to{" "}
+            <span className="font-medium">
+              {provider === "csv" ? "CSV" : provider === "xlsx" ? "Excel" : provider === "json" ? "JSON" : ""}
+            </span>{" "}
+          </span>
+          <span
+            className={`rounded px-2 py-0.5 text-xs capitalize ${
+              service.status === "completed"
+                ? "bg-green-500/20 text-green-500"
+                : service.status === "processing"
+                  ? "bg-yellow-500/20 text-yellow-500"
+                  : service.status === "failed"
+                    ? "bg-red-500/20 text-red-500"
+                    : service.status === "expired"
+                      ? "bg-orange-500/20 text-orange-500"
+                      : ""
+            }`}
+          >
+            {refreshing ? "Refreshing..." : service.status}
+          </span>
+        </h4>
+        <div className="mt-2 flex items-center gap-2 text-xs text-custom-text-200">
+          <span>{renderFormattedDate(service.created_at)}</span>|
+          <span>Exported by {service?.initiated_by_detail?.display_name}</span>
+        </div>
+      </div>
+      {checkExpiry(service.created_at) ? (
+        <>
+          {service.status == "completed" && (
+            <div>
+              <a target="_blank" href={service?.url} rel="noopener noreferrer">
+                <Button variant="primary" className="w-full">
+                  {isLoading ? "Downloading..." : "Download"}
+                </Button>
+              </a>
+            </div>
+          )}
+        </>
+      ) : (
+        <div className="text-xs text-red-500">Expired</div>
+      )}
+    </div>
+  );
+};