From 2d67c4487d662e025fe669b37b708fb0c1a7d64e Mon Sep 17 00:00:00 2001
From: JulesBelveze <jules.belveze@hotmail.fr>
Date: Mon, 6 Jan 2025 10:59:27 +0100
Subject: [PATCH] [front/components] - refactor: adjust
 ConnectorPermissionsModal layout using SheetContainer

 - Wrap options and content tree in new SheetContainer component for improved structure
 - Simplify button and header layout within modal for enhanced visual coherence
 - Remove redundant div elements to streamline modal markup
---
 .../components/ConnectorPermissionsModal.tsx  | 108 +++++++++---------
 1 file changed, 55 insertions(+), 53 deletions(-)

diff --git a/front/components/ConnectorPermissionsModal.tsx b/front/components/ConnectorPermissionsModal.tsx
index fd711cc117121..bc79dadb1f499 100644
--- a/front/components/ConnectorPermissionsModal.tsx
+++ b/front/components/ConnectorPermissionsModal.tsx
@@ -1,4 +1,4 @@
-import { NotificationType, SheetTitle } from "@dust-tt/sparkle";
+import { NotificationType, SheetContainer, SheetTitle } from "@dust-tt/sparkle";
 import { SheetHeader } from "@dust-tt/sparkle";
 import {
   Avatar,
@@ -761,10 +761,7 @@ export function ConnectorPermissionsModal({
                 <SheetTitle>
                   Manage {getDisplayNameForDataSource(dataSource)} connection
                 </SheetTitle>
-              </SheetHeader>
-
-              <div className="mx-auto mt-4 flex w-full max-w-4xl grow flex-col gap-4 px-4">
-                <div className="flex flex-row justify-end gap-2">
+                <div className="flex flex-row justify-end gap-2 py-1">
                   {(isOAuthProvider(connector.type) ||
                     connector.type === "snowflake") && (
                     <Button
@@ -791,58 +788,63 @@ export function ConnectorPermissionsModal({
                     />
                   )}
                 </div>
-                {OptionsComponent && plan && (
-                  <>
-                    <div className="p-1 text-xl font-bold">
-                      Connector options
-                    </div>
-                    <div className="p-1">
-                      <div className="border-y">
-                        <OptionsComponent
-                          {...{ owner, readOnly, isAdmin, dataSource, plan }}
-                        />
-                      </div>
-                    </div>
-                  </>
-                )}
+              </SheetHeader>
 
-                <div className="p-1 text-xl font-bold">
-                  {CONNECTOR_CONFIGURATIONS[connector.type].selectLabel}
-                </div>
+              <SheetContainer>
+                <div className="flex w-full flex-col gap-4">
+                  {OptionsComponent && plan && (
+                    <>
+                      <div className="p-1 text-xl font-bold">
+                        Connector options
+                      </div>
+                      <div className="p-1">
+                        <div className="border-y">
+                          <OptionsComponent
+                            {...{ owner, readOnly, isAdmin, dataSource, plan }}
+                          />
+                        </div>
+                      </div>
+                    </>
+                  )}
 
-                <ContentNodeTree
-                  isSearchEnabled={
-                    CONNECTOR_CONFIGURATIONS[connector.type].isSearchEnabled
-                  }
-                  isRoundedBackground={true}
-                  useResourcesHook={useResourcesHook}
-                  selectedNodes={
-                    canUpdatePermissions ? selectedNodes : undefined
-                  }
-                  setSelectedNodes={
-                    canUpdatePermissions && !isResourcesLoading
-                      ? setSelectedNodes
-                      : undefined
-                  }
-                  showExpand={
-                    CONNECTOR_CONFIGURATIONS[connector.type]?.isNested
-                  }
-                />
-
-                <div className="flex justify-end gap-2 border-t pt-4">
-                  <Button
-                    label="Cancel"
-                    variant="outline"
-                    onClick={() => closeModal(false)}
-                  />
-                  <Button
-                    label={saving ? "Saving..." : "Save"}
-                    variant="primary"
-                    disabled={isUnchanged || saving}
-                    onClick={save}
+                  <div className="p-1 text-xl font-bold">
+                    {CONNECTOR_CONFIGURATIONS[connector.type].selectLabel}
+                  </div>
+
+                  <ContentNodeTree
+                    isSearchEnabled={
+                      CONNECTOR_CONFIGURATIONS[connector.type].isSearchEnabled
+                    }
+                    isRoundedBackground={true}
+                    useResourcesHook={useResourcesHook}
+                    selectedNodes={
+                      canUpdatePermissions ? selectedNodes : undefined
+                    }
+                    setSelectedNodes={
+                      canUpdatePermissions && !isResourcesLoading
+                        ? setSelectedNodes
+                        : undefined
+                    }
+                    showExpand={
+                      CONNECTOR_CONFIGURATIONS[connector.type]?.isNested
+                    }
                   />
+
+                  <div className="flex justify-end gap-2 border-t pt-4">
+                    <Button
+                      label="Cancel"
+                      variant="outline"
+                      onClick={() => closeModal(false)}
+                    />
+                    <Button
+                      label={saving ? "Saving..." : "Save"}
+                      variant="primary"
+                      disabled={isUnchanged || saving}
+                      onClick={save}
+                    />
+                  </div>
                 </div>
-              </div>
+              </SheetContainer>
             </>
           )}
         </SheetContent>