add name and accordions

Author: paula-stacho

packages/compass-components/src/components/accordion.tsx

@@ -51,17 +51,19 @@ interface AccordionProps extends React.HTMLProps<HTMLButtonElement> {
   text: string | React.ReactNode;
   hintText?: string;
   open?: boolean;
+  isDefaultExpanded?: boolean;
   setOpen?: (newValue: boolean) => void;
 }
 function Accordion({
   text,
   hintText,
   open: _open,
   setOpen: _setOpen,
+  isDefaultExpanded = false,
   ...props
 }: React.PropsWithChildren<AccordionProps>): React.ReactElement {
   const darkMode = useDarkMode();
-  const [localOpen, setLocalOpen] = useState(_open ?? false);
+  const [localOpen, setLocalOpen] = useState(_open ?? isDefaultExpanded);
   const setOpenRef = useRef(_setOpen);
   setOpenRef.current = _setOpen;
   const onOpenChange = useCallback(() => {

packages/compass-data-modeling/src/components/data-modeling.tsx

@@ -5,7 +5,7 @@ import SavedDiagramsList from './saved-diagrams-list';
 import NewDiagramFormModal from './new-diagram-form';
 import type { DataModelingState } from '../store/reducer';
 import { DiagramProvider } from '@mongodb-js/diagramming';
-import DiagramEditorSidePanel from './diagram-editor-side-panel';
+import DiagramEditorSidePanel from './side-panel/diagram-editor-side-panel';
 
 type DataModelingProps = {
   showList: boolean;

packages/compass-data-modeling/src/components/relationship-drawer-content.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import type { Relationship } from '../services/data-model-storage';
+import type { Relationship } from '../../services/data-model-storage';
 import { Button, H3 } from '@mongodb-js/compass-components';
 import {
   createNewRelationship,
   deleteRelationship,
   getCurrentDiagramFromState,
   selectCurrentModel,
   selectRelationship,
-} from '../store/diagram';
-import type { DataModelingState } from '../store/reducer';
+} from '../../store/diagram';
+import type { DataModelingState } from '../../store/reducer';
 
 type CollectionDrawerContentProps = {
   namespace: string;

packages/compass-data-modeling/src/components/collection-drawer-content.tsx renamed to packages/compass-data-modeling/src/components/side-panel/collection-drawer-content.tsx

@@ -7,17 +7,17 @@ import {
   userEvent,
   within,
 } from '@mongodb-js/testing-library-compass';
-import { DataModelingWorkspaceTab } from '../index';
+import { DataModelingWorkspaceTab } from '../../index';
 import DiagramEditorSidePanel from './diagram-editor-side-panel';
 import {
   getCurrentDiagramFromState,
   openDiagram,
   selectCollection,
   selectCurrentModel,
   selectRelationship,
-} from '../store/diagram';
-import dataModel from '../../test/fixtures/data-model-with-relationships.json';
-import type { MongoDBDataModelDescription } from '../services/data-model-storage';
+} from '../../store/diagram';
+import dataModel from '../../../test/fixtures/data-model-with-relationships.json';
+import type { MongoDBDataModelDescription } from '../../services/data-model-storage';
 
 async function comboboxSelectItem(
   label: string,

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import type { DataModelingState } from '../store/reducer';
+import type { DataModelingState } from '../../store/reducer';
 import {
   Button,
   css,
@@ -10,7 +10,7 @@ import {
 } from '@mongodb-js/compass-components';
 import CollectionDrawerContent from './collection-drawer-content';
 import RelationshipDrawerContent from './relationship-drawer-content';
-import { closeDrawer } from '../store/diagram';
+import { closeDrawer } from '../../store/diagram';
 
 const containerStyles = css({
   width: '400px',