chore(data-modeling): adjust tests

Author: gribnoysup

packages/compass-components/src/components/drawer-portal.tsx

@@ -147,14 +147,19 @@ const drawerLayoutFixesStyles = css({
     marginTop: -1, // hiding the top border as we already have one in the place where the Anchor is currently rendered
   },
 
-  // Doing our best to target the section title here, leafygreen really doesn't
-  // give us anything else to try. We're stretching the title container to all
-  // available width so that we can layout the controls there better
-  '& > div:nth-child(2) div:has(> strong)': {
-    flex: 1,
-    maxWidth: 'calc(100% - 28px)', // disallow going over the title size (100 - close button width)
-    overflow: 'hidden',
-  },
+  // We're stretching the title container to all available width so that we can
+  // layout the controls there better. Doing our best to target the section
+  // title here, leafygreen really doesn't give us anything else to try.
+  //
+  // TODO(ticket): This is obviously a horrible selector and we should make sure
+  // that LG team provides a better one for us to achieve this behavior when
+  // we're removing the vendored version of the drawer
+  '& > div:nth-child(2) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:first-child':
+    {
+      flex: 'none',
+      width: 'calc(100% - 28px)', // disallow going over the title size (100 - close button width)
+      overflow: 'hidden',
+    },
 });
 
 const emptyDrawerLayoutFixesStyles = css({

packages/compass-data-modeling/src/components/drawer/diagram-editor-side-panel.spec.tsx

@@ -73,11 +73,13 @@ describe('DiagramEditorSidePanel', function () {
     result.plugin.store.dispatch(selectCollection('flights.airlines'));
 
     await waitFor(() => {
-      const nameInput = screen.getByLabelText('Name');
-      expect(nameInput).to.be.visible;
-      expect(nameInput).to.have.value('flights.airlines');
+      expect(screen.getByTitle('flights.airlines')).to.exist;
     });
 
+    const nameInput = screen.getByLabelText('Name');
+    expect(nameInput).to.be.visible;
+    expect(nameInput).to.have.value('flights.airlines');
+
     userEvent.click(screen.getByRole('textbox', { name: 'Notes' }));
     userEvent.type(
       screen.getByRole('textbox', { name: 'Notes' }),
@@ -104,8 +106,8 @@ describe('DiagramEditorSidePanel', function () {
     );
 
     await waitFor(() => {
-      const section = screen.getByText('Relationship properties');
-      expect(section).to.be.visible;
+      expect(screen.getByTitle('countries.name → airports.Country')).to.be
+        .visible;
     });
 
     const localCollectionInput = screen.getByLabelText('Local collection');

packages/compass-data-modeling/src/components/drawer/diagram-editor-side-panel.tsx

@@ -102,7 +102,8 @@ function DiagramEditorSidePanel({
             // Because the close button here is out of our control, we have do
             // adjust the actions rendering in a bit of an unconventional way:
             // if there's more than one action available, collapse it to "...",
-            // if it's just one, render the button
+            // if it's just one, make sure button is not collapsed by setting
+            // collapseAfter to >0
             collapseAfter={actions.length > 1 ? 0 : 1}
           ></ItemActionControls>
         </div>