feat: csv, json and, xlsx exporter (#1840)

* feat : csv, jason and, xlxs exporter * handeling the export fail * adding expired state to exports * typo update * header change * improvement: added validation for the expired date --------- Co-authored-by: srinivaspendem <you@example.comsrinivaspendem2612@gmail.com>
2023-08-14 11:44:17 +05:30 · 2023-08-14 11:44:17 +05:30 · ddd3301d17
commit ddd3301d17
parent 816f00d956
22 changed files with 673 additions and 24 deletions
--- a/apps/app/components/command-palette/command-k.tsx
+++ b/apps/app/components/command-palette/command-k.tsx
@ -739,12 +739,21 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
                        </div>
                      </Command.Item>
                      <Command.Item
-                        onSelect={() => redirect(`/${workspaceSlug}/settings/import-export`)}
+                        onSelect={() => redirect(`/${workspaceSlug}/settings/imports`)}
                        className="focus:outline-none"
                      >
                        <div className="flex items-center gap-2 text-custom-text-200">
                          <SettingIcon className="h-4 w-4 text-custom-text-200" />
-                          Import/Export
+                          Import
+                        </div>
+                      </Command.Item>
+                      <Command.Item
+                        onSelect={() => redirect(`/${workspaceSlug}/settings/exports`)}
+                        className="focus:outline-none"
+                      >
+                        <div className="flex items-center gap-2 text-custom-text-200">
+                          <SettingIcon className="h-4 w-4 text-custom-text-200" />
+                          Export
                        </div>
                      </Command.Item>
                    </>
--- a/apps/app/components/exporter/export-modal.tsx
+++ b/apps/app/components/exporter/export-modal.tsx
@ -0,0 +1,185 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// services
+import CSVIntegrationService from "services/integration/csv.services";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { SecondaryButton, PrimaryButton, CustomSearchSelect } from "components/ui";
+// types
+import { ICurrentUserResponse, IImporterService } from "types";
+// fetch-keys
+import useProjects from "hooks/use-projects";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  data: IImporterService | null;
+  user: ICurrentUserResponse | undefined;
+  provider: string | string[];
+  mutateServices: () => void;
+};
+
+export const Exporter: React.FC<Props> = ({
+  isOpen,
+  handleClose,
+  user,
+  provider,
+  mutateServices,
+}) => {
+  const [exportLoading, setExportLoading] = useState(false);
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  const { projects } = useProjects();
+  const { setToastAlert } = useToast();
+
+  const options = projects?.map((project) => ({
+    value: project.id,
+    query: project.name + project.identifier,
+    content: (
+      <div className="flex items-center gap-2">
+        <span className="text-custom-text-200 text-[0.65rem]">{project.identifier}</span>
+        {project.name}
+      </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 CSVIntegrationService.exportCSVService(workspaceSlug as string, payload, user)
+        .then(() => {
+          mutateServices();
+          router.push(`/${workspaceSlug}/settings/exports`);
+          setExportLoading(false);
+          setToastAlert({
+            type: "success",
+            title: "Export Successful",
+            message: `You will be able to download the exported ${
+              provider === "csv"
+                ? "CSV"
+                : provider === "xlsx"
+                ? "Excel"
+                : provider === "json"
+                ? "JSON"
+                : ""
+            } from the previous export.`,
+          });
+        })
+        .catch(() => {
+          setExportLoading(false);
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "Export was unsuccessful. Please try again.",
+          });
+        });
+    }
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={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 bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-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 border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+                <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">
+                        Export to{" "}
+                        {provider === "csv"
+                          ? "CSV"
+                          : provider === "xlsx"
+                          ? "Excel"
+                          : provider === "json"
+                          ? "JSON"
+                          : ""}
+                      </h3>
+                    </span>
+                  </div>
+                  <div>
+                    <CustomSearchSelect
+                      value={value ?? []}
+                      onChange={(val: string[]) => onChange(val)}
+                      options={options}
+                      input={true}
+                      label={
+                        value && value.length > 0
+                          ? projects &&
+                            projects
+                              .filter((p) => value.includes(p.id))
+                              .map((p) => p.identifier)
+                              .join(", ")
+                          : "All projects"
+                      }
+                      optionsClassName="min-w-full"
+                      multiple
+                    />
+                  </div>
+                  <div
+                    onClick={() => setMultiple(!multiple)}
+                    className="flex items-center gap-2 max-w-min cursor-pointer"
+                  >
+                    <input
+                      type="checkbox"
+                      checked={multiple}
+                      onChange={() => setMultiple(!multiple)}
+                    />
+                    <div className="text-sm whitespace-nowrap">
+                      Export the data into separate files
+                    </div>
+                  </div>
+                  <div className="flex justify-end gap-2">
+                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                    <PrimaryButton
+                      onClick={ExportCSVToMail}
+                      disabled={exportLoading}
+                      loading={exportLoading}
+                    >
+                      {exportLoading ? "Exporting..." : "Export"}
+                    </PrimaryButton>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
--- a/apps/app/components/exporter/guide.tsx
+++ b/apps/app/components/exporter/guide.tsx
@ -0,0 +1,171 @@
+import { useState } from "react";
+
+import Link from "next/link";
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// hooks
+import useUserAuth from "hooks/use-user-auth";
+// services
+import IntegrationService from "services/integration";
+// components
+import { Exporter, SingleExport } from "components/exporter";
+// ui
+import { Icon, Loader, PrimaryButton } from "components/ui";
+// icons
+import { ArrowPathIcon } from "@heroicons/react/24/outline";
+// fetch-keys
+import { EXPORT_SERVICES_LIST } from "constants/fetch-keys";
+// constants
+import { EXPORTERS_LIST } from "constants/workspace";
+
+const IntegrationGuide = () => {
+  const [refreshing, setRefreshing] = useState(false);
+  const per_page = 10;
+  const [cursor, setCursor] = useState<string | undefined>(`10:0:0`);
+
+  const router = useRouter();
+  const { workspaceSlug, provider } = router.query;
+
+  const { user } = useUserAuth();
+
+  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 handleCsvClose = () => {
+    router.replace(`/plane/settings/exports`);
+  };
+
+  return (
+    <>
+      <div className="h-full space-y-2">
+        <>
+          <div className="space-y-2">
+            {EXPORTERS_LIST.map((service) => (
+              <div
+                key={service.provider}
+                className="rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4"
+              >
+                <div className="flex items-center gap-4 whitespace-nowrap">
+                  <div className="relative h-10 w-10 flex-shrink-0">
+                    <Image
+                      src={service.logo}
+                      layout="fill"
+                      objectFit="cover"
+                      alt={`${service.title} Logo`}
+                    />
+                  </div>
+                  <div className="w-full">
+                    <h3>{service.title}</h3>
+                    <p className="text-sm text-custom-text-200">{service.description}</p>
+                  </div>
+                  <div className="flex-shrink-0">
+                    <Link href={`/${workspaceSlug}/settings/export?provider=${service.provider}`}>
+                      <a>
+                        <PrimaryButton>
+                          <span className="capitalize">{service.type}</span> now
+                        </PrimaryButton>
+                      </a>
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4">
+            <h3 className="mb-2 flex gap-2 text-lg font-medium justify-between">
+              <div className="flex gap-2">
+                <div className="">Previous Exports</div>
+                <button
+                  type="button"
+                  className="flex flex-shrink-0 items-center gap-1 rounded bg-custom-background-80 py-1 px-1.5 text-xs outline-none"
+                  onClick={() => {
+                    setRefreshing(true);
+                    mutate(
+                      EXPORT_SERVICES_LIST(workspaceSlug as string, `${cursor}`, `${per_page}`)
+                    ).then(() => setRefreshing(false));
+                  }}
+                >
+                  <ArrowPathIcon className={`h-3 w-3 ${refreshing ? "animate-spin" : ""}`} />{" "}
+                  {refreshing ? "Refreshing..." : "Refresh status"}
+                </button>
+              </div>
+              <div className="flex gap-2 items-center text-xs">
+                <button
+                  disabled={!exporterServices?.prev_page_results}
+                  onClick={() =>
+                    exporterServices?.prev_page_results && setCursor(exporterServices?.prev_cursor)
+                  }
+                  className={`flex items-center border border-custom-primary-100 text-custom-primary-100 px-1 rounded ${
+                    exporterServices?.prev_page_results
+                      ? "cursor-pointer hover:bg-custom-primary-100 hover:text-white"
+                      : "cursor-not-allowed opacity-75"
+                  }`}
+                >
+                  <Icon iconName="keyboard_arrow_left" className="!text-lg" />
+                  <div className="pr-1">Prev</div>
+                </button>
+                <button
+                  disabled={!exporterServices?.next_page_results}
+                  onClick={() =>
+                    exporterServices?.next_page_results && setCursor(exporterServices?.next_cursor)
+                  }
+                  className={`flex items-center border border-custom-primary-100 text-custom-primary-100 px-1 rounded ${
+                    exporterServices?.next_page_results
+                      ? "cursor-pointer hover:bg-custom-primary-100 hover:text-white"
+                      : "cursor-not-allowed opacity-75"
+                  }`}
+                >
+                  <div className="pl-1">Next</div>
+                  <Icon iconName="keyboard_arrow_right" className="!text-lg" />
+                </button>
+              </div>
+            </h3>
+            {exporterServices && exporterServices?.results ? (
+              exporterServices?.results?.length > 0 ? (
+                <div className="space-y-2">
+                  <div className="divide-y divide-custom-border-200">
+                    {exporterServices?.results.map((service) => (
+                      <SingleExport key={service.id} service={service} refreshing={refreshing} />
+                    ))}
+                  </div>
+                </div>
+              ) : (
+                <p className="py-2 text-sm text-custom-text-200">No previous export available.</p>
+              )
+            ) : (
+              <Loader className="mt-6 grid grid-cols-1 gap-3">
+                <Loader.Item height="40px" width="100%" />
+                <Loader.Item height="40px" width="100%" />
+                <Loader.Item height="40px" width="100%" />
+                <Loader.Item height="40px" width="100%" />
+              </Loader>
+            )}
+          </div>
+        </>
+        {provider && (
+          <Exporter
+            isOpen={true}
+            handleClose={() => handleCsvClose()}
+            data={null}
+            user={user}
+            provider={provider}
+            mutateServices={() =>
+              mutate(EXPORT_SERVICES_LIST(workspaceSlug as string, `${cursor}`, `${per_page}`))
+            }
+          />
+        )}
+      </div>
+    </>
+  );
+};
+
+export default IntegrationGuide;
--- a/apps/app/components/exporter/index.tsx
+++ b/apps/app/components/exporter/index.tsx
@ -0,0 +1,4 @@
+//layout
+export * from "./single-export";
+// csv
+export * from "./export-modal";
--- a/apps/app/components/exporter/single-export.tsx
+++ b/apps/app/components/exporter/single-export.tsx
@ -0,0 +1,81 @@
+import React from "react";
+// next imports
+import Link from "next/link";
+// ui
+import { PrimaryButton } from "components/ui"; // icons
+// helpers
+import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
+// types
+import { IExportData } from "types";
+
+type Props = {
+  service: IExportData;
+  refreshing: boolean;
+};
+
+export const SingleExport: React.FC<Props> = ({ service, refreshing }) => {
+  const provider = service.provider;
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  const checkExpiry = (inputDateString: string) => {
+    const currentDate = new Date();
+    const expiryDate = new Date(inputDateString);
+    expiryDate.setDate(expiryDate.getDate() + 7);
+    return expiryDate > currentDate;
+  };
+
+  return (
+    <div className="flex items-center justify-between gap-2 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>{renderShortDateWithYearFormat(service.created_at)}</span>|
+          <span>Exported by {service?.initiated_by_detail?.display_name}</span>
+        </div>
+      </div>
+      {checkExpiry(service.created_at) ? (
+        <>
+          {service.status == "completed" && (
+            <div>
+              <Link href={service?.url}>
+                <PrimaryButton className="w-full text-center">
+                  {isLoading ? "Downloading..." : "Download"}
+                </PrimaryButton>
+              </Link>
+            </div>
+          )}
+        </>
+      ) : (
+        <div className="text-xs text-red-500">Expired</div>
+      )}
+    </div>
+  );
+};
--- a/apps/app/components/integration/github/root.tsx
+++ b/apps/app/components/integration/github/root.tsx
@ -163,7 +163,7 @@ export const GithubImporterRoot: React.FC<Props> = ({ user }) => {

    await GithubIntegrationService.createGithubServiceImport(workspaceSlug as string, payload, user)
      .then(() => {
-        router.push(`/${workspaceSlug}/settings/import-export`);
+        router.push(`/${workspaceSlug}/settings/imports`);
        mutate(IMPORTER_SERVICES_LIST(workspaceSlug as string));
      })
      .catch(() =>
@ -178,7 +178,7 @@ export const GithubImporterRoot: React.FC<Props> = ({ user }) => {
  return (
    <form onSubmit={handleSubmit(createGithubImporterService)}>
      <div className="space-y-2">
-        <Link href={`/${workspaceSlug}/settings/import-export`}>
+        <Link href={`/${workspaceSlug}/settings/imports`}>
          <div className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-custom-text-200 hover:text-custom-text-100">
            <ArrowLeftIcon className="h-3 w-3" />
            <div>Cancel import & go back</div>
--- a/apps/app/components/integration/guide.tsx
+++ b/apps/app/components/integration/guide.tsx
@ -58,7 +58,7 @@ const IntegrationGuide = () => {
        user={user}
      />
      <div className="h-full space-y-2">
-        {!provider && (
+        {(!provider || provider === "csv") && (
          <>
            <div className="mb-5 flex items-center gap-2">
              <div className="h-full w-full space-y-1">
@ -100,7 +100,7 @@ const IntegrationGuide = () => {
                    </div>
                    <div className="flex-shrink-0">
                      <Link
-                        href={`/${workspaceSlug}/settings/import-export?provider=${service.provider}`}
+                        href={`/${workspaceSlug}/settings/import?provider=${service.provider}`}
                      >
                        <a>
                          <PrimaryButton>
--- a/apps/app/components/integration/jira/root.tsx
+++ b/apps/app/components/integration/jira/root.tsx
@ -92,7 +92,7 @@ export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
      .createJiraImporter(workspaceSlug.toString(), data, user)
      .then(() => {
        mutate(IMPORTER_SERVICES_LIST(workspaceSlug.toString()));
-        router.push(`/${workspaceSlug}/settings/import-export`);
+        router.push(`/${workspaceSlug}/settings/imports`);
      })
      .catch((err) => {
        console.log(err);
@ -109,7 +109,7 @@ export const JiraImporterRoot: React.FC<Props> = ({ user }) => {

  return (
    <div className="flex h-full flex-col space-y-2">
-      <Link href={`/${workspaceSlug}/settings/import-export`}>
+      <Link href={`/${workspaceSlug}/settings/imports`}>
        <div className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-custom-text-200 hover:text-custom-text-100">
          <div>
            <ArrowLeftIcon className="h-3 w-3" />
--- a/apps/app/components/ui/integration-and-import-export-banner.tsx
+++ b/apps/app/components/ui/integration-and-import-export-banner.tsx
@ -2,18 +2,17 @@ import { ExclamationIcon } from "components/icons";

 type Props = {
  bannerName: string;
+  description?: string;
 };

-export const IntegrationAndImportExportBanner: React.FC<Props> = ({ bannerName }) => (
+export const IntegrationAndImportExportBanner: React.FC<Props> = ({ bannerName, description }) => (
  <div className="flex flex-col items-start gap-3">
    <h3 className="text-2xl font-semibold">{bannerName}</h3>
+    {description && (
      <div className="flex items-center gap-3 rounded-[10px] border border-custom-primary/75 bg-custom-primary/5 p-4 text-sm text-custom-text-100">
        <ExclamationIcon height={24} width={24} className="fill-current text-custom-text-100" />
-      <p className="leading-5">
-        Integrations and importers are only available on the cloud version. We plan to open-source
-        our SDKs in the near future so that the community can request or contribute integrations as
-        needed.
-      </p>
+        <p className="leading-5">{description}</p>
      </div>
+    )}
  </div>
 );
--- a/apps/app/constants/fetch-keys.ts
+++ b/apps/app/constants/fetch-keys.ts
@ -237,6 +237,10 @@ export const JIRA_IMPORTER_DETAIL = (workspaceSlug: string, params: IJiraMetadat
 export const IMPORTER_SERVICES_LIST = (workspaceSlug: string) =>
  `IMPORTER_SERVICES_LIST_${workspaceSlug.toUpperCase()}`;

+//export
+export const EXPORT_SERVICES_LIST = (workspaceSlug: string, cursor: string, per_page: string) =>
+  `EXPORTER_SERVICES_LIST_${workspaceSlug.toUpperCase()}_${cursor.toUpperCase()}_${per_page.toUpperCase()}`;
+
 // github-importer
 export const GITHUB_REPOSITORY_INFO = (workspaceSlug: string, repoName: string) =>
  `GITHUB_REPO_INFO_${workspaceSlug.toString().toUpperCase()}_${repoName.toUpperCase()}`;
--- a/apps/app/constants/workspace.ts
+++ b/apps/app/constants/workspace.ts
@ -1,6 +1,9 @@
 // services images
 import GithubLogo from "public/services/github.png";
 import JiraLogo from "public/services/jira.png";
+import CSVLogo from "public/services/csv.png";
+import ExcelLogo from "public/services/excel.png";
+import JSONLogo from "public/services/json.png";

 export const ROLE = {
  5: "Guest",
@ -40,3 +43,27 @@ export const IMPORTERS_EXPORTERS_LIST = [
    logo: JiraLogo,
  },
 ];
+
+export const EXPORTERS_LIST = [
+  {
+    provider: "csv",
+    type: "export",
+    title: "CSV",
+    description: "Export issues to a CSV file.",
+    logo: CSVLogo,
+  },
+  {
+    provider: "xlsx",
+    type: "export",
+    title: "Excel",
+    description: "Export issues to a Excel file.",
+    logo: ExcelLogo,
+  },
+  {
+    provider: "json",
+    type: "export",
+    title: "JSON",
+    description: "Export issues to a JSON file.",
+    logo: JSONLogo,
+  },
+];
--- a/apps/app/layouts/settings-navbar.tsx
+++ b/apps/app/layouts/settings-navbar.tsx
@ -30,8 +30,12 @@ const SettingsNavbar: React.FC<Props> = ({ profilePage = false }) => {
      href: `/${workspaceSlug}/settings/integrations`,
    },
    {
-      label: "Import/Export",
-      href: `/${workspaceSlug}/settings/import-export`,
+      label: "Imports",
+      href: `/${workspaceSlug}/settings/imports`,
+    },
+    {
+      label: "Exports",
+      href: `/${workspaceSlug}/settings/exports`,
    },
  ];

@ -103,7 +107,7 @@ const SettingsNavbar: React.FC<Props> = ({ profilePage = false }) => {
            <div
              className={`rounded-full border px-5 py-1.5 text-sm outline-none ${
                (
-                  link.label === "Import/Export"
+                  link.label === "Import"
                    ? router.asPath.includes(link.href)
                    : router.asPath === link.href
                )
--- a/apps/app/pages/[workspaceSlug]/settings/import-export.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/import-export.tsx
@ -8,7 +8,7 @@ import workspaceService from "services/workspace.service";
 import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
 import { SettingsHeader } from "components/workspace";
 // components
-import IntegrationGuide from "components/integration/guide";
+import ExportGuide from "components/exporter/guide";
 import { IntegrationAndImportExportBanner } from "components/ui";
 // ui
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
@ -37,14 +37,14 @@ const ImportExport: NextPage = () => {
            link={`/${workspaceSlug}`}
            linkTruncate
          />
-          <BreadcrumbItem title="Import/ Export Settings" unshrinkTitle />
+          <BreadcrumbItem title="Export Settings" unshrinkTitle />
        </Breadcrumbs>
      }
    >
      <div className="p-8 space-y-4">
        <SettingsHeader />
-        <IntegrationAndImportExportBanner bannerName="Import/ Export" />
-        <IntegrationGuide />
+        <IntegrationAndImportExportBanner bannerName="Export" />
+        <ExportGuide />
      </div>
    </WorkspaceAuthorizationLayout>
  );
--- a/apps/app/pages/[workspaceSlug]/settings/imports.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/imports.tsx
@ -0,0 +1,58 @@
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import workspaceService from "services/workspace.service";
+// layouts
+import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+import { SettingsHeader } from "components/workspace";
+// components
+import IntegrationGuide from "components/integration/guide";
+import { IntegrationAndImportExportBanner } from "components/ui";
+// ui
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// types
+import type { NextPage } from "next";
+// fetch-keys
+import { WORKSPACE_DETAILS } from "constants/fetch-keys";
+// helper
+import { truncateText } from "helpers/string.helper";
+
+const ImportExport: NextPage = () => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { data: activeWorkspace } = useSWR(
+    workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
+    () => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
+  );
+
+  return (
+    <WorkspaceAuthorizationLayout
+      breadcrumbs={
+        <Breadcrumbs>
+          <BreadcrumbItem
+            title={`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}
+            link={`/${workspaceSlug}`}
+            linkTruncate
+          />
+          <BreadcrumbItem title="Import/ Export Settings" unshrinkTitle />
+        </Breadcrumbs>
+      }
+    >
+      <div className="p-8 space-y-4">
+        <SettingsHeader />
+        <IntegrationAndImportExportBanner
+          bannerName="Import/ Export"
+          description="Integrations and importers are only available on the cloud version. We plan to open-source
+        our SDKs in the near future so that the community can request or contribute integrations as
+        needed."
+        />
+        <IntegrationGuide />
+      </div>
+    </WorkspaceAuthorizationLayout>
+  );
+};
+
+export default ImportExport;
--- a/apps/app/public/services/csv.png
+++ b/apps/app/public/services/csv.png
--- a/apps/app/public/services/excel.png
+++ b/apps/app/public/services/excel.png
--- a/apps/app/public/services/json.png
+++ b/apps/app/public/services/json.png
--- a/apps/app/services/integration/csv.services.ts
+++ b/apps/app/services/integration/csv.services.ts
@ -0,0 +1,42 @@
+import APIService from "services/api.service";
+import trackEventServices from "services/track-event.service";
+
+import { ICurrentUserResponse } from "types";
+
+const { NEXT_PUBLIC_API_BASE_URL } = process.env;
+
+const trackEvent =
+  process.env.NEXT_PUBLIC_TRACK_EVENTS === "true" || process.env.NEXT_PUBLIC_TRACK_EVENTS === "1";
+
+class CSVIntegrationService extends APIService {
+  constructor() {
+    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
+  }
+
+  async exportCSVService(
+    workspaceSlug: string,
+    data: {
+      provider: string;
+      project: string[];
+    },
+    user: ICurrentUserResponse
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/export-issues/`, data)
+      .then((response) => {
+        if (trackEvent)
+          trackEventServices.trackExporterEvent(
+            {
+              workspaceSlug,
+            },
+            "CSV_EXPORTER_CREATE",
+            user
+          );
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
+
+export default new CSVIntegrationService();
--- a/apps/app/services/integration/index.ts
+++ b/apps/app/services/integration/index.ts
@ -7,6 +7,7 @@ import {
  ICurrentUserResponse,
  IImporterService,
  IWorkspaceIntegration,
+  IExportServiceResponse,
 } from "types";

 const { NEXT_PUBLIC_API_BASE_URL } = process.env;
@ -52,6 +53,22 @@ class IntegrationService extends APIService {
        throw error?.response?.data;
      });
  }
+  async getExportsServicesList(
+    workspaceSlug: string,
+    cursor: string,
+    per_page: number
+  ): Promise<IExportServiceResponse> {
+    return this.get(`/api/workspaces/${workspaceSlug}/export-issues`, {
+      params: {
+        per_page,
+        cursor,
+      },
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }

  async deleteImporterService(
    workspaceSlug: string,
--- a/apps/app/services/track-event.service.ts
+++ b/apps/app/services/track-event.service.ts
@ -98,6 +98,8 @@ type ImporterEventType =
  | "JIRA_IMPORTER_CREATE"
  | "JIRA_IMPORTER_DELETE";

+type ExporterEventType = "CSV_EXPORTER_CREATE";
+
 type AnalyticsEventType =
  | "WORKSPACE_SCOPE_AND_DEMAND_ANALYTICS"
  | "WORKSPACE_CUSTOM_ANALYTICS"
@ -776,6 +778,27 @@ class TrackEventServices extends APIService {
    });
  }

+  // track exporter function\
+  async trackExporterEvent(
+    data: any,
+    eventName: ExporterEventType,
+    user: ICurrentUserResponse | undefined
+  ): Promise<any> {
+    const payload = { ...data };
+
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...payload,
+        },
+        user: user,
+      },
+    });
+  }
+
  // TODO: add types to the data
  async trackInboxEvent(
    data: any,
--- a/apps/app/types/importer/index.ts
+++ b/apps/app/types/importer/index.ts
@ -32,3 +32,27 @@ export interface IImporterService {
  token: string;
  workspace: string;
 }
+
+export interface IExportData {
+  id: string;
+  created_at: string;
+  updated_at: string;
+  project: string[];
+  provider: string;
+  status: string;
+  url: string;
+  token: string;
+  created_by: string;
+  updated_by: string;
+  initiated_by_detail: IUserLite;
+}
+export interface IExportServiceResponse {
+  count: number;
+  extra_stats: null;
+  next_cursor: string;
+  next_page_results: boolean;
+  prev_cursor: string;
+  prev_page_results: boolean;
+  results: IExportData[];
+  total_pages: number;
+}
--- a/apps/app/types/index.d.ts
+++ b/apps/app/types/index.d.ts
@ -19,6 +19,7 @@ export * from "./notifications";
 export * from "./waitlist";
 export * from "./reaction";

+
 export type NestedKeyOf<ObjectType extends object> = {
  [Key in keyof ObjectType & (string | number)]: ObjectType[Key] extends object
    ? ObjectType[Key] extends { pop: any; push: any }