Stop using deprecated props for Dropdown components

src/__test__/components/data-exploration/differential-expression-tool/DiffExprResults.test.jsx

@@ -385,8 +385,7 @@ describe('DiffExprResults', () => {
 
     // Adding a filter and applying it
     const dropdown = component.find('Dropdown');
-    const menuInstance = shallow(dropdown.props().overlay);
-    menuInstance.at(0).simulate('click');
+    dropdown.simulate('click', 'Up-regulated');
     await waitForActions(withResultStore, [DIFF_EXPR_ORDERING_SET, DIFF_EXPR_LOADING, DIFF_EXPR_LOADED]);
 
     // closing the modal

src/__test__/components/data-exploration/heatmap/HeatmapGroupBySettings.test.jsx

@@ -113,18 +113,17 @@ describe('HeatmapGroupBySettings', () => {
 
     // there's a dropdown
     const dropdown = component.find(Dropdown);
-    const submenu = shallow(<div>{dropdown.prop('overlay')}</div>);
-    const subMenuItems = submenu.find('MenuItem');
+    const menuItems = dropdown.props().menu.items;
 
     // With two items.
-    expect(subMenuItems.length).toEqual(2);
+    expect(menuItems.length).toEqual(2);
 
     // each of which should have the right names.
-    expect(subMenuItems.at(0).find('div').text()).toEqual('louvain clusters');
-    expect(subMenuItems.at(1).find('div').text()).toEqual('Sample');
+    expect(menuItems[0].label.props.children[1]).toEqual('louvain clusters');
+    expect(menuItems[1].label.props.children[1]).toEqual('Sample');
   });
 
-  test('interacting with the groupby add/remove options will trigger the appropriate actions', async () => {
+  it('interacting with the groupby add/remove options will trigger the appropriate actions', async () => {
     const store = mockStore({
       ...initialState,
     });
@@ -139,12 +138,11 @@ describe('HeatmapGroupBySettings', () => {
     expect(component.find('HeatmapGroupBySettings').length).toEqual(1);
 
     const dropdown = component.find(Dropdown);
-    const submenu = shallow(<div>{dropdown.prop('overlay')}</div>);
-    const subMenuItems = submenu.find('MenuItem');
+    const menuItems = dropdown.props().menu.items;
 
     // When the other group by is clicked...
-    const buttons = subMenuItems.find(Button);
-    act(() => { buttons.at(0).simulate('click'); });
+    const buttons = menuItems[0].label.props.children;
+    act(() => { buttons[0].props.onClick() });
     component.update();
 
     await waitForActions(store, [UPDATE_CONFIG]);
@@ -170,7 +168,7 @@ describe('HeatmapGroupBySettings', () => {
     expect(groupByItems.at(1).text()).toEqual('louvain clusters');
 
     // when the groupby is clicked again
-    act(() => { buttons.at(0).simulate('click'); });
+    act(() => { buttons[0].props.onClick() });
     component.update();
 
     await waitForActions(store, [UPDATE_CONFIG]);
@@ -189,7 +187,7 @@ describe('HeatmapGroupBySettings', () => {
     expect(groupByItems.at(0).text()).toEqual('Sample');
   });
 
-  test('interacting with the groupby reorder options will trigger the appropriate actions', async () => {
+  it('interacting with the groupby reorder options will trigger the appropriate actions', async () => {
     const store = mockStore({
       ...initialState,
     });
@@ -204,12 +202,11 @@ describe('HeatmapGroupBySettings', () => {
     expect(component.find('HeatmapGroupBySettings').length).toEqual(1);
 
     const dropdown = component.find(Dropdown);
-    const submenu = shallow(<div>{dropdown.prop('overlay')}</div>);
-    const subMenuItems = submenu.find('MenuItem');
+    const menuItems = dropdown.props().menu.items;
 
     // Add a louvain group by
-    const addButtons = subMenuItems.find(Button);
-    act(() => { addButtons.at(0).simulate('click'); });
+    const addButtons = menuItems[0].label.props.children;
+    act(() => { addButtons[0].props.onClick() });
 
     await waitForActions(store, [UPDATE_CONFIG]);
     component.update();

src/components/data-exploration/cell-sets-tool/CellSetsTool.jsx

@@ -170,14 +170,12 @@ const CellSetsTool = (props) => {
       );
     }
 
-    return (
-      <Space direction='vertical'>
-        <Tabs
-          size='small'
-          activeKey={activeTab}
-          onChange={(key) => setActiveTab(key)}
-        >
-          <Tabs.TabPane tab='Cell sets' key='cellSets'>
+    const tabItems = [
+      {
+        key: 'cellSets',
+        label: 'Cell sets',
+        children: (
+          <>
             {operations}
             <HierarchicalTree
               experimentId={experimentId}
@@ -190,14 +188,29 @@ const CellSetsTool = (props) => {
               showHideButton
               checkedKeys={selectedCellSetKeys}
             />
-          </Tabs.TabPane>
-          <Tabs.TabPane tab='Annotate clusters' key='annotateClusters'>
-            <AnnotateClustersTool
-              experimentId={experimentId}
-              onRunAnnotation={() => { setActiveTab('cellSets'); }}
-            />
-          </Tabs.TabPane>
-        </Tabs>
+          </>
+        ),
+      },
+      {
+        key: 'annotateClusters',
+        label: 'Annotate clusters',
+        children: (
+          <AnnotateClustersTool
+            experimentId={experimentId}
+            onRunAnnotation={() => { setActiveTab('cellSets'); }}
+          />
+        ),
+      },
+    ];
+
+    return (
+      <Space direction='vertical'>
+        <Tabs
+          size='small'
+          activeKey={activeTab}
+          onChange={(key) => setActiveTab(key)}
+          items={tabItems}
+        />
       </Space>
     );
   };

src/components/data-exploration/differential-expression-tool/AdvancedFilteringModal.jsx

@@ -79,20 +79,16 @@ const AdvancedFilteringModal = (props) => {
     setAvailableCriteriaOptions(filteredCriteriaOptions);
   }, [availableColumns.length]);
 
-  const renderPresetFilters = (add) => (
-    <Menu
-      onClick={(e) => {
-        const selectedFilter = availablePresetFilters.find((filter) => filter.label === e.key);
-        add(selectedFilter);
-      }}
-    >
-      {availablePresetFilters.map((filter) => (
-        <Menu.Item key={filter.label}>
-          {filter.label}
-        </Menu.Item>
-      ))}
-    </Menu>
-  );
+
+  const onClickPresetFilter = (add, e) => {
+    const selectedFilter = availablePresetFilters.find((filter) => filter.label === e.key);
+    add(selectedFilter);
+  }
+
+  const presetFilterItems = availablePresetFilters.map((filter) => ({
+    label: filter.label,
+    key: filter.label,
+  }));
 
   const applyFilters = (filters) => {
     const filtersDataToRun = filters.map(({ columnName, comparison, value }) => ({
@@ -104,7 +100,7 @@ const AdvancedFilteringModal = (props) => {
 
   return (
     <Modal
-      visible
+      open
       title='Advanced filters'
       onCancel={onCancel}
       footer={null}
@@ -169,7 +165,12 @@ const AdvancedFilteringModal = (props) => {
                   <Button onClick={add} icon={<PlusOutlined />}>
                     Add custom filter
                   </Button>
-                  <Dropdown overlay={renderPresetFilters(add)}>
+                  <Dropdown
+                    menu={{
+                      items: presetFilterItems,
+                      onClick: (e) => onClickPresetFilter(add, e)
+                    }}
+                  >
                     <Button icon={<PlusOutlined />}>
                       Add preset filter
                     </Button>
@@ -188,7 +189,7 @@ const AdvancedFilteringModal = (props) => {
           )}
         </Form.List>
       </Form>
-    </Modal>
+    </Modal >
   );
 };
 

src/components/data-exploration/heatmap/HeatmapCellInfo.jsx

@@ -77,7 +77,10 @@ HeatmapCellInfo.propTypes = {
   containerHeight: PropTypes.number.isRequired,
   cellId: PropTypes.string.isRequired,
   geneName: PropTypes.string.isRequired,
-  geneExpression: PropTypes.number.isRequired,
+  geneExpression: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.number),
+    PropTypes.oneOf([undefined, null])
+  ]),
   coordinates: PropTypes.object.isRequired,
 };
 

src/components/data-exploration/heatmap/HeatmapGroupBySettings.jsx

@@ -7,7 +7,7 @@ import {
 } from '@ant-design/icons';
 import 'antd/dist/antd.css';
 import {
-  Button, Space, Menu, Dropdown,
+  Button, Space, Dropdown,
 } from 'antd';
 import PropTypes from 'prop-types';
 import { ClipLoader } from 'react-spinners';
@@ -80,47 +80,41 @@ const HeatmapGroupBySettings = (props) => {
 
   // This is so that a click on + or - buttons doesn't close the menu
   const stopPropagationEvent = (e) => e.stopPropagation();
-  const menu = (
-    <Menu>
-      {
-        allCellSetsGroupBys
-          .map((cellSet, indx) => {
-            const positionInCellSetOrder = indexOfCellSet(cellSet);
-
-            return (
-              // eslint-disable-next-line react/no-array-index-key
-              <Menu.Item key={indx} size='small'>
-                <div onClick={stopPropagationEvent} onKeyDown={stopPropagationEvent}>
-                  <Button
-                    shape='square'
-                    size='small'
-                    style={{ marginRight: '5px' }}
-                    icon={positionInCellSetOrder > -1 ? <MinusOutlined /> : <PlusOutlined />}
-                    onClick={() => {
-                      const newCellSetsOrder = [...cellSetsOrder];
-                      if (positionInCellSetOrder > -1) {
-                        // If the cell is included in the cellSet, we have to remove it
-                        newCellSetsOrder.splice(positionInCellSetOrder, 1);
-                      } else {
-                        // If the cell is not included in the cellSet, we have to add it
-                        newCellSetsOrder.push(cellSet);
-                      }
-                      setCellSetsOrder(newCellSetsOrder);
-                    }}
-                  />
-                  {cellSet.name}
-                </div>
-              </Menu.Item>
-            );
-          })
-      }
-    </Menu>
-  );
+  const menuItems =
+    allCellSetsGroupBys
+      .map((cellSet, indx) => {
+        const positionInCellSetOrder = indexOfCellSet(cellSet);
+
+        return {
+          label: (
+            <div onClick={stopPropagationEvent} onKeyDown={stopPropagationEvent}>
+              <Button
+                shape='square'
+                size='small'
+                style={{ marginRight: '5px' }}
+                icon={positionInCellSetOrder > -1 ? <MinusOutlined /> : <PlusOutlined />}
+                onClick={() => {
+                  const newCellSetsOrder = [...cellSetsOrder];
+                  if (positionInCellSetOrder > -1) {
+                    newCellSetsOrder.splice(positionInCellSetOrder, 1);
+                  } else {
+                    newCellSetsOrder.push(cellSet);
+                  }
+                  setCellSetsOrder(newCellSetsOrder);
+                }}
+              />
+              {cellSet.name}
+            </div>
+          ),
+          key: indx.toString(),
+        };
+      });
+
 
   return (
     <div style={{ padding: '5px' }} key='dropdown'>
       <Space direction='vertical'>
-        <Dropdown overlay={menu} trigger='click hover'>
+        <Dropdown menu={{ items: menuItems }} trigger='click hover'>
           <div style={{ padding: '7px', border: '1px solid rgb(238,238,238)' }}>
             Select the parameters to group by
             <DownOutlined style={{ marginLeft: '5px' }} />

src/components/data-exploration/heatmap/HeatmapSettings.jsx

@@ -3,49 +3,53 @@ import {
   SettingOutlined,
 } from '@ant-design/icons';
 import {
-  Button, Dropdown, Menu, Tooltip,
+  Button, Dropdown, Tooltip
 } from 'antd';
 
 import PropTypes from 'prop-types';
 import HeatmapMetadataTrackSettings from 'components/data-exploration/heatmap/HeatmapMetadataTrackSettings';
 import HeatmapGroupBySettings from 'components/data-exploration/heatmap/HeatmapGroupBySettings';
 
-import NoStyleAntdMenuItem from 'components/NoStyleAntdMenuItem';
-
-import styles from 'utils/css/no-style-menu-item.module.css';
-
-const { SubMenu } = Menu;
-
 const HeatmapSettings = (props) => {
   const { componentType } = props;
 
-  const renderMenu = () => (
-    <Menu size='small'>
-      <SubMenu key='metadataTracks' title='Metadata tracks' icon={<></>} popupClassName={styles['no-style-menu-item']}>
-        <NoStyleAntdMenuItem>
-          <HeatmapMetadataTrackSettings componentType={componentType} />
-        </NoStyleAntdMenuItem>
-      </SubMenu>
-      <SubMenu key='groupBy' title='Group by' icon={<></>}>
-        <NoStyleAntdMenuItem>
-          <HeatmapGroupBySettings componentType={componentType} />
-        </NoStyleAntdMenuItem>
-      </SubMenu>
-    </Menu>
-  );
+  const menuItems = [
+    {
+      label: 'Metadata tracks', key: 'metadataTracks', children: [
+        {
+          label: (<HeatmapMetadataTrackSettings componentType={componentType} />),
+          key: "metadataTracksChild",
+        }
+      ]
+    },
+    {
+      label: 'Group by', key: 'groupBy', children: [
+        {
+          label: (<HeatmapGroupBySettings componentType={componentType} />),
+          key: "groupByChild",
+        }
+      ]
+    },
+  ];
 
   return (
-    <Dropdown arrow type='link' size='small' overlay={renderMenu()} trigger={['click']}>
-      <Tooltip title='Settings'>
-        <Button
-          type='text'
-          icon={<SettingOutlined />}
-          // these classes are added so that the settings button
-          // is the same style as the remove button
-          className='bp3-button bp3-minimal'
-        />
-      </Tooltip>
-    </Dropdown>
+    <>
+      <Dropdown
+        arrow
+        type='link'
+        size='small'
+        menu={{ items: menuItems }}
+        trigger={['click']}
+      >
+        <Tooltip title='Settings'>
+          <Button
+            type='text'
+            icon={<SettingOutlined />}
+            className='bp3-button bp3-minimal'
+          />
+        </Tooltip>
+      </Dropdown>
+    </>
   );
 };