[WEB-1966] fix: export button handled based on role (#5198)

* fix: export button handled based on role

* fix: formatting

* fix: import optimization

* fix: border fix for cycles page

* fix: import optimization

web/core/components/cycles/active-cycle/root.tsx

@@ -57,7 +57,7 @@ export const ActiveCycleRoot: React.FC<IActiveCycleDetails> = observer((props) =
               {!currentProjectActiveCycle ? (
                 <EmptyState type={EmptyStateType.PROJECT_CYCLE_ACTIVE} size="sm" />
               ) : (
-                <div className="flex flex-col bg-custom-background-90">
+                <div className="flex flex-col bg-custom-background-90 border-b border-custom-border-200">
                   {currentProjectActiveCycleId && (
                     <CyclesListItem
                       key={currentProjectActiveCycleId}

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

@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useState } from "react";
+import intersection from "lodash/intersection";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { Dialog, Transition } from "@headlessui/react";
@@ -9,11 +10,10 @@ import { IUser, IImporterService } from "@plane/types";
 // ui
 import { Button, CustomSearchSelect, TOAST_TYPE, setToast } from "@plane/ui";
 // hooks
-import { useProject } from "@/hooks/store";
+import { useProject, useUser } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 // services
 import { ProjectExportService } from "@/services/project";
-
 type Props = {
   isOpen: boolean;
   handleClose: () => void;
@@ -35,8 +35,13 @@ export const Exporter: React.FC<Props> = observer((props) => {
   const { workspaceSlug } = useParams();
   // store hooks
   const { workspaceProjectIds, getProjectById } = useProject();
+  const { projectsWithCreatePermissions } = useUser();
 
-  const options = workspaceProjectIds?.map((projectId) => {
+  const wsProjectIdsWithCreatePermisisons = projectsWithCreatePermissions
+    ? intersection(workspaceProjectIds, Object.keys(projectsWithCreatePermissions))
+    : [];
+
+  const options = wsProjectIdsWithCreatePermisisons?.map((projectId) => {
     const projectDetails = getProjectById(projectId);
 
     return {

web/core/components/exporter/guide.tsx

@@ -17,7 +17,7 @@ import { ImportExportSettingsLoader } from "@/components/ui";
 // constants
 import { EmptyStateType } from "@/constants/empty-state";
 import { EXPORT_SERVICES_LIST } from "@/constants/fetch-keys";
-import { EXPORTERS_LIST } from "@/constants/workspace";
+import { EUserWorkspaceRoles, EXPORTERS_LIST } from "@/constants/workspace";
 // hooks
 import { useProject, useUser } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
@@ -37,7 +37,11 @@ const IntegrationGuide = observer(() => {
   const searchParams = useSearchParams();
   const provider = searchParams.get("provider");
   // store hooks
-  const { data: currentUser } = useUser();
+  const {
+    data: currentUser,
+    canPerformAnyCreateAction,
+    membership: { currentWorkspaceRole },
+  } = useUser();
   const { workspaceProjectIds } = useProject();
 
   const { data: exporterServices } = useSWR(
@@ -52,6 +56,7 @@ const IntegrationGuide = observer(() => {
   };
 
   const hasProjects = workspaceProjectIds && workspaceProjectIds.length > 0;
+  const isAdmin = currentWorkspaceRole === EUserWorkspaceRoles.ADMIN;
 
   return (
     <>
@@ -76,7 +81,11 @@ const IntegrationGuide = observer(() => {
                   <div className="flex-shrink-0">
                     <Link href={`/${workspaceSlug}/settings/exports?provider=${service.provider}`}>
                       <span>
-                        <Button variant="primary" className="capitalize" disabled={!hasProjects}>
+                        <Button
+                          variant="primary"
+                          className="capitalize"
+                          disabled={!isAdmin && (!hasProjects || !canPerformAnyCreateAction)}
+                        >
                           {service.type}
                         </Button>
                       </span>