From 3dc2f0cfffc06f64ebcda3db3b6c3e21e674a3b2 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Wed, 12 Jul 2023 15:06:52 +0100
Subject: [PATCH] Scheduled Triggers table

---
 .../route.tsx                                 | 54 +++++++++++--------
 .../route.tsx                                 |  2 +-
 2 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers.scheduled/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers.scheduled/route.tsx
index a45414da0..d8a60de4b 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers.scheduled/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers.scheduled/route.tsx
@@ -1,3 +1,4 @@
+import { NoSymbolIcon } from "@heroicons/react/20/solid";
 import { CheckCircleIcon, XCircleIcon } from "@heroicons/react/24/solid";
 import type { LoaderArgs } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
@@ -12,21 +13,19 @@ import {
   TableBlankRow,
   TableBody,
   TableCell,
-  TableCellChevron,
   TableHeader,
   TableHeaderCell,
   TableRow,
 } from "~/components/primitives/Table";
-import { SimpleTooltip } from "~/components/primitives/Tooltip";
+import { TextLink } from "~/components/primitives/TextLink";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { ScheduledTriggersPresenter } from "~/presenters/ScheduledTriggersPresenter.server";
 import { requireUser } from "~/services/session.server";
-import { cn } from "~/utils/cn";
 import { Handle } from "~/utils/handle";
 import {
   ProjectParamSchema,
-  externalTriggerPath,
+  docsPath,
   trimTrailingSlash,
 } from "~/utils/pathBuilder";
 
@@ -70,21 +69,18 @@ export default function Integrations() {
           <TableRow>
             <TableHeaderCell>ID</TableHeaderCell>
             <TableHeaderCell>Schedule</TableHeaderCell>
+            <TableHeaderCell>Environment</TableHeaderCell>
+            <TableHeaderCell>Active</TableHeaderCell>
             <TableHeaderCell>Dynamic</TableHeaderCell>
             <TableHeaderCell>Last run</TableHeaderCell>
             <TableHeaderCell>Next run</TableHeaderCell>
-            <TableHeaderCell>Environment</TableHeaderCell>
-            <TableHeaderCell>Active</TableHeaderCell>
           </TableRow>
         </TableHeader>
         <TableBody>
           {scheduled.length > 0 ? (
             scheduled.map((t) => {
               return (
-                <TableRow
-                  key={t.id}
-                  className={cn(!t.active && "bg-rose-500/30")}
-                >
+                <TableRow key={t.id}>
                   <TableCell>{t.key}</TableCell>
                   <TableCell>
                     <div className="flex items-center gap-1">
@@ -112,6 +108,32 @@ export default function Integrations() {
                       )}
                     </div>
                   </TableCell>
+                  <TableCell>
+                    <span className="flex">
+                      <EnvironmentLabel environment={t.environment} />
+                    </span>
+                  </TableCell>
+                  <TableCell>
+                    {t.active ? (
+                      <CheckCircleIcon className="h-6 w-6 text-green-500" />
+                    ) : t.environment.type === "DEVELOPMENT" ? (
+                      <span className="flex items-center gap-1">
+                        <NoSymbolIcon className="h-6 w-6 text-dimmed" />
+                        <Paragraph variant="extra-small">
+                          <TextLink
+                            href={docsPath(
+                              "documentation/concepts/triggers/scheduled"
+                            )}
+                            variant="secondary"
+                          >
+                            Won't run in DEV
+                          </TextLink>
+                        </Paragraph>
+                      </span>
+                    ) : (
+                      <XCircleIcon className="h-6 w-6 text-rose-500" />
+                    )}
+                  </TableCell>
                   <TableCell>
                     {t.dynamicTrigger ? (
                       <span className="flex items-center gap-0.5">
@@ -136,18 +158,6 @@ export default function Integrations() {
                       "–"
                     )}
                   </TableCell>
-                  <TableCell>
-                    <span className="flex">
-                      <EnvironmentLabel environment={t.environment} />
-                    </span>
-                  </TableCell>
-                  <TableCell>
-                    {t.active ? (
-                      <CheckCircleIcon className="h-6 w-6 text-green-500" />
-                    ) : (
-                      <XCircleIcon className="h-6 w-6 text-rose-500" />
-                    )}
-                  </TableCell>
                 </TableRow>
               );
             })
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers/route.tsx
index a922f97cd..c1b2bcc87 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers/route.tsx
@@ -41,7 +41,7 @@ export default function Page() {
               to={docsPath("documentation/concepts/triggers")}
               variant="secondary/small"
             >
-              Triggers in detail
+              Triggers Documentation
             </LinkButton>
           </PageButtons>
         </PageTitleRow>