Fix merge conflicts

frontend/src/views/IntegrationsPage/IntegrationPage.utils.tsx

@@ -35,7 +35,7 @@ export const redirectForProviderAuth = (integrationOption: TCloudIntegration) =>
     // generate CSRF token for OAuth2 code-token exchange integrations
     const state = crypto.randomBytes(16).toString("hex");
     localStorage.setItem("latestCSRFToken", state);
-
+    
     let link = "";
     switch (integrationOption.slug) {
       case "azure-key-vault":
@@ -95,6 +95,18 @@ export const redirectForProviderAuth = (integrationOption: TCloudIntegration) =>
       case "cloudflare-pages":
         link = `${window.location.origin}/integrations/cloudflare-pages/authorize`;
         break;
+      case "bitbucket":
+        link = `https://bitbucket.org/site/oauth2/authorize?client_id=${integrationOption.clientId}&response_type=code&redirect_uri=${window.location.origin}/integrations/bitbucket/oauth2/callback&state=${state}`;
+        break;
+      case "codefresh":
+        link = `${window.location.origin}/integrations/codefresh/authorize`;
+        break;
+      case "digital-ocean-app-platform":
+        link = `${window.location.origin}/integrations/digital-ocean-app-platform/authorize`;
+        break;
+      case "cloud-66":
+        link = `${window.location.origin}/integrations/cloud-66/authorize`;
+        break;
       default:
         break;
     }

frontend/src/views/IntegrationsPage/IntegrationsPage.tsx

@@ -3,7 +3,6 @@ import { useTranslation } from "react-i18next";
 import { useRouter } from "next/router";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import NavHeader from "@app/components/navigation/NavHeader";
 import { Button, Modal, ModalContent } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import { usePopUp } from "@app/hooks";
@@ -49,6 +48,7 @@ export const IntegrationsPage = ({ frameworkIntegrations }: Props) => {
 
   const { data: cloudIntegrations, isLoading: isCloudIntegrationsLoading } =
     useGetCloudIntegrations();
+
   const { data: integrationAuths, isLoading: isIntegrationAuthLoading } =
     useGetWorkspaceAuthorizations(
       workspaceId,
@@ -177,10 +177,7 @@ export const IntegrationsPage = ({ frameworkIntegrations }: Props) => {
   };
 
   return (
-    <div className="container mx-auto max-w-7xl px-8 pb-12 text-white">
-      <div className="ml-4">
-        <NavHeader pageName={t("integrations.title")} isProjectRelated />
-      </div>
+    <div className="container mx-auto max-w-7xl pb-12 text-white">
       <IntegrationsSection
         isLoading={isIntegrationLoading}
         integrations={integrations}

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

@@ -31,22 +31,21 @@ export const CloudIntegrationSection = ({
 
   const isEmpty = !isLoading && !cloudIntegrations?.length;
 
+  const sortedCloudIntegrations = cloudIntegrations.sort((a, b) => a.name.localeCompare(b.name));
+  
   return (
     <div>
       <div className="m-4 mt-7 flex max-w-5xl flex-col items-start justify-between px-2 text-xl">
         <h1 className="text-3xl font-semibold">{t("integrations.cloud-integrations")}</h1>
         <p className="text-base text-gray-400">{t("integrations.click-to-start")}</p>
       </div>
-      <div
-        className="mx-6 grid grid-flow-dense gap-4"
-        style={{ gridTemplateColumns: "repeat(auto-fill, minmax(256px, 1fr))" }}
-      >
+      <div className="mx-6 grid grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4">
         {isLoading &&
           Array.from({ length: 12 }).map((_, index) => (
             <Skeleton className="h-32" key={`cloud-integration-skeleton-${index + 1}`} />
           ))}
         {!isLoading &&
-          cloudIntegrations?.map((cloudIntegration) => (
+          sortedCloudIntegrations?.map((cloudIntegration) => (
             <div
               onKeyDown={() => null}
               role="button"
@@ -68,18 +67,9 @@ export const CloudIntegrationSection = ({
                 width={70}
                 alt="integration logo"
               />
-              {cloudIntegration.name.split(" ").length > 2 ? (
-                <div className="ml-4 max-w-xs text-3xl font-semibold text-gray-300 duration-200 group-hover:text-gray-200">
-                  <div>{cloudIntegration.name.split(" ")[0]}</div>
-                  <div className="text-base">
-                    {cloudIntegration.name.split(" ")[1]} {cloudIntegration.name.split(" ")[2]}
-                  </div>
-                </div>
-              ) : (
-                <div className="ml-4 max-w-xs text-xl font-semibold text-gray-300 duration-200 group-hover:text-gray-200">
-                  {cloudIntegration.name}
-                </div>
-              )}
+              <div className="ml-4 max-w-xs text-xl font-semibold text-gray-300 duration-200 group-hover:text-gray-200">
+                {cloudIntegration.name}
+              </div>
               {cloudIntegration.isAvailable &&
                 Boolean(integrationAuths?.[cloudIntegration.slug]) && (
                   <div className="absolute top-0 right-0 z-40 h-full">

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

@@ -12,6 +12,8 @@ type Props = {
 export const FrameworkIntegrationSection = ({ frameworks }: Props) => {
   const { t } = useTranslation();
 
+  const sortedFrameworks = frameworks.sort((a, b) => a.name.localeCompare(b.name));
+
   return (
     <>
       <div className="mx-4 mt-12 mb-4 flex flex-col items-start justify-between px-2 text-xl">
@@ -22,7 +24,7 @@ export const FrameworkIntegrationSection = ({ frameworks }: Props) => {
         className="mx-6 mt-4 grid grid-flow-dense gap-3"
         style={{ gridTemplateColumns: "repeat(auto-fill, minmax(120px, 1fr))" }}
       >
-        {frameworks.map((framework) => (
+        {sortedFrameworks.map((framework) => (
           <a
             key={`framework-integration-${framework.slug}`}
             href={framework.docsLink}

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

@@ -32,7 +32,6 @@ export const IntegrationsSection = ({
   const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
     "deleteConfirmation"
   ] as const);
-
   return (
     <div className="mb-8">
       <div className="mx-4 mb-4 mt-6 flex flex-col items-start justify-between px-2 text-xl">
@@ -45,10 +44,12 @@ export const IntegrationsSection = ({
         </div>
       )}
       {!isLoading && !integrations.length && (
-        <EmptyState
-          className="mx-6 rounded-md border border-mineshaft-700 pt-8 pb-4"
-          title="No integrations found. Click on one of the below providers to sync secrets."
-        />
+        <div className="mx-6">
+          <EmptyState
+            className="rounded-md border border-mineshaft-700 pt-8 pb-4"
+            title="No integrations found. Click on one of the below providers to sync secrets."
+          />
+        </div>
       )}
       {!isLoading && (
         <div className="flex flex-col space-y-4 p-6 pt-0">
@@ -104,7 +105,8 @@ export const IntegrationsSection = ({
                 {(integration.integration === "vercel" ||
                   integration.integration === "netlify" ||
                   integration.integration === "railway" ||
-                  integration.integration === "gitlab") && (
+                  integration.integration === "gitlab" ||
+                  integration.integration === "bitbucket") && (
                   <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">