Refactoring action buttons.

Author: krulis-martin

src/components/ReferenceSolutions/ReferenceSolutionActions/ReferenceSolutionActions.js

@@ -3,13 +3,11 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { useLocation, useNavigate } from 'react-router-dom';
 
+import ActionButtons, { prepareButtonDescriptors } from '../../widgets/ActionButtons';
 import withLinks from '../../../helpers/withLinks';
 
-import ActionButton from './ActionButton';
-import ActionDropdown from './ActionDropdown';
-
 /**
- * Action templates containing basic parameters: label, short (label), icon (name), variant (success if missing),
+ * Action templates containing basic parameters: label, icon (name), variant (success if missing),
  * and confirm (confirm yes/no message for a popover; no confirmation required if missing)
  */
 const actionsTemplates = {
@@ -58,7 +56,6 @@ const ReferenceSolutionActions = ({
   currentUserId = null,
   solution,
   visibilityPending = false,
-  captionAsTooltip = false,
   size = undefined,
   dropdown = false,
   setVisibility = null,
@@ -91,32 +88,16 @@ const ReferenceSolutionActions = ({
   };
 
   const pendingIndicators = { visibilityPending };
-  const actions = knownActions
-    .filter(a => actionHandlers[a])
-    .map(a => ({
-      ...actionsTemplates[a],
-      handler: actionHandlers[a],
-      pending: pendingIndicators[actionsTemplates[a].pending] || false,
-    }));
+  const actions = prepareButtonDescriptors(actionsTemplates, knownActions, actionHandlers, pendingIndicators);
 
-  return dropdown ? (
-    <ActionDropdown id={id} actions={actions} captionAsTooltip={captionAsTooltip} />
-  ) : (
-    actions.map(action => (
-      <ActionButton
-        key={action.icon}
-        id={id}
-        variant={action.variant}
-        icon={action.icon}
-        label={action.label}
-        shortLabel={action.short || action.label}
-        confirm={action.confirm}
-        pending={action.pending}
-        captionAsTooltip={captionAsTooltip}
-        size={size}
-        onClick={action.handler}
-      />
-    ))
+  return (
+    <ActionButtons
+      id={id}
+      actions={actions}
+      size={size}
+      dropdown={dropdown}
+      dropdownLabel={<FormattedMessage id="generic.update" defaultMessage="Update" />}
+    />
   );
 };
 
@@ -131,7 +112,6 @@ ReferenceSolutionActions.propTypes = {
   }),
   visibilityPending: PropTypes.bool,
   setVisibility: PropTypes.func,
-  captionAsTooltip: PropTypes.bool,
   size: PropTypes.string,
   dropdown: PropTypes.bool,
   links: PropTypes.object.isRequired,

src/components/Solutions/SolutionActions/ActionButton.js

@@ -3,26 +3,24 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { useLocation, useNavigate } from 'react-router-dom';
 
+import ActionButtons, { prepareButtonDescriptors, onlyLabels, onlyTooltips } from '../../widgets/ActionButtons';
 import withLinks from '../../../helpers/withLinks';
 import { safeGet } from '../../../helpers/common';
 
-import ActionButton from './ActionButton';
-import ActionDropdown from './ActionDropdown';
-
 /**
- * Action templates containing basic parameters: label, short (label), icon (name), variant (success if missing),
+ * Action templates containing basic parameters: label, label, tooltip icon (name), variant (success if missing),
  * and confirm (confirm yes/no message for a popover; no confirmation required if missing)
  */
 const actionsTemplates = {
   accept: {
-    short: <FormattedMessage id="app.solution.actions.accept" defaultMessage="Accept" />,
-    label: <FormattedMessage id="app.solution.actions.acceptLong" defaultMessage="Accept as Final" />,
+    label: <FormattedMessage id="app.solution.actions.accept" defaultMessage="Accept" />,
+    tooltip: <FormattedMessage id="app.solution.actions.acceptLong" defaultMessage="Accept as Final" />,
     icon: ['far', 'check-circle'],
     pending: 'acceptPending',
   },
   unaccept: {
-    short: <FormattedMessage id="app.solution.actions.revokeAccept" defaultMessage="Revoke" />,
-    label: <FormattedMessage id="app.solution.actions.revokeAcceptLong" defaultMessage="Revoke as Final" />,
+    label: <FormattedMessage id="app.solution.actions.revokeAccept" defaultMessage="Revoke" />,
+    tooltip: <FormattedMessage id="app.solution.actions.revokeAcceptLong" defaultMessage="Revoke as Final" />,
     icon: ['far', 'circle-xmark'],
     variant: 'warning',
     pending: 'acceptPending',
@@ -168,32 +166,16 @@ const SolutionActions = ({
   };
 
   const pendingIndicators = { acceptPending, updatePending, pointsPending };
-  const actions = knownActions
-    .filter(a => actionHandlers[a])
-    .map(a => ({
-      ...actionsTemplates[a],
-      handler: actionHandlers[a],
-      pending: pendingIndicators[actionsTemplates[a].pending] || false,
-    }));
+  const actions = prepareButtonDescriptors(actionsTemplates, knownActions, actionHandlers, pendingIndicators);
 
-  return dropdown ? (
-    <ActionDropdown id={id} actions={actions} captionAsTooltip={captionAsTooltip} />
-  ) : (
-    actions.map(action => (
-      <ActionButton
-        key={action.icon}
-        id={id}
-        variant={action.variant}
-        icon={action.icon}
-        label={action.label}
-        shortLabel={action.short || action.label}
-        confirm={action.confirm}
-        pending={action.pending}
-        captionAsTooltip={captionAsTooltip}
-        size={size}
-        onClick={action.handler}
-      />
-    ))
+  return (
+    <ActionButtons
+      id={id}
+      actions={captionAsTooltip ? onlyTooltips(actions) : onlyLabels(actions)}
+      size={size}
+      dropdown={dropdown}
+      dropdownLabel={captionAsTooltip ? null : <FormattedMessage id="generic.update" defaultMessage="Update" />}
+    />
   );
 };
 

src/components/Solutions/SolutionActions/ActionDropdown.js

@@ -97,9 +97,9 @@ const ForkExerciseForm = ({
           {groups => (
             <>
               <Field
-                name={'groupId'}
+                name="groupId"
                 component={SelectField}
-                label={''}
+                label=""
                 ignoreDirty
                 addEmptyOption={true}
                 emptyOptionCaption={formatMessage(messages.emptyOption)}

src/components/Solutions/SolutionActions/SolutionActions.js

@@ -39,7 +39,7 @@ const RelocateGroupForm = ({
     <Row className="align-items-end">
       <Col xs={12} sm>
         <Field
-          name={'groupId'}
+          name="groupId"
           component={SelectField}
           label={<FormattedMessage id="app.relocateGroupForm.parentGroup" defaultMessage="Parent Group:" />}
           options={groups

src/components/forms/ForkExerciseForm/ForkExerciseForm.js

@@ -5,41 +5,41 @@ import Button from '../../widgets/TheButton';
 import OptionalTooltipWrapper from '../../widgets/OptionalTooltipWrapper';
 import Icon, { LoadingIcon } from '../../icons';
 
-const ActionButton = ({
-  id,
-  variant = 'success',
-  icon,
-  label,
-  shortLabel = label,
-  confirm,
-  pending,
-  captionAsTooltip,
-  size,
-  onClick,
-}) =>
+const ActionButton = ({ id, variant = 'success', icon, label, confirm, pending, tooltip = null, size, onClick }) =>
   confirm ? (
     <Button variant={variant} size={size} onClick={onClick} disabled={pending} confirm={confirm} confirmId={id}>
-      {pending ? <LoadingIcon gapRight={!captionAsTooltip} /> : <Icon icon={icon} gapRight={!captionAsTooltip} />}
-      {!captionAsTooltip && label}
+      {pending ? (
+        <LoadingIcon gapRight={Boolean(label)} />
+      ) : icon && (typeof icon === 'string' || Array.isArray(icon)) ? (
+        <Icon icon={icon} gapRight={Boolean(label)} />
+      ) : (
+        icon
+      )}
+      {label}
     </Button>
   ) : (
-    <OptionalTooltipWrapper tooltip={label} hide={!captionAsTooltip}>
+    <OptionalTooltipWrapper tooltip={tooltip} hide={!tooltip}>
       <Button variant={variant} size={size} onClick={onClick} disabled={pending}>
-        {pending ? <LoadingIcon gapRight={!captionAsTooltip} /> : <Icon icon={icon} gapRight={!captionAsTooltip} />}
-        {!captionAsTooltip && shortLabel}
+        {pending ? (
+          <LoadingIcon gapRight={Boolean(label)} />
+        ) : icon && (typeof icon === 'string' || Array.isArray(icon)) ? (
+          <Icon icon={icon} gapRight={Boolean(label)} />
+        ) : (
+          icon
+        )}
+        {label}
       </Button>
     </OptionalTooltipWrapper>
   );
 
 ActionButton.propTypes = {
   id: PropTypes.string.isRequired,
   variant: PropTypes.string,
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
-  shortLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).isRequired,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.element]).isRequired,
   confirm: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   pending: PropTypes.bool,
-  captionAsTooltip: PropTypes.bool,
   size: PropTypes.string,
   onClick: PropTypes.func.isRequired,
 };