dev-to-prod ui

apps/web/app/(app)/environments/[environmentId]/actions/components/ActionActivityTab.tsx

@@ -7,6 +7,8 @@ import { getFormattedErrorMessage } from "@formbricks/lib/actionClient/helper";
 import { convertDateTimeStringShort } from "@formbricks/lib/time";
 import { capitalizeFirstLetter } from "@formbricks/lib/utils/strings";
 import { TActionClass } from "@formbricks/types/action-classes";
+import { TEnvironment } from "@formbricks/types/environment";
+import { Button } from "@formbricks/ui/components/Button";
 import { ErrorComponent } from "@formbricks/ui/components/ErrorComponent";
 import { Label } from "@formbricks/ui/components/Label";
 import { LoadingSpinner } from "@formbricks/ui/components/LoadingSpinner";
@@ -15,9 +17,11 @@ import { getActiveInactiveSurveysAction } from "../actions";
 interface ActivityTabProps {
   actionClass: TActionClass;
   environmentId: string;
+  environment: TEnvironment;
+  environments: TEnvironment[];
 }
 
-export const ActionActivityTab = ({ actionClass, environmentId }: ActivityTabProps) => {
+export const ActionActivityTab = ({ actionClass, environmentId, environment }: ActivityTabProps) => {
   const t = useTranslations();
   const [activeSurveys, setActiveSurveys] = useState<string[] | undefined>();
   const [inactiveSurveys, setInactiveSurveys] = useState<string[] | undefined>();
@@ -98,9 +102,18 @@ export const ActionActivityTab = ({ actionClass, environmentId }: ActivityTabPro
             <p className="text-sm text-slate-700">{capitalizeFirstLetter(actionClass.type)}</p>
           </div>
         </div>
-        <div>
+        <div className="">
           <Label className="text-xs font-normal text-slate-500">Environment</Label>
-          <p className="text-xs text-slate-700">{actionClass.environmentId}</p>
+          <div className="items-center-center flex gap-2">
+            <p className="text-xs text-slate-700">
+              {environment.type === "development" ? "Development" : "Production"}
+            </p>
+            <Button
+              className="m-0 p-0 text-xs font-medium text-black underline underline-offset-4"
+              variant="minimal">
+              {environment.type === "development" ? "Copy to Production" : "Copy to Development"}
+            </Button>
+          </div>
         </div>
       </div>
     </div>

apps/web/app/(app)/environments/[environmentId]/actions/components/ActionClassesTable.tsx

@@ -3,18 +3,23 @@
 import { useState } from "react";
 import { useMembershipRole } from "@formbricks/lib/membership/hooks/useMembershipRole";
 import { TActionClass } from "@formbricks/types/action-classes";
+import { TEnvironment } from "@formbricks/types/environment";
 import { ErrorComponent } from "@formbricks/ui/components/ErrorComponent";
 import { ActionDetailModal } from "./ActionDetailModal";
 
 interface ActionClassesTableProps {
   environmentId: string;
   actionClasses: TActionClass[];
+  environment: TEnvironment;
+  environments: TEnvironment[];
   children: [JSX.Element, JSX.Element[]];
 }
 
 export const ActionClassesTable = ({
   environmentId,
   actionClasses,
+  environment,
+  environments,
   children: [TableHeading, actionRows],
 }: ActionClassesTableProps) => {
   const [isActionDetailModalOpen, setActionDetailModalOpen] = useState(false);
@@ -52,6 +57,8 @@ export const ActionClassesTable = ({
       {activeActionClass && (
         <ActionDetailModal
           environmentId={environmentId}
+          environment={environment}
+          environments={environments}
           open={isActionDetailModalOpen}
           setOpen={setActionDetailModalOpen}
           actionClasses={actionClasses}

apps/web/app/(app)/environments/[environmentId]/actions/components/ActionDetailModal.tsx

@@ -1,6 +1,7 @@
 import { Code2Icon, MousePointerClickIcon, SparklesIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { TActionClass } from "@formbricks/types/action-classes";
+import { TEnvironment } from "@formbricks/types/environment";
 import { TMembershipRole } from "@formbricks/types/memberships";
 import { ModalWithTabs } from "@formbricks/ui/components/ModalWithTabs";
 import { ActionActivityTab } from "./ActionActivityTab";
@@ -8,6 +9,8 @@ import { ActionSettingsTab } from "./ActionSettingsTab";
 
 interface ActionDetailModalProps {
   environmentId: string;
+  environments: TEnvironment[];
+  environment: TEnvironment;
   open: boolean;
   setOpen: (v: boolean) => void;
   actionClass: TActionClass;
@@ -22,12 +25,21 @@ export const ActionDetailModal = ({
   actionClass,
   actionClasses,
   membershipRole,
+  environment,
+  environments,
 }: ActionDetailModalProps) => {
   const t = useTranslations();
   const tabs = [
     {
       title: t("common.activity"),
-      children: <ActionActivityTab actionClass={actionClass} environmentId={environmentId} />,
+      children: (
+        <ActionActivityTab
+          environments={environments}
+          environment={environment}
+          actionClass={actionClass}
+          environmentId={environmentId}
+        />
+      ),
     },
     {
       title: t("common.settings"),

apps/web/app/(app)/environments/[environmentId]/actions/page.tsx

@@ -42,7 +42,11 @@ const Page = async ({ params }) => {
   return (
     <PageContentWrapper>
       <PageHeader pageTitle={t("common.actions")} cta={renderAddActionButton()} />
-      <ActionClassesTable environmentId={params.environmentId} actionClasses={actionClasses}>
+      <ActionClassesTable
+        environment={environment}
+        environmentId={params.environmentId}
+        environments={environments}
+        actionClasses={actionClasses}>
         <ActionTableHeading />
         {actionClasses.map((actionClass) => (
           <ActionClassDataRow key={actionClass.id} actionClass={actionClass} locale={locale} />