Merge pull request #2578 from github/data-ext-divider

Data extensions UI: Add divider between title and status containers

extensions/ql-vscode/src/view/data-extensions-editor/LibraryRow.tsx

@@ -8,7 +8,7 @@ import { calculateModeledPercentage } from "../../data-extensions-editor/shared/
 import { percentFormatter } from "./formatters";
 import { Codicon } from "../common";
 import { Mode } from "../../data-extensions-editor/shared/mode";
-import { VSCodeButton } from "@vscode/webview-ui-toolkit/react";
+import { VSCodeButton, VSCodeDivider } from "@vscode/webview-ui-toolkit/react";
 
 const LibraryContainer = styled.div`
   margin-bottom: 1rem;
@@ -26,6 +26,11 @@ const TitleContainer = styled.button`
   cursor: pointer;
 `;
 
+const TitleDivider = styled(VSCodeDivider)`
+  padding-top: 0.3rem;
+  padding-bottom: 0.3rem;
+`;
+
 const NameContainer = styled.div`
   display: flex;
   gap: 0.5em;
@@ -124,12 +129,15 @@ export const LibraryRow = ({
         </TitleButton>
       </TitleContainer>
       {isExpanded && (
-        <ModeledMethodDataGrid
-          externalApiUsages={externalApiUsages}
-          modeledMethods={modeledMethods}
-          mode={mode}
-          onChange={onChange}
-        />
+        <>
+          <TitleDivider />
+          <ModeledMethodDataGrid
+            externalApiUsages={externalApiUsages}
+            modeledMethods={modeledMethods}
+            mode={mode}
+            onChange={onChange}
+          />
+        </>
       )}
     </LibraryContainer>
   );