Merge branch 'main' into ENG-3506

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/ChecklySyncFields.tsx

@@ -5,14 +5,15 @@ import { SecretSyncConnectionField } from "@app/components/secret-syncs/forms/Se
 import { FilterableSelect, FormControl } from "@app/components/v2";
 import {
   TChecklyAccount,
-  useChecklyConnectionListAccounts
+  useChecklyConnectionListAccounts,
+  useChecklyConnectionListGroups
 } from "@app/hooks/api/appConnections/checkly";
 import { SecretSync } from "@app/hooks/api/secretSyncs";
 
 import { TSecretSyncForm } from "../schemas";
 
 export const ChecklySyncFields = () => {
-  const { control, setValue } = useFormContext<
+  const { control, setValue, watch } = useFormContext<
     TSecretSyncForm & { destination: SecretSync.Checkly }
   >();
 
@@ -25,12 +26,24 @@ export const ChecklySyncFields = () => {
     }
   );
 
+  const accountId = watch("destinationConfig.accountId");
+
+  const { data: groups = [], isPending: isGroupsLoading } = useChecklyConnectionListGroups(
+    connectionId,
+    accountId,
+    {
+      enabled: Boolean(connectionId && accountId)
+    }
+  );
+
   return (
     <>
       <SecretSyncConnectionField
         onChange={() => {
           setValue("destinationConfig.accountId", "");
           setValue("destinationConfig.accountName", "");
+          setValue("destinationConfig.groupId", undefined);
+          setValue("destinationConfig.groupName", undefined);
         }}
       />
       <Controller
@@ -60,6 +73,37 @@ export const ChecklySyncFields = () => {
           </FormControl>
         )}
       />
+
+      <Controller
+        name="destinationConfig.groupId"
+        control={control}
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl
+            isError={Boolean(error)}
+            errorText={error?.message}
+            label="Select a group"
+            isOptional
+            helperText="If provided, secrets will be scoped to a check group instead"
+            tooltipClassName="max-w-md"
+          >
+            <FilterableSelect
+              isLoading={isGroupsLoading && Boolean(connectionId)}
+              isDisabled={!connectionId}
+              isClearable
+              value={groups.find((p) => p.id === value) ?? null}
+              onChange={(option) => {
+                const v = option as SingleValue<TChecklyAccount>;
+                onChange(v?.id ?? null);
+                setValue("destinationConfig.groupName", v?.name ?? undefined);
+              }}
+              options={groups}
+              placeholder="Select a group..."
+              getOptionLabel={(option) => option.name}
+              getOptionValue={(option) => option.id}
+            />
+          </FormControl>
+        )}
+      />
     </>
   );
 };

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/ChecklySyncReviewFields.tsx

@@ -6,7 +6,16 @@ import { SecretSync } from "@app/hooks/api/secretSyncs";
 
 export const ChecklySyncReviewFields = () => {
   const { watch } = useFormContext<TSecretSyncForm & { destination: SecretSync.Checkly }>();
-  const accountName = watch("destinationConfig.accountName");
+  const config = watch("destinationConfig");
 
-  return <GenericFieldLabel label="Account">{accountName}</GenericFieldLabel>;
+  return (
+    <>
+      <GenericFieldLabel label="Account">
+        {config.accountName ?? config.accountId}
+      </GenericFieldLabel>
+      {config.groupId && (
+        <GenericFieldLabel label="Group">{config.groupName ?? config.groupId}</GenericFieldLabel>
+      )}
+    </>
+  );
 };

frontend/src/components/secret-syncs/forms/schemas/checkly-sync-destination-schema.ts

@@ -8,7 +8,15 @@ export const ChecklySyncDestinationSchema = BaseSecretSyncSchema().merge(
     destination: z.literal(SecretSync.Checkly),
     destinationConfig: z.object({
       accountId: z.string(),
-      accountName: z.string()
+      accountName: z.string(),
+      groupId: z
+        .string()
+        .nullish()
+        .transform((val) => val || undefined),
+      groupName: z
+        .string()
+        .nullish()
+        .transform((val) => val || undefined)
     })
   })
 );

frontend/src/components/v2/DatePicker/DatePicker.tsx

@@ -98,7 +98,7 @@ export const DatePicker = ({
         >
           {value
             ? formatDateTime({ timestamp: value, timezone, dateFormat })
-            : "Pick a date and time"}
+            : `Select Date${hideTime ? "" : " and Time"}`}
         </Button>
       </PopoverTrigger>
       <PopoverContent
@@ -122,7 +122,8 @@ export const DatePicker = ({
               root: `text-mineshaft-300  ${defaultClassNames}`,
               [UI.DayButton]: "p-3 rounded hover:text-mineshaft-100",
               [UI.Weekday]: "px-3 pt-3",
-              [UI.Chevron]: "fill-mineshaft-300"
+              [UI.Chevron]: "fill-mineshaft-300/70 hover:fill-mineshaft-300",
+              disabled: "text-mineshaft-400 pointer-events-none"
             }}
           />
         </div>