Added new environment labels components to schedules pages

Author: matt-aitken

apps/webapp/app/components/environments/EnvironmentLabel.tsx

@@ -54,7 +54,7 @@ export function EnvironmentLabels({
   const otherEnvironments = environments.filter((env) => env.type !== "DEVELOPMENT");
 
   return (
-    <div className={cn("flex gap-2", className)}>
+    <div className={cn("flex items-baseline gap-2", className)}>
       {firstDevEnvironment && (
         <EnvironmentLabel
           environment={firstDevEnvironment}

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx

@@ -11,7 +11,7 @@ import { InitCommandV3, TriggerDevStepV3, TriggerLoginStepV3 } from "~/component
 import { StepContentContainer } from "~/components/StepContentContainer";
 import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
 import { InlineCode } from "~/components/code/InlineCode";
-import { EnvironmentLabel, EnvironmentLabels } from "~/components/environments/EnvironmentLabel";
+import { EnvironmentLabels } from "~/components/environments/EnvironmentLabel";
 import { MainCenteredContainer, PageBody, PageContainer } from "~/components/layout/AppLayout";
 import { Button } from "~/components/primitives/Buttons";
 import { Callout } from "~/components/primitives/Callout";

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules.$scheduleParam/route.tsx

@@ -8,7 +8,7 @@ import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { ExitIcon } from "~/assets/icons/ExitIcon";
 import { InlineCode } from "~/components/code/InlineCode";
-import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
+import { EnvironmentLabel, EnvironmentLabels } from "~/components/environments/EnvironmentLabel";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { DateTime } from "~/components/primitives/DateTime";
 import {
@@ -211,16 +211,7 @@ export default function Page() {
                 </div>
               </Property>
               <Property label="Environments">
-                <div className="flex flex-wrap gap-1">
-                  {schedule.environments.map((env) => (
-                    <EnvironmentLabel
-                      key={env.id}
-                      size="small"
-                      environment={env}
-                      userName={env.userName}
-                    />
-                  ))}
-                </div>
+                <EnvironmentLabels size="small" environments={schedule.environments} />
               </Property>
               <Property label="External ID">
                 {schedule.externalId ? schedule.externalId : "–"}

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules/route.tsx

@@ -6,7 +6,7 @@ import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { BlankstateInstructions } from "~/components/BlankstateInstructions";
 import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
 import { InlineCode } from "~/components/code/InlineCode";
-import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
+import { EnvironmentLabel, EnvironmentLabels } from "~/components/environments/EnvironmentLabel";
 import { MainCenteredContainer, PageBody, PageContainer } from "~/components/layout/AppLayout";
 import { LinkButton } from "~/components/primitives/Buttons";
 import { DateTime } from "~/components/primitives/DateTime";
@@ -281,15 +281,7 @@ function SchedulesTable({
                   {schedule.lastRun ? <DateTime date={schedule.lastRun} timeZone="utc" /> : "–"}
                 </TableCell>
                 <TableCell to={path} className={cellClass}>
-                  <div className="flex gap-1">
-                    {schedule.environments.map((environment) => (
-                      <EnvironmentLabel
-                        key={environment.id}
-                        environment={environment}
-                        userName={environment.userName}
-                      />
-                    ))}
-                  </div>
+                  <EnvironmentLabels environments={schedule.environments} size="small" />
                 </TableCell>
                 <TableCell to={path}>
                   <EnabledStatus enabled={schedule.active} />