diff --git a/src/shared/components/JIRA/JIRA.tsx b/src/shared/components/JIRA/JIRA.tsx
index 8d738ebac7..52d55fcbbf 100644
--- a/src/shared/components/JIRA/JIRA.tsx
+++ b/src/shared/components/JIRA/JIRA.tsx
@@ -317,17 +317,20 @@ const JIRAPluginUI = ({
         >
           <Dropdown
             dropdownRender={() => (
-              <Menu>
-                <Menu.Item
-                  key="create"
-                  onClick={() => setCreateIssueVisible(true)}
-                >
-                  Create issue
-                </Menu.Item>
-                <Menu.Item key="link" onClick={() => setLinkIssueVisible(true)}>
-                  Link issue
-                </Menu.Item>
-              </Menu>
+              <Menu
+                items={[
+                  {
+                    key: 'create',
+                    onClick: () => setCreateIssueVisible(true),
+                    label: 'Create issue',
+                  },
+                  {
+                    key: 'link',
+                    onClick: () => setLinkIssueVisible(true),
+                    label: 'Link issue',
+                  },
+                ]}
+              />
             )}
           >
             <Button type="primary" style={{ marginLeft: 'auto' }}>
@@ -423,14 +426,15 @@ const JIRAPluginUI = ({
                     <Dropdown.Button
                       size="small"
                       dropdownRender={() => (
-                        <Menu>
-                          <Menu.Item
-                            key="unlink"
-                            onClick={() => confirmUnlinkIssue(issue.key)}
-                          >
-                            Unlink
-                          </Menu.Item>
-                        </Menu>
+                        <Menu
+                          items={[
+                            {
+                              key: 'unlink',
+                              label: 'Unlink',
+                              onClick: () => confirmUnlinkIssue(issue.key),
+                            },
+                          ]}
+                        />
                       )}
                     >
                       Options
diff --git a/src/shared/components/Login/index.tsx b/src/shared/components/Login/index.tsx
index 5375d68d62..fcdd8fbc53 100644
--- a/src/shared/components/Login/index.tsx
+++ b/src/shared/components/Login/index.tsx
@@ -31,11 +31,11 @@ const Login: React.FunctionComponent<LoginProps> = ({
           onRealmSelected(realm);
         }
       }}
-    >
-      {realms.map(realm => (
-        <Menu.Item key={realm}>{realm}</Menu.Item>
-      ))}
-    </Menu>
+      items={realms.map(realm => ({
+        key: realm,
+        label: realm,
+      }))}
+    />
   );
 
   return (
diff --git a/src/shared/components/ResourceList/index.tsx b/src/shared/components/ResourceList/index.tsx
index 568760a39d..3cb05e5fee 100644
--- a/src/shared/components/ResourceList/index.tsx
+++ b/src/shared/components/ResourceList/index.tsx
@@ -164,10 +164,20 @@ const ResourceListComponent: React.FunctionComponent<{
   };
 
   const sortOptions = (
-    <Menu onClick={onChangeSort} selectedKeys={[sortOption]}>
-      <Menu.Item key="-_createdAt">Newest</Menu.Item>
-      <Menu.Item key="_createdAt">Oldest</Menu.Item>
-    </Menu>
+    <Menu
+      onClick={onChangeSort}
+      selectedKeys={[sortOption]}
+      items={[
+        {
+          key: '-_createdAt',
+          label: 'Newest',
+        },
+        {
+          key: '_createdAt',
+          label: 'Oldest',
+        },
+      ]}
+    ></Menu>
   );
 
   const hiddenListForCalculatingDimensionsForPageSize = (
diff --git a/src/shared/containers/DataCartContainer.tsx b/src/shared/containers/DataCartContainer.tsx
index f13efe5a55..34c9b1b4c0 100644
--- a/src/shared/containers/DataCartContainer.tsx
+++ b/src/shared/containers/DataCartContainer.tsx
@@ -266,11 +266,21 @@ const DataCartContainer = () => {
           ? downLoadFiles()
           : downLoadMetaData();
       }}
-    >
-      <Menu.Item key="meta-data">Metadata</Menu.Item>
-      <Menu.Item key="files">Files</Menu.Item>
-      <Menu.Item key="both">Both</Menu.Item>
-    </Menu>
+      items={[
+        {
+          key: 'meta-data',
+          label: 'Metadata',
+        },
+        {
+          key: 'files',
+          label: 'Files',
+        },
+        {
+          key: 'both',
+          label: 'Both',
+        },
+      ]}
+    />
   );
 
   const downloadButton = (disabled: boolean) => {
diff --git a/src/shared/containers/RemoveTagButtonContainer.tsx b/src/shared/containers/RemoveTagButtonContainer.tsx
index 0ff22599f3..db1cb7c493 100644
--- a/src/shared/containers/RemoveTagButtonContainer.tsx
+++ b/src/shared/containers/RemoveTagButtonContainer.tsx
@@ -75,13 +75,15 @@ const RemoveTagButton: React.FunctionComponent<{
       onClick={e => {
         setConfirm({ visible: true, tagName: e.key.toString(), busy: false });
       }}
-    >
-      {tags?.map(t => (
-        <Menu.Item key={t.tag}>
-          {t.tag} (<em>revision {t.rev} </em>)
-        </Menu.Item>
-      ))}
-    </Menu>
+      items={tags?.map(t => ({
+        key: t.tag,
+        label: (
+          <>
+            {t.tag} (<em>revision {t.rev} </em>)
+          </>
+        ),
+      }))}
+    />
   );
 
   return (
diff --git a/src/shared/containers/ResourceViewActionsContainer.tsx b/src/shared/containers/ResourceViewActionsContainer.tsx
index e420b72658..c79cf9719d 100644
--- a/src/shared/containers/ResourceViewActionsContainer.tsx
+++ b/src/shared/containers/ResourceViewActionsContainer.tsx
@@ -171,23 +171,23 @@ const ResourceViewActionsContainer: React.FC<{
 
   const revisionMenuItems = React.useMemo(
     () => (
-      <Menu>
-        {[...Array(latestResource?._rev).keys()]
+      <Menu
+        items={[...Array(latestResource?._rev).keys()]
           .map(k => k + 1)
           .sort((a, b) => b - a)
-          .map(rev => (
-            <Menu.Item
-              key={rev}
-              onClick={() => {
-                goToResource(orgLabel, projectLabel, encodedResourceId, rev);
-              }}
-            >
-              Revision {rev}
-              {revisionLabels(rev).length > 0 &&
-                ` (${revisionLabels(rev).join(', ')})`}
-            </Menu.Item>
-          ))}
-      </Menu>
+          .map(rev => ({
+            key: rev,
+            onClick: () =>
+              goToResource(orgLabel, projectLabel, encodedResourceId, rev),
+            label: (
+              <>
+                Revision {rev}
+                {revisionLabels(rev).length > 0 &&
+                  ` (${revisionLabels(rev).join(', ')})`}
+              </>
+            ),
+          }))}
+      />
     ),
     [resource, latestResource, tags]
   );
@@ -244,70 +244,76 @@ const ResourceViewActionsContainer: React.FC<{
                   }
                 }}
                 dropdownRender={() => (
-                  <Menu>
-                    <Menu.Item
-                      onClick={() => {
-                        const pathToResource = `${basePath}${generatePath(
-                          '/:orgLabel/:projectLabel/resources/:resourceId',
-                          {
-                            orgLabel,
-                            projectLabel,
-                            resourceId: encodedResourceId,
-                          }
-                        )}`;
+                  <Menu
+                    items={[
+                      {
+                        key: 'url',
+                        label: 'URL',
+                        onClick: () => {
+                          const pathToResource = `${basePath}${generatePath(
+                            '/:orgLabel/:projectLabel/resources/:resourceId',
+                            {
+                              orgLabel,
+                              projectLabel,
+                              resourceId: encodedResourceId,
+                            }
+                          )}`;
 
-                        triggerCopy(
-                          `${window.location.origin.toString()}${pathToResource}`
-                        );
-                      }}
-                    >
-                      URL
-                    </Menu.Item>
-                    <Menu.Item
-                      onClick={() => {
-                        const pathToResource = `${basePath}${generatePath(
-                          '/:orgLabel/:projectLabel/resources/:resourceId',
-                          {
-                            orgLabel,
-                            projectLabel,
-                            resourceId: encodedResourceId,
-                          }
-                        )}`;
+                          triggerCopy(
+                            `${window.location.origin.toString()}${pathToResource}`
+                          );
+                        },
+                      },
+                      {
+                        key: 'url_with_revision',
+                        label: 'URL (with revision)',
+                        onClick: () => {
+                          const pathToResource = `${basePath}${generatePath(
+                            '/:orgLabel/:projectLabel/resources/:resourceId',
+                            {
+                              orgLabel,
+                              projectLabel,
+                              resourceId: encodedResourceId,
+                            }
+                          )}`;
 
-                        triggerCopy(
-                          `${window.location.origin.toString()}${pathToResource}?rev=${
-                            resource._rev
-                          }`
-                        );
-                      }}
-                    >
-                      URL (with revision)
-                    </Menu.Item>
-                    <Menu.Item onClick={() => triggerCopy(resource['@id'])}>
-                      ID
-                    </Menu.Item>
-                    <Menu.Item
-                      onClick={() =>
-                        triggerCopy(`${resource['@id']}?rev=${resource._rev}`)
-                      }
-                    >
-                      ID (with revision)
-                    </Menu.Item>
-                    <Menu.Item onClick={() => triggerCopy(self ? self : '')}>
-                      Nexus address
-                    </Menu.Item>
-                    <Menu.Item
-                      onClick={() =>
-                        triggerCopy(
-                          self
-                            ? `${self}?rev=${resource ? resource._rev : ''}`
-                            : ''
-                        )
-                      }
-                    >
-                      Nexus address (with revision)
-                    </Menu.Item>
-                  </Menu>
+                          triggerCopy(
+                            `${window.location.origin.toString()}${pathToResource}?rev=${
+                              resource._rev
+                            }`
+                          );
+                        },
+                      },
+                      {
+                        key: 'id',
+                        label: 'ID',
+                        onClick: () => triggerCopy(resource['@id']),
+                      },
+                      {
+                        key: 'id_with_revision',
+                        label: 'ID (with revision)',
+                        onClick: () =>
+                          triggerCopy(
+                            `${resource['@id']}?rev=${resource._rev}`
+                          ),
+                      },
+                      {
+                        key: 'nexus_address',
+                        label: 'Nexus address',
+                        onClick: () => triggerCopy(self ? self : ''),
+                      },
+                      {
+                        key: 'nexus_address_with_revision',
+                        label: 'Nexus address (with revision)',
+                        onClick: () =>
+                          triggerCopy(
+                            self
+                              ? `${self}?rev=${resource ? resource._rev : ''}`
+                              : ''
+                          ),
+                      },
+                    ]}
+                  />
                 )}
               >
                 {copySuccess ? 'Copied!' : 'Copy'}
diff --git a/src/shared/molecules/MyDataHeader/MyDataHeaderFilters/DateFieldSelector.tsx b/src/shared/molecules/MyDataHeader/MyDataHeaderFilters/DateFieldSelector.tsx
index c625461dcd..36a2dea9fc 100644
--- a/src/shared/molecules/MyDataHeader/MyDataHeaderFilters/DateFieldSelector.tsx
+++ b/src/shared/molecules/MyDataHeader/MyDataHeaderFilters/DateFieldSelector.tsx
@@ -29,10 +29,17 @@ const DateFieldSelector = ({
       defaultSelectedKeys={['']}
       selectedKeys={dateField ? [dateField] : undefined}
       className="my-data-date-type-popover"
-    >
-      <Menu.Item key="createdAt">{dateFieldName.createdAt}</Menu.Item>
-      <Menu.Item key="updatedAt">{dateFieldName.updatedAt}</Menu.Item>
-    </Menu>
+      items={[
+        {
+          key: 'createdAt',
+          label: dateFieldName.createdAt,
+        },
+        {
+          key: 'updatedAt',
+          label: dateFieldName.updatedAt,
+        },
+      ]}
+    />
   );
   return (
     <Dropdown
diff --git a/src/subapps/admin/components/Settings/ResolversSubView.tsx b/src/subapps/admin/components/Settings/ResolversSubView.tsx
index 46817740c5..962823257e 100644
--- a/src/subapps/admin/components/Settings/ResolversSubView.tsx
+++ b/src/subapps/admin/components/Settings/ResolversSubView.tsx
@@ -1,13 +1,12 @@
 import React, { useState } from 'react';
-import { isObject, orderBy } from 'lodash';
-import { Table, Button, Row, Input, Col, notification, Alert } from 'antd';
+import { orderBy } from 'lodash';
+import { Table, Button, Input, Alert } from 'antd';
 import { ColumnsType } from 'antd/es/table';
 import { useMutation, useQuery } from 'react-query';
 import { useNexusContext } from '@bbp/react-nexus';
 import { useHistory, useLocation, useRouteMatch } from 'react-router';
 import { NexusClient } from '@bbp/nexus-sdk/es';
 import { PromisePool } from '@supercharge/promise-pool';
-import ReactJson from 'react-json-view';
 import { easyValidURL } from '../../../../utils/validUrl';
 import './styles.scss';
 
diff --git a/src/subapps/projects/components/AddComponentButton.tsx b/src/subapps/projects/components/AddComponentButton.tsx
index 576fb56cc8..f28b4b3160 100644
--- a/src/subapps/projects/components/AddComponentButton.tsx
+++ b/src/subapps/projects/components/AddComponentButton.tsx
@@ -20,31 +20,60 @@ const AddComponentButton: React.FC<{
   addActivityTable,
 }) => {
   const menu = (
-    <Menu>
-      {addInputTable && (
-        <Menu.Item onClick={addInputTable}>
-          Canvas: Add New Input Table
-        </Menu.Item>
-      )}
-      {addActivityTable && (
-        <Menu.Item onClick={addActivityTable}>
-          Canvas: Add New Activity Table
-        </Menu.Item>
-      )}
-
-      <Menu.Item onClick={addNewStep}>Canvas: Add New Step</Menu.Item>
-      {addDataTable && (
-        <Menu.Item onClick={addDataTable}>Canvas: Add Data Table</Menu.Item>
-      )}
-      {addCode && (
-        <Menu.Item disabled onClick={addCode}>
-          Project: Create New Code Resource
-        </Menu.Item>
-      )}
-      {addDataset && (
-        <Menu.Item onClick={addDataset}>Project: Add New Dataset</Menu.Item>
-      )}
-    </Menu>
+    <Menu
+      items={[
+        ...(addInputTable
+          ? [
+              {
+                key: 'add_input_table',
+                label: 'Canvas: Add New Input Table',
+                onClick: () => addInputTable(),
+              },
+            ]
+          : []),
+        ...(addActivityTable
+          ? [
+              {
+                key: 'add_activity_table',
+                label: 'Canvas: Add New Activity Table',
+                onClick: () => addActivityTable(),
+              },
+            ]
+          : []),
+        {
+          key: 'add_new_step',
+          label: 'Canvas: Add New Step',
+          onClick: () => addNewStep(),
+        },
+        ...(addDataTable
+          ? [
+              {
+                key: 'add_data_table',
+                label: 'Canvas: Add Data Table',
+                onClick: () => addDataTable(),
+              },
+            ]
+          : []),
+        ...(addCode
+          ? [
+              {
+                key: 'add_code',
+                label: 'Project: Create New Code Resource',
+                onClick: () => addCode(),
+              },
+            ]
+          : []),
+        ...(addDataset
+          ? [
+              {
+                key: 'add_new_dataset',
+                label: 'Project: Add New Dataset',
+                onClick: () => addDataset(),
+              },
+            ]
+          : []),
+      ]}
+    />
   );
 
   return (
diff --git a/src/subapps/projects/components/WorkflowSteps/StepCard.tsx b/src/subapps/projects/components/WorkflowSteps/StepCard.tsx
index b50220c077..59e4af3e60 100644
--- a/src/subapps/projects/components/WorkflowSteps/StepCard.tsx
+++ b/src/subapps/projects/components/WorkflowSteps/StepCard.tsx
@@ -180,13 +180,13 @@ const StepCard: React.FC<{
   };
 
   const menu = (
-    <Menu onClick={handleMenuClick}>
-      {Object.values(Status).map(status => (
-        <Menu.Item key={status}>
-          <span className="step-card__status-item">{status}</span>
-        </Menu.Item>
-      ))}
-    </Menu>
+    <Menu
+      onClick={handleMenuClick}
+      items={Object.values(Status).map(status => ({
+        key: status,
+        label: <span className="step-card__status-item">{status}</span>,
+      }))}
+    />
   );
 
   const enterNewName = () => {