Merge branch 'MIN-154-column' into 'development'

feat(export): MIN-154 select column

See merge request !95

src/components/Map/Drawer/ExportDrawer/Elements/Columns/Columns.component.test.tsx

+import { render, screen } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import { Columns } from './Columns.component';
+
+describe('Columns - component', () => {
+  it('should display select column accordion', async () => {
+    render(<Columns />);
+
+    expect(screen.getByText('Select column')).toBeInTheDocument();
+    expect(screen.queryByTestId('checkbox-filter')).not.toBeVisible();
+  });
+  it('should display columns checkboxes', async () => {
+    render(<Columns />);
+
+    expect(screen.getByText('Select column')).toBeInTheDocument();
+    expect(screen.queryByTestId('checkbox-filter')).not.toBeVisible();
+
+    const navigationButton = screen.getByTestId('accordion-item-button');
+    act(() => {
+      navigationButton.click();
+    });
+
+    expect(screen.queryByTestId('checkbox-filter')).toBeVisible();
+    expect(screen.queryByLabelText('References')).toBeVisible();
+  });
+});

src/components/Map/Drawer/ExportDrawer/Elements/Columns/Columns.component.tsx

+import { CheckboxFilter } from '../../CheckboxFilter';
+import { CollapsibleSection } from '../../CollapsibleSection';
+import { COLUMNS } from './Columns.constants';
+
+export const Columns = (): React.ReactNode => (
+  <CollapsibleSection title="Select column">
+    <CheckboxFilter options={COLUMNS} isSearchEnabled={false} />
+  </CollapsibleSection>
+);

src/components/Map/Drawer/ExportDrawer/Elements/Columns/Columns.constants.tsx

+export const COLUMNS = [
+  {
+    id: 'id',
+    label: 'ID',
+  },
+  {
+    id: 'description',
+    label: 'Description',
+  },
+  {
+    id: 'modelId',
+    label: 'Map id',
+  },
+  {
+    id: 'mapName',
+    label: 'Map name',
+  },
+  {
+    id: 'symbol',
+    label: 'Symbol',
+  },
+  {
+    id: 'abbreviation',
+    label: 'Abbreviation',
+  },
+  {
+    id: 'synonyms',
+    label: 'Synonyms',
+  },
+  {
+    id: 'references',
+    label: 'References',
+  },
+  {
+    id: 'name',
+    label: 'Name',
+  },
+  {
+    id: 'type',
+    label: 'Type',
+  },
+  {
+    id: 'complexId',
+    label: 'Complex id',
+  },
+  {
+    id: 'complexName',
+    label: 'Complex name',
+  },
+  {
+    id: 'compartmentId',
+    label: 'Compartment/Pathway id',
+  },
+  {
+    id: 'compartmentName',
+    label: 'Compartment/Pathway name',
+  },
+  {
+    id: 'charge',
+    label: 'Charge',
+  },
+  {
+    id: 'fullName',
+    label: 'Full name',
+  },
+  {
+    id: 'formula',
+    label: 'Formula',
+  },
+  {
+    id: 'formerSymbols',
+    label: 'Former symbols',
+  },
+  {
+    id: 'linkedSubmodelId',
+    label: 'Linked submap id',
+  },
+  {
+    id: 'elementId',
+    label: 'Element external id',
+  },
+  {
+    id: 'ALL',
+    label: 'All',
+  },
+];

src/components/Map/Drawer/ExportDrawer/Elements/Columns/index.ts

+export { Columns } from './Columns.component';

src/components/Map/Drawer/ExportDrawer/Elements/Elements.component.tsx

 import { Types } from './Types';
 import { Annotations } from '../Annotations';
+import { Columns } from './Columns';
 
 export const Elements = (): React.ReactNode => {
   return (
     <div data-testid="elements-tab">
       <Types />
+      <Columns />
       <Annotations />
     </div>
   );