Update integration section for github repo, org and env

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

@@ -11,31 +11,23 @@ export type TCloudIntegration = {
 
 export type TIntegration = {
   id: string;
-  projectId: string;
-  envId: string;
-  environment: { slug: string; name: string; id: string };
   isActive: boolean;
-  url: any;
+  url?: string;
-  app: string;
+  app?: string;
-  appId: string;
+  appId?: string;
-  targetEnvironment: string;
+  targetEnvironment?: string;
-  targetEnvironmentId: string;
+  targetEnvironmentId?: string;
-  targetService: string;
+  targetService?: string;
-  targetServiceId: string;
+  targetServiceId?: string;
-  owner: string;
+  owner?: string;
-  path: string;
+  path?: string;
-  region: string;
+  region?: string;
+  scope?: string;
   integration: string;
-  integrationAuth: string;
+  metadata?: Record<string, any>;
+  integrationAuthId: string;
+  envId: string;
   secretPath: string;
   createdAt: string;
   updatedAt: string;
-  __v: number;
+};
-  metadata?: {
-    secretSuffix?: string;
-    scope: string;
-    org: string;
-    project: string;
-    environment: string;
-  };
-};

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

@@ -63,7 +63,7 @@ const schema = yup.object({
 
   repoIds: yup.mixed().when("scope", {
     is: "github-repo",
-    then: yup.array(yup.string().required()).min(1, "Select atleast one repositories")
+    then: yup.array(yup.string().required()).min(1, "Select at least one repositories")
   }),
 
   repoName: yup.mixed().when("scope", {
@@ -177,6 +177,7 @@ export default function GitHubCreateIntegrationPage() {
             secretPath: data.secretPath,
             sourceEnvironment: data.selectedSourceEnvironment,
             scope: data.scope,
+            owner: integrationAuthOrgs?.find(e=>e.orgId === data.orgId)?.name, // repo owner
             targetServiceId: data.orgId, // github org id
             metadata: {
               secretSuffix: data.secretSuffix
@@ -588,7 +589,7 @@ export default function GitHubCreateIntegrationPage() {
         />
       ) : (
         <div className="flex h-max max-w-md flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-6 text-center text-mineshaft-200">
-          <FontAwesomeIcon icon={faBugs} className="inlineli my-2 text-6xl" />
+          <FontAwesomeIcon icon={faBugs} className="inline li my-2 text-6xl" />
           <p>
             Something went wrong. Please contact{" "}
             <a

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

@@ -9,11 +9,8 @@ import {
   AlertDescription,
   DeleteActionModal,
   EmptyState,
-  FormControl,
   FormLabel,
   IconButton,
-  Select,
-  SelectItem,
   Skeleton,
   Tooltip
 } from "@app/components/v2";
@@ -22,7 +19,7 @@ import { usePopUp } from "@app/hooks";
 import { TIntegration } from "@app/hooks/api/types";
 
 type Props = {
-  environments: Array<{ name: string; slug: string }>;
+  environments: Array<{ name: string; slug: string; id: string }>;
   integrations?: TIntegration[];
   isLoading?: boolean;
   onIntegrationDelete: (integration: TIntegration, cb: () => void) => void;
@@ -84,25 +81,11 @@ export const IntegrationsSection = ({
               key={`integration-${integration?.id.toString()}`}
             >
               <div className="flex">
-                <div>
+                <div className="ml-2 flex flex-col">
-                  <FormControl label="Environment">
+                  <FormLabel label="Environment" />
-                    <Select
+                  <div className="rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
-                      value={integration.environment.slug}
+                    {environments.find((e) => e.id === integration.envId)?.name || "-"}
-                      isDisabled={integration.isActive}
+                  </div>
-                      className="min-w-[8rem] border border-mineshaft-700"
-                    >
-                      {environments.map((environment) => {
-                        return (
-                          <SelectItem
-                            value={environment.slug}
-                            key={`environment-${environment.slug}`}
-                          >
-                            {environment.name}
-                          </SelectItem>
-                        );
-                      })}
-                    </Select>
-                  </FormControl>
                 </div>
                 <div className="ml-2 flex flex-col">
                   <FormLabel label="Secret Path" />
@@ -142,11 +125,21 @@ export const IntegrationsSection = ({
                   </div>
                 )}
                 <div className="ml-2 flex flex-col">
-                  <FormLabel label={integration?.metadata?.scope || "App"} />
+                  <FormLabel
-                  <div className="min-w-[8rem] rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
+                    label={
-                    {integration.integration === "hashicorp-vault"
+                      (integration.integration === "qovery" && integration?.scope) ||
-                      ? `${integration.app} - path: ${integration.path}`
+                      (integration?.scope === "github-org" && "Organization") ||
-                      : integration.app}
+                      (["github-repo", "github-env"].includes(integration?.scope as string) && "Repository") ||
+                      "App"
+                    }
+                  />
+                  <div className="min-w-[8rem] rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200 max-w-[12rem] text-ellipsis whitespace-nowrap overflow-clip">
+                    {
+                      (integration.integration === "hashicorp-vault" && `${integration.app} - path: ${integration.path}`) ||
+                      (integration.scope === "github-org" && `${integration.owner}` ) ||
+                      (integration.scope?.startsWith("github-") && `${integration.owner}/${integration.app}` ) ||
+                      integration.app
+                    }
                   </div>
                 </div>
                 {(integration.integration === "vercel" ||
@@ -154,11 +147,12 @@ export const IntegrationsSection = ({
                   integration.integration === "railway" ||
                   integration.integration === "gitlab" ||
                   integration.integration === "teamcity" ||
-                  integration.integration === "bitbucket") && (
+                  integration.integration === "bitbucket" ||
+                  (integration.integration === "github" && integration.scope === "github-env")) && (
                   <div className="ml-4 flex flex-col">
                     <FormLabel label="Target Environment" />
-                    <div className="rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
+                    <div className="rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200 text-ellipsis whitespace-nowrap overflow-clip">
-                      {integration.targetEnvironment}
+                      {integration.targetEnvironment || integration.targetEnvironmentId}
                     </div>
                   </div>
                 )}