Add PicklistMenuItem: reduces duplicate code

Fix issue with PicklistCreationMenuItem being incorrectly disabled when acting as a button

Author: labkey-alan

packages/components/src/internal/components/picklist/AddToPicklistMenuItem.tsx

@@ -1,15 +1,14 @@
 import React, { FC, memo, useCallback } from 'react';
 
 import { userCanManagePicklists } from '../../app/utils';
-import { DisableableMenuItem } from '../samples/DisableableMenuItem';
 
 import { User } from '../base/models/User';
 
 import { PicklistEditModal } from './PicklistEditModal';
 import { ChoosePicklistModal } from './ChoosePicklistModal';
-import { MAX_SELECTIONS_MESSAGE, MAX_SELECTIONS_PER_ADD } from './constants';
 import { useModalState } from '../../hooks';
 import { SchemaQuery } from '../../../public/SchemaQuery';
+import { PicklistMenuItem } from './PicklistMenuItem';
 
 interface Props {
     metricFeatureArea?: string;
@@ -32,24 +31,11 @@ export const AddToPicklistMenuItem: FC<Props> = memo(props => {
         [closeChoose, openCreate]
     );
 
-    if (!userCanManagePicklists(user)) {
-        return null;
-    }
-
-    const disabled = !selectedRowIds || selectedRowIds.length === 0 || selectedRowIds.length > MAX_SELECTIONS_PER_ADD;
-    let disabledMessage: string;
-
-    if (!selectedRowIds || selectedRowIds.length === 0) {
-        disabledMessage = 'Select one or more samples.';
-    } else if (selectedRowIds.length > MAX_SELECTIONS_PER_ADD) {
-        disabledMessage = MAX_SELECTIONS_MESSAGE;
-    }
+    if (!userCanManagePicklists(user)) return null;
 
     return (
         <>
-            <DisableableMenuItem disabled={disabled} disabledMessage={disabledMessage} onClick={openChoose} placement="right">
-                Add to Picklist
-            </DisableableMenuItem>
+            <PicklistMenuItem itemText="Add to Picklist" open={openChoose} selectedRowIds={selectedRowIds} />
 
             {showChoose && (
                 <ChoosePicklistModal

packages/components/src/internal/components/picklist/PicklistCreationMenuItem.tsx

@@ -4,11 +4,9 @@ import { userCanManagePicklists } from '../../app/utils';
 
 import { User } from '../base/models/User';
 
-import { DisableableMenuItem } from '../samples/DisableableMenuItem';
-
 import { PicklistEditModal, PicklistEditModalProps } from './PicklistEditModal';
-import { MAX_SELECTIONS_MESSAGE, MAX_SELECTIONS_PER_ADD } from './constants';
 import { useModalState } from '../../hooks';
+import { PicklistMenuItem } from './PicklistMenuItem';
 
 interface Props extends Omit<PicklistEditModalProps, 'onCancel' | 'onFinish' | 'showNotification'> {
     asMenuItem?: boolean;
@@ -34,39 +32,13 @@ export const PicklistCreationMenuItem: FC<Props> = props => {
         onCreatePicklist?.();
     }, [close, onCreatePicklist]);
 
-    if (!userCanManagePicklists(user)) {
-        return null;
-    }
-
-    const disabled = !selectedRowIds || selectedRowIds.length === 0 || selectedRowIds.length > MAX_SELECTIONS_PER_ADD;
-    let disabledMessage: string;
-
-    if (!selectedRowIds || selectedRowIds.length === 0) {
-        disabledMessage = 'Select one or more samples.';
-    } else if (selectedRowIds.length > MAX_SELECTIONS_PER_ADD) {
-        disabledMessage = MAX_SELECTIONS_MESSAGE;
-    }
+    if (!userCanManagePicklists(user)) return null;
 
     return (
         <>
-            {asMenuItem && (
-                <DisableableMenuItem
-                    disabled={disabled}
-                    disabledMessage={disabledMessage}
-                    onClick={open}
-                    placement="right"
-                >
-                    {itemText}
-                </DisableableMenuItem>
-            )}
+            {asMenuItem && <PicklistMenuItem itemText={itemText} open={open} selectedRowIds={selectedRowIds} />}
             {!asMenuItem && (
-                <button
-                    className="btn btn-success"
-                    disabled={disabled}
-                    onClick={open}
-                    title={disabledMessage}
-                    type="button"
-                >
+                <button className="btn btn-success" onClick={open} type="button">
                     {itemText}
                 </button>
             )}

packages/components/src/internal/components/picklist/PicklistMenuItem.tsx

@@ -0,0 +1,26 @@
+import React, { FC, memo } from 'react';
+import { MAX_SELECTIONS_MESSAGE, MAX_SELECTIONS_PER_ADD } from './constants';
+import { DisableableMenuItem } from '../samples/DisableableMenuItem';
+
+interface Props {
+    itemText: string;
+    open: () => void;
+    selectedRowIds: number[] | string[];
+}
+export const PicklistMenuItem: FC<Props> = memo(({ itemText, open, selectedRowIds }) => {
+    const disabled = !selectedRowIds || selectedRowIds.length === 0 || selectedRowIds.length > MAX_SELECTIONS_PER_ADD;
+    let disabledMessage: string;
+
+    if (!selectedRowIds || selectedRowIds.length === 0) {
+        disabledMessage = 'Select one or more samples.';
+    } else if (selectedRowIds.length > MAX_SELECTIONS_PER_ADD) {
+        disabledMessage = MAX_SELECTIONS_MESSAGE;
+    }
+
+    return (
+        <DisableableMenuItem disabled={disabled} disabledMessage={disabledMessage} onClick={open} placement="right">
+            {itemText}
+        </DisableableMenuItem>
+    );
+});
+PicklistMenuItem.displayName = 'PicklistMenuItem';