Added suffixes to integrations

frontend/src/hooks/api/integrations/queries.tsx

@@ -40,7 +40,8 @@ export const useCreateIntegration = () => {
       owner,
       path,
       region,
-      secretPath
+      secretPath,
+      secretSuffix
     }: {
       integrationAuthId: string;
       isActive: boolean;
@@ -55,6 +56,7 @@ export const useCreateIntegration = () => {
       owner: string | null;
       path: string | null;
       region: string | null;
+      secretSuffix: string;
     }) => {
       const { data: { integration } } = await apiRequest.post("/api/v1/integration", {
         integrationAuthId,
@@ -69,7 +71,8 @@ export const useCreateIntegration = () => {
         owner,
         path,
         region,
-        secretPath
+        secretPath,
+        secretSuffix
       });
 
       return integration;

frontend/src/hooks/api/integrations/types.ts

@@ -27,6 +27,7 @@ export type TIntegration = {
   integration: string;
   integrationAuth: string;
   secretPath: string;
+  secretSuffix: string;
   createdAt: string;
   updatedAt: string;
   __v: number;

frontend/src/pages/integrations/checkly/create.tsx

@@ -35,6 +35,7 @@ export default function ChecklyCreateIntegrationPage() {
 
   const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
   const [secretPath, setSecretPath] = useState("/");
+  const [secretSuffix, setSecretSuffix] = useState("");
 
   const [targetApp, setTargetApp] = useState("");
   const [targetAppId, setTargetAppId] = useState("");
@@ -78,7 +79,8 @@ export default function ChecklyCreateIntegrationPage() {
         owner: null,
         path: null,
         region: null,
-        secretPath
+        secretPath,
+        secretSuffix
       });
 
       setIsLoading(false);
@@ -148,6 +150,13 @@ export default function ChecklyCreateIntegrationPage() {
             )}
           </Select>
         </FormControl>
+        <FormControl label="Append the Secret Name with..." className="mt-4 px-6">
+          <Input
+            value={secretSuffix}
+            onChange={(evt) => setSecretSuffix(evt.target.value)}
+            placeholder="Provide a suffix for secret names, default is no suffix"
+          />
+        </FormControl>
         <Button
           onClick={handleButtonClick}
           color="mineshaft"

frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx

@@ -115,6 +115,14 @@ export const IntegrationsSection = ({
                     </div>
                   </div>
                 )}
+                {(integration.integration === "checkly") && (
+                  <div className="ml-2 flex flex-col">
+                    <FormLabel label="Secret Suffix" />
+                    <div className="rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
+                      {integration.secretSuffix || "-"}
+                    </div>
+                  </div>
+                )}
               </div>
               <div className="flex cursor-default items-center">
                 <div className="ml-2 opacity-80 duration-200 hover:opacity-100">