From a7d007e0ddb94fcb144d4c8f4ceb94d8901f94d7 Mon Sep 17 00:00:00 2001
From: Dmitry Shilov <dshilov@microsoft.com>
Date: Mon, 23 Jun 2025 17:18:09 +0200
Subject: [PATCH] fix: Partition Keys block for fabric (#2174)

* fix: Partition Keys block for fabric

- Show Partition Keys block for fabric
- Adjust layout and visibility of separators in AddCollectionPanel
---
 .../AddCollectionPanel/AddCollectionPanel.tsx | 11 +++---
 .../AddCollectionPanel.test.tsx.snap          | 36 +++++++++----------
 2 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx b/src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx
index 3455176a6..7db7546e4 100644
--- a/src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx
+++ b/src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx
@@ -406,9 +406,9 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   responsiveMode={999}
                 />
               )}
+              <Separator className="panelSeparator" style={{ marginTop: -4, marginBottom: -4 }} />
             </Stack>
           )}
-          <Separator className="panelSeparator" style={{ marginTop: -4, marginBottom: -4 }} />
 
           <Stack>
             <Stack horizontal style={{ marginTop: -5, marginBottom: 1 }}>
@@ -448,8 +448,9 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                 this.setState({ collectionId: event.target.value })
               }
             />
+            <Separator className="panelSeparator" style={{ marginTop: -5, marginBottom: -5 }} />
           </Stack>
-          <Separator className="panelSeparator" style={{ marginTop: -5, marginBottom: -5 }} />
+
           {this.shouldShowIndexingOptionsForFreeTierAccount() && (
             <Stack>
               <Stack horizontal style={{ marginTop: -4, marginBottom: -5 }}>
@@ -644,7 +645,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                     </Stack>
                   );
                 })}
-              {!isFabricNative() && userContext.apiType === "SQL" && (
+              {userContext.apiType === "SQL" && (
                 <Stack className="panelGroupSpacing">
                   <DefaultButton
                     styles={{ root: { padding: 0, width: 200, height: 30 }, label: { fontSize: 12 } }}
@@ -775,7 +776,9 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
             </Stack>
           )}
 
-          <Separator className="panelSeparator" style={{ marginTop: -15, marginBottom: -4 }} />
+          {!isFabricNative() && userContext.apiType === "SQL" && (
+            <Separator className="panelSeparator" style={{ marginTop: -15, marginBottom: -4 }} />
+          )}
 
           {shouldShowAnalyticalStoreOptions() && (
             <Stack className="panelGroupSpacing" style={{ marginTop: -4 }}>
diff --git a/src/Explorer/Panes/AddCollectionPanel/__snapshots__/AddCollectionPanel.test.tsx.snap b/src/Explorer/Panes/AddCollectionPanel/__snapshots__/AddCollectionPanel.test.tsx.snap
index 39bb1bccd..c4cfa4afa 100644
--- a/src/Explorer/Panes/AddCollectionPanel/__snapshots__/AddCollectionPanel.test.tsx.snap
+++ b/src/Explorer/Panes/AddCollectionPanel/__snapshots__/AddCollectionPanel.test.tsx.snap
@@ -142,16 +142,16 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
           </StyledTooltipHostBase>
         </Stack>
       </Stack>
-    </Stack>
-    <Separator
-      className="panelSeparator"
-      style={
-        {
-          "marginBottom": -4,
-          "marginTop": -4,
+      <Separator
+        className="panelSeparator"
+        style={
+          {
+            "marginBottom": -4,
+            "marginTop": -4,
+          }
         }
-      }
-    />
+      />
+    </Stack>
     <Stack>
       <Stack
         horizontal={true}
@@ -202,16 +202,16 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
         type="text"
         value=""
       />
-    </Stack>
-    <Separator
-      className="panelSeparator"
-      style={
-        {
-          "marginBottom": -5,
-          "marginTop": -5,
+      <Separator
+        className="panelSeparator"
+        style={
+          {
+            "marginBottom": -5,
+            "marginTop": -5,
+          }
         }
-      }
-    />
+      />
+    </Stack>
     <Stack>
       <Stack
         horizontal={true}