[WEB-5000] feat: enhance exports settings with rich filters (#8124)

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

@@ -1,17 +1,25 @@
 import { useState } from "react";
 import { intersection } from "lodash-es";
+import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
+import { Info } from "lucide-react";
 import {
   EUserPermissions,
   EUserPermissionsLevel,
   EXPORTERS_LIST,
+  ISSUE_DISPLAY_FILTERS_BY_PAGE,
   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 { Tooltip } from "@plane/propel/tooltip";
+import { EIssuesStoreType } from "@plane/types";
+import type { TWorkItemFilterExpression } from "@plane/types";
 import { CustomSearchSelect, CustomSelect } from "@plane/ui";
+import { WorkspaceLevelWorkItemFiltersHOC } from "@/components/work-item-filters/filters-hoc/workspace-level";
+import { WorkItemFiltersRow } from "@/components/work-item-filters/filters-row";
 import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { useProject } from "@/hooks/store/use-project";
 import { useUser, useUserPermissions } from "@/hooks/store/user";
@@ -26,14 +34,27 @@ type FormData = {
   provider: (typeof EXPORTERS_LIST)[0];
   project: string[];
   multiple: boolean;
+  filters: TWorkItemFilterExpression;
 };
+
+const initialWorkItemFilters = {
+  richFilters: {},
+  displayFilters: {},
+  displayProperties: {},
+  kanbanFilters: {
+    group_by: [],
+    sub_group_by: [],
+  },
+};
+
 const projectExportService = new ProjectExportService();
 
-export const ExportForm = (props: Props) => {
+export const ExportForm = observer((props: Props) => {
   // props
   const { workspaceSlug, mutateServices } = props;
   // states
   const [exportLoading, setExportLoading] = useState(false);
+
   // store hooks
   const { allowPermissions } = useUserPermissions();
   const { data: user, canPerformAnyCreateAction, projectsWithCreatePermissions } = useUser();
@@ -45,8 +66,10 @@ export const ExportForm = (props: Props) => {
       provider: EXPORTERS_LIST[0],
       project: [],
       multiple: false,
+      filters: {},
     },
   });
+
   // derived values
   const hasProjects = workspaceProjectIds && workspaceProjectIds.length > 0;
   const isMember = allowPermissions([EUserPermissions.ADMIN, EUserPermissions.MEMBER], EUserPermissionsLevel.WORKSPACE);
@@ -70,13 +93,13 @@ export const ExportForm = (props: Props) => {
 
   // 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,
+        rich_filters: formData.filters,
       };
       await projectExportService
         .csvExport(workspaceSlug as string, payload)
@@ -185,7 +208,50 @@ export const ExportForm = (props: Props) => {
           />
         </div>
       </div>
-      <div className="flex items-center justify-between ">
+      {/* Rich Filters */}
+      <div className="w-full">
+        <div className="flex items-center gap-2 mb-2">
+          <div className="text-sm font-medium text-custom-text-200 leading-tight">{t("common.filters")}</div>
+          <Tooltip
+            tooltipContent={
+              <div className="max-w-[238px] flex gap-2">
+                <div className=" rounded bg-custom-background-80 flex items-center justify-center p-1 h-5 aspect-square">
+                  <Info className="h-3 w-3" />
+                </div>
+                {t("workspace_settings.settings.exports.filters_info")}
+              </div>
+            }
+            position="top"
+          >
+            <button type="button" className="flex items-center justify-center">
+              <Info className="h-3 w-3 text-custom-text-300" />
+            </button>
+          </Tooltip>
+        </div>
+        <Controller
+          control={control}
+          name="filters"
+          render={({ field: { onChange } }) => (
+            <WorkspaceLevelWorkItemFiltersHOC
+              entityId={workspaceSlug}
+              entityType={EIssuesStoreType.GLOBAL}
+              filtersToShowByLayout={ISSUE_DISPLAY_FILTERS_BY_PAGE.my_issues.filters}
+              initialWorkItemFilters={initialWorkItemFilters}
+              isTemporary
+              updateFilters={(updatedFilters) => onChange(updatedFilters)}
+              showOnMount
+              workspaceSlug={workspaceSlug}
+            >
+              {({ filter: workspaceExportWorkItemsFilter }) =>
+                workspaceExportWorkItemsFilter && (
+                  <WorkItemFiltersRow filter={workspaceExportWorkItemsFilter} variant="modal" />
+                )
+              }
+            </WorkspaceLevelWorkItemFiltersHOC>
+          )}
+        />
+      </div>
+      <div className="flex items-center justify-between">
         <Button
           variant="primary"
           type="submit"
@@ -197,4 +263,4 @@ export const ExportForm = (props: Props) => {
       </div>
     </form>
   );
-};
+});

apps/web/core/services/project/project-export.service.ts

@@ -1,4 +1,5 @@
 import { API_BASE_URL } from "@plane/constants";
+import type { TWorkItemFilterExpression } from "@plane/types";
 import { APIService } from "@/services/api.service";
 // helpers
 
@@ -12,6 +13,8 @@ export class ProjectExportService extends APIService {
     data: {
       provider: string;
       project: string[];
+      multiple?: boolean;
+      rich_filters?: TWorkItemFilterExpression;
     }
   ): Promise<any> {
     return this.post(`/api/workspaces/${workspaceSlug}/export-issues/`, data)

packages/i18n/src/locales/cs/translations.ts

@@ -1599,6 +1599,7 @@ export default {
         exporting: "Exportování",
         previous_exports: "Předchozí exporty",
         export_separate_files: "Exportovat data do samostatných souborů",
+        filters_info: "Použijte filtry k exportu konkrétních pracovních položek podle vašich kritérií.",
         modal: {
           title: "Exportovat do",
           toasts: {

packages/i18n/src/locales/de/translations.ts

@@ -1618,6 +1618,8 @@ export default {
         exporting: "Wird exportiert",
         previous_exports: "Bisherige Exporte",
         export_separate_files: "Daten in separaten Dateien exportieren",
+        filters_info:
+          "Wenden Sie Filter an, um bestimmte Arbeitselemente basierend auf Ihren Kriterien zu exportieren.",
         modal: {
           title: "Exportieren nach",
           toasts: {

packages/i18n/src/locales/en/translations.ts

@@ -1463,6 +1463,7 @@ export default {
         export_separate_files: "Export the data into separate files",
         exporting_projects: "Exporting project",
         format: "Format",
+        filters_info: "Apply filters to export specific work items based on your criteria.",
         modal: {
           title: "Export to",
           toasts: {

packages/i18n/src/locales/es/translations.ts

@@ -1624,6 +1624,7 @@ export default {
         exporting: "Exportando",
         previous_exports: "Exportaciones anteriores",
         export_separate_files: "Exportar los datos en archivos separados",
+        filters_info: "Aplica filtros para exportar elementos de trabajo específicos según tus criterios.",
         modal: {
           title: "Exportar a",
           toasts: {

packages/i18n/src/locales/fr/translations.ts

@@ -1622,6 +1622,7 @@ export default {
         exporting: "Exportation",
         previous_exports: "Exportations précédentes",
         export_separate_files: "Exporter les données dans des fichiers séparés",
+        filters_info: "Appliquez des filtres pour exporter des éléments de travail spécifiques selon vos critères.",
         modal: {
           title: "Exporter vers",
           toasts: {

packages/i18n/src/locales/id/translations.ts

@@ -1610,6 +1610,7 @@ export default {
         exporting: "Mengeskpor",
         previous_exports: "Ekspor sebelumnya",
         export_separate_files: "Ekspor data ke file terpisah",
+        filters_info: "Terapkan filter untuk mengekspor item kerja tertentu berdasarkan kriteria Anda.",
         modal: {
           title: "Ekspor ke",
           toasts: {

packages/i18n/src/locales/it/translations.ts

@@ -1614,6 +1614,7 @@ export default {
         exporting: "Esportazione in corso",
         previous_exports: "Esportazioni precedenti",
         export_separate_files: "Esporta i dati in file separati",
+        filters_info: "Applica filtri per esportare elementi di lavoro specifici in base ai tuoi criteri.",
         modal: {
           title: "Esporta in",
           toasts: {

packages/i18n/src/locales/ja/translations.ts

@@ -1600,6 +1600,7 @@ export default {
         exporting: "エクスポート中",
         previous_exports: "過去のエクスポート",
         export_separate_files: "データを個別のファイルにエクスポート",
+        filters_info: "フィルターを適用して、条件に基づいて特定の作業項目をエクスポートします。",
         modal: {
           title: "エクスポート先",
           toasts: {

packages/i18n/src/locales/ko/translations.ts

@@ -1593,6 +1593,7 @@ export default {
         exporting: "내보내기 중",
         previous_exports: "이전 내보내기",
         export_separate_files: "데이터를 별도의 파일로 내보내기",
+        filters_info: "기준에 따라 특정 작업 항목을 내보내려면 필터를 적용하세요.",
         modal: {
           title: "내보내기",
           toasts: {

packages/i18n/src/locales/pl/translations.ts

@@ -1602,6 +1602,7 @@ export default {
         exporting: "Eksportowanie",
         previous_exports: "Poprzednie eksporty",
         export_separate_files: "Eksportuj dane do oddzielnych plików",
+        filters_info: "Zastosuj filtry, aby wyeksportować określone elementy robocze według Twoich kryteriów.",
         modal: {
           title: "Eksport do",
           toasts: {

packages/i18n/src/locales/pt-BR/translations.ts

@@ -1622,6 +1622,7 @@ export default {
         exporting: "Exportando",
         previous_exports: "Exportações anteriores",
         export_separate_files: "Exporte os dados em arquivos separados",
+        filters_info: "Aplique filtros para exportar itens de trabalho específicos com base em seus critérios.",
         modal: {
           title: "Exportar para",
           toasts: {

packages/i18n/src/locales/ro/translations.ts

@@ -1614,6 +1614,7 @@ export default {
         exporting: "Se exportă",
         previous_exports: "Exporturi anterioare",
         export_separate_files: "Exportă datele în fișiere separate",
+        filters_info: "Aplică filtre pentru a exporta elemente de lucru specifice în funcție de criteriile tale.",
         modal: {
           title: "Exportă în",
           toasts: {

packages/i18n/src/locales/ru/translations.ts

@@ -1604,6 +1604,7 @@ export default {
         exporting: "Экспортируется",
         previous_exports: "Предыдущие экспорты",
         export_separate_files: "Экспорт в отдельные файлы",
+        filters_info: "Примените фильтры для экспорта конкретных рабочих элементов по вашим критериям.",
         modal: {
           title: "Экспорт в",
           toasts: {

packages/i18n/src/locales/sk/translations.ts

@@ -1601,6 +1601,7 @@ export default {
         exporting: "Exportovanie",
         previous_exports: "Predchádzajúce exporty",
         export_separate_files: "Exportovať dáta do samostatných súborov",
+        filters_info: "Použite filtre na export konkrétnych pracovných položiek podľa vašich kritérií.",
         modal: {
           title: "Exportovať do",
           toasts: {

packages/i18n/src/locales/tr-TR/translations.ts

@@ -1609,6 +1609,7 @@ export default {
         exporting: "Dışa aktarılıyor",
         previous_exports: "Önceki dışa aktarımlar",
         export_separate_files: "Verileri ayrı dosyalara aktar",
+        filters_info: "Kriterlerinize göre belirli iş öğelerini dışa aktarmak için filtreler uygulayın.",
         modal: {
           title: "Şuraya aktar",
           toasts: {

packages/i18n/src/locales/ua/translations.ts

@@ -1605,6 +1605,7 @@ export default {
         exporting: "Експортування",
         previous_exports: "Попередні експорти",
         export_separate_files: "Експортувати дані в окремі файли",
+        filters_info: "Застосуйте фільтри для експорту конкретних робочих елементів за вашими критеріями.",
         modal: {
           title: "Експортувати в",
           toasts: {

packages/i18n/src/locales/vi-VN/translations.ts

@@ -1610,6 +1610,7 @@ export default {
         exporting: "Đang xuất",
         previous_exports: "Xuất trước đây",
         export_separate_files: "Xuất dữ liệu thành các tệp riêng biệt",
+        filters_info: "Áp dụng bộ lọc để xuất các mục công việc cụ thể dựa trên tiêu chí của bạn.",
         modal: {
           title: "Xuất đến",
           toasts: {

packages/i18n/src/locales/zh-CN/translations.ts

@@ -1581,6 +1581,7 @@ export default {
         exporting: "导出中",
         previous_exports: "以前的导出",
         export_separate_files: "将数据导出为单独的文件",
+        filters_info: "应用筛选器以根据您的条件导出特定工作项。",
         modal: {
           title: "导出到",
           toasts: {

packages/i18n/src/locales/zh-TW/translations.ts

@@ -1582,6 +1582,7 @@ export default {
         exporting: "匯出中",
         previous_exports: "先前的匯出",
         export_separate_files: "將資料匯出為個別檔案",
+        filters_info: "應用篩選器以根據您的條件匯出特定工作項。",
         modal: {
           title: "匯出至",
           toasts: {