From 5c2a5647814f0b87a17689030bfb9172a11ab649 Mon Sep 17 00:00:00 2001
From: Martin Krulis <krulis@d3s.mff.cuni.cz>
Date: Mon, 12 Jun 2023 13:03:18 +0200
Subject: [PATCH] Refactoring solution actions (buttons) into one component
 (container) which works for top-level buttons as well as inline
 button-dropdown.

---
 .../SolutionsTable/SolutionsTableRow.js       |  19 +-
 .../Solutions/SolutionActions/ActionButton.js |  47 +++++
 .../SolutionActions/ActionDropdown.js         |  77 ++++++++
 .../SolutionActions/SolutionActions.js        | 168 ++++++++++++++++++
 .../Solutions/SolutionActions/index.js        |   2 +
 .../Solutions/SourceCodeBox/SourceCodeBox.js  |   2 -
 .../buttons/AcceptSolution/AcceptSolution.js  |  54 ------
 .../buttons/AcceptSolution/index.js           |   2 -
 .../buttons/ReviewSolution/ReviewSolution.js  | 128 -------------
 .../buttons/ReviewSolution/index.js           |   2 -
 .../EditAssignmentForm/InterpolationDialog.js |   2 +-
 .../AcceptedSolutionContainer.js              |  33 ----
 .../AcceptSolutionContainer/index.js          |   2 -
 .../ReviewSolutionContainer/index.js          |   2 -
 .../SolutionActionsContainer.js}              |  40 +++--
 .../SolutionActionsContainer/index.js         |   2 +
 src/pages/AssignmentStats/AssignmentStats.js  |  12 +-
 .../GroupUserSolutions/GroupUserSolutions.js  |  24 ++-
 src/pages/Solution/Solution.js                |  14 +-
 .../SolutionSourceCodes.js                    |  22 +--
 20 files changed, 353 insertions(+), 301 deletions(-)
 create mode 100644 src/components/Solutions/SolutionActions/ActionButton.js
 create mode 100644 src/components/Solutions/SolutionActions/ActionDropdown.js
 create mode 100644 src/components/Solutions/SolutionActions/SolutionActions.js
 create mode 100644 src/components/Solutions/SolutionActions/index.js
 delete mode 100644 src/components/buttons/AcceptSolution/AcceptSolution.js
 delete mode 100644 src/components/buttons/AcceptSolution/index.js
 delete mode 100644 src/components/buttons/ReviewSolution/ReviewSolution.js
 delete mode 100644 src/components/buttons/ReviewSolution/index.js
 delete mode 100644 src/containers/AcceptSolutionContainer/AcceptedSolutionContainer.js
 delete mode 100644 src/containers/AcceptSolutionContainer/index.js
 delete mode 100644 src/containers/ReviewSolutionContainer/index.js
 rename src/containers/{ReviewSolutionContainer/ReviewSolutionContainer.js => SolutionActionsContainer/SolutionActionsContainer.js} (51%)
 create mode 100644 src/containers/SolutionActionsContainer/index.js

diff --git a/src/components/Assignments/SolutionsTable/SolutionsTableRow.js b/src/components/Assignments/SolutionsTable/SolutionsTableRow.js
index 84cf2b7cc..209d8d542 100644
--- a/src/components/Assignments/SolutionsTable/SolutionsTableRow.js
+++ b/src/components/Assignments/SolutionsTable/SolutionsTableRow.js
@@ -7,9 +7,8 @@ import classnames from 'classnames';
 
 import Points from './Points';
 import EnvironmentsListItem from '../../helpers/EnvironmentsList/EnvironmentsListItem';
-import DeleteSolutionButtonContainer from '../../../containers/DeleteSolutionButtonContainer/DeleteSolutionButtonContainer';
-import AcceptSolutionContainer from '../../../containers/AcceptSolutionContainer';
-import ReviewSolutionContainer from '../../../containers/ReviewSolutionContainer';
+import DeleteSolutionButtonContainer from '../../../containers/DeleteSolutionButtonContainer';
+import SolutionActionsContainer from '../../../containers/SolutionActionsContainer';
 
 import { DetailIcon, CodeFileIcon } from '../../icons';
 import DateTime from '../../widgets/DateTime';
@@ -162,18 +161,8 @@ const SolutionsTableRow = ({
                 </>
               )}
 
-              {permissionHints && permissionHints.setFlag && (
-                <AcceptSolutionContainer
-                  id={id}
-                  locale={locale}
-                  captionAsTooltip={compact}
-                  shortLabel={!compact}
-                  size="xs"
-                />
-              )}
-
-              {permissionHints && permissionHints.review && (
-                <ReviewSolutionContainer id={id} locale={locale} captionAsTooltip={compact} size="xs" />
+              {permissionHints && (permissionHints.setFlag || permissionHints.review) && (
+                <SolutionActionsContainer id={id} captionAsTooltip={compact} showAllButtons dropdown />
               )}
 
               {permissionHints && permissionHints.delete && (
diff --git a/src/components/Solutions/SolutionActions/ActionButton.js b/src/components/Solutions/SolutionActions/ActionButton.js
new file mode 100644
index 000000000..0bb2b9e82
--- /dev/null
+++ b/src/components/Solutions/SolutionActions/ActionButton.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+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,
+}) =>
+  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}
+    </Button>
+  ) : (
+    <OptionalTooltipWrapper tooltip={label} hide={!captionAsTooltip}>
+      <Button variant={variant} size={size} onClick={onClick} disabled={pending}>
+        {pending ? <LoadingIcon gapRight={!captionAsTooltip} /> : <Icon icon={icon} gapRight={!captionAsTooltip} />}
+        {!captionAsTooltip && shortLabel}
+      </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,
+  confirm: PropTypes.string,
+  pending: PropTypes.bool,
+  captionAsTooltip: PropTypes.bool,
+  size: PropTypes.string,
+  onClick: PropTypes.func.isRequired,
+};
+
+export default ActionButton;
diff --git a/src/components/Solutions/SolutionActions/ActionDropdown.js b/src/components/Solutions/SolutionActions/ActionDropdown.js
new file mode 100644
index 000000000..b4cce628d
--- /dev/null
+++ b/src/components/Solutions/SolutionActions/ActionDropdown.js
@@ -0,0 +1,77 @@
+import React, { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { Dropdown, Overlay, Popover } from 'react-bootstrap';
+
+import Button, { TheButtonGroup } from '../../widgets/TheButton';
+import Icon, { CloseIcon, EditIcon, LoadingIcon, SuccessIcon } from '../../icons';
+
+const ActionDropdown = ({ actions, placement = 'bottom', id, captionAsTooltip }) => {
+  const [confirmAction, setConfirmAction] = useState(null);
+  const target = useRef(null);
+
+  return (
+    <Dropdown as="span">
+      <Dropdown.Toggle variant="warning" size="xs" ref={target}>
+        <EditIcon gapRight={!captionAsTooltip} />
+        {!captionAsTooltip && <FormattedMessage id="generic.update" defaultMessage="Update" />}
+      </Dropdown.Toggle>
+
+      <Dropdown.Menu>
+        {actions.map(action => (
+          <Dropdown.Item
+            key={action.icon}
+            onClick={action.confirm ? () => setConfirmAction(action) : action.handler}
+            disabled={action.pending}>
+            <small>
+              {action.pending ? (
+                <LoadingIcon gapRight />
+              ) : (
+                <Icon icon={action.icon} className={`text-${action.variant || 'success'}`} gapRight />
+              )}
+              {action.label}
+            </small>
+          </Dropdown.Item>
+        ))}
+      </Dropdown.Menu>
+
+      <Overlay target={target} placement={placement} show={target !== null && confirmAction !== null}>
+        <Popover id={id}>
+          <Popover.Title>{confirmAction && confirmAction.confirm}</Popover.Title>
+          <Popover.Content className="text-center">
+            <TheButtonGroup>
+              <Button
+                onClick={() => {
+                  confirmAction.handler();
+                  setConfirmAction(null);
+                }}
+                size="sm"
+                variant="success">
+                <SuccessIcon gapRight />
+                <FormattedMessage id="app.confirm.yes" defaultMessage="Yes" />
+              </Button>
+              <Button
+                onClick={() => {
+                  setConfirmAction(null);
+                }}
+                size="sm"
+                variant="danger">
+                <CloseIcon gapRight />
+                <FormattedMessage id="app.confirm.no" defaultMessage="No" />
+              </Button>
+            </TheButtonGroup>
+          </Popover.Content>
+        </Popover>
+      </Overlay>
+    </Dropdown>
+  );
+};
+
+ActionDropdown.propTypes = {
+  actions: PropTypes.array.isRequired,
+  placement: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  captionAsTooltip: PropTypes.bool,
+};
+
+export default ActionDropdown;
diff --git a/src/components/Solutions/SolutionActions/SolutionActions.js b/src/components/Solutions/SolutionActions/SolutionActions.js
new file mode 100644
index 000000000..7ff830078
--- /dev/null
+++ b/src/components/Solutions/SolutionActions/SolutionActions.js
@@ -0,0 +1,168 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { withRouter } from 'react-router';
+
+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),
+ * and confirm (confirm yes/no message for a popover; no confirmation required if missing)
+ */
+const actionsTemplates = {
+  accept: {
+    short: <FormattedMessage id="app.acceptSolution.notAcceptedShort" defaultMessage="Accept" />,
+    label: <FormattedMessage id="app.acceptSolution.notAccepted" defaultMessage="Accept as Final" />,
+    icon: ['far', 'check-circle'],
+    pending: 'acceptPending',
+  },
+  unaccept: {
+    short: <FormattedMessage id="app.acceptSolution.acceptedShort" defaultMessage="Revoke" />,
+    label: <FormattedMessage id="app.acceptSolution.accepted" defaultMessage="Revoke as Final" />,
+    icon: ['far', 'circle-xmark'],
+    variant: 'warning',
+    pending: 'acceptPending',
+  },
+
+  // review actions
+  open: {
+    label: <FormattedMessage id="app.reviewSolutionButtons.open" defaultMessage="Start Review" />,
+    icon: 'microscope',
+    variant: 'info',
+  },
+  reopen: {
+    label: <FormattedMessage id="app.reviewSolutionButtons.reopen" defaultMessage="Reopen Review" />,
+    icon: 'person-digging',
+    variant: 'warning',
+  },
+  openClose: {
+    label: <FormattedMessage id="app.reviewSolutionButtons.markReviewed" defaultMessage="Mark as Reviewed" />,
+    icon: 'file-circle-check',
+  },
+  close: {
+    label: <FormattedMessage id="app.reviewSolutionButtons.close" defaultMessage="Close Review" />,
+    icon: 'boxes-packing',
+  },
+  delete: {
+    label: <FormattedMessage id="app.reviewSolutionButtons.delete" defaultMessage="Erase Review" />,
+    icon: 'trash',
+    variant: 'danger',
+    confirm: (
+      <FormattedMessage
+        id="app.reviewSolutionButtons.deleteConfirm"
+        defaultMessage="All review comments will be erased as well. Do you wish to proceed?"
+      />
+    ),
+  },
+};
+
+const knownActions = ['accept', 'unaccept', 'open', 'reopen', 'openClose', 'close', 'delete'];
+
+const SolutionActions = ({
+  id,
+  solution,
+  acceptPending = false,
+  showAllButtons = false,
+  updatePending = false,
+  captionAsTooltip = false,
+  size = undefined,
+  dropdown = false,
+  setAccepted = null,
+  setReviewState = null,
+  deleteReview = null,
+  history: { push },
+  location: { pathname },
+  links: { SOLUTION_SOURCE_CODES_URI_FACTORY },
+}) => {
+  const review = solution && solution.review;
+  const assignmentId = solution && solution.assignmentId;
+  const accepted = solution && solution.accepted;
+  const permissionHints = solution && solution.permissionHints;
+  if (!permissionHints.setFlag) {
+    setAccepted = null;
+  }
+  if (!permissionHints.review) {
+    setReviewState = deleteReview = null;
+  }
+
+  const reviewPageUri = SOLUTION_SOURCE_CODES_URI_FACTORY(assignmentId, id);
+  const isOnReviewPage = pathname === SOLUTION_SOURCE_CODES_URI_FACTORY(assignmentId, id);
+
+  const actionHandlers = {
+    accept: !accepted && setAccepted && (() => setAccepted(true)),
+    unaccept: accepted && setAccepted && (() => setAccepted(false)),
+    open: setReviewState && (!review || !review.startedAt) && (() => setReviewState(false)),
+    reopen: setReviewState && review && review.closedAt && (() => setReviewState(false)),
+    openClose: setReviewState && (!review || !review.startedAt) && showAllButtons && (() => setReviewState(true)),
+    close: setReviewState && review && review.startedAt && !review.closedAt && (() => setReviewState(true)),
+    delete: showAllButtons && review && review.startedAt && deleteReview,
+  };
+
+  if (!isOnReviewPage) {
+    actionHandlers.open = actionHandlers.open && (() => actionHandlers.open().then(() => push(reviewPageUri)));
+    actionHandlers.reopen = actionHandlers.reopen && (() => actionHandlers.reopen().then(() => push(reviewPageUri)));
+  }
+
+  const actions = knownActions
+    .filter(a => actionHandlers[a])
+    .map(a => ({
+      ...actionsTemplates[a],
+      handler: actionHandlers[a],
+      pending: actionsTemplates[a].pending === 'acceptPending' ? acceptPending : updatePending,
+    }));
+
+  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}
+      />
+    ))
+  );
+};
+
+SolutionActions.propTypes = {
+  id: PropTypes.string.isRequired,
+  solution: PropTypes.shape({
+    accepted: PropTypes.bool,
+    assignmentId: PropTypes.string.isRequired,
+    review: PropTypes.shape({
+      startedAt: PropTypes.number,
+      closedAt: PropTypes.number,
+      issues: PropTypes.number,
+    }),
+    permissionHints: PropTypes.object,
+  }),
+  showAllButtons: PropTypes.bool,
+  acceptPending: PropTypes.bool,
+  updatePending: PropTypes.bool,
+  captionAsTooltip: PropTypes.bool,
+  size: PropTypes.string,
+  dropdown: PropTypes.bool,
+  setAccepted: PropTypes.func,
+  setReviewState: PropTypes.func,
+  deleteReview: PropTypes.func,
+  history: PropTypes.shape({
+    push: PropTypes.func.isRequired,
+  }),
+  location: PropTypes.shape({
+    pathname: PropTypes.string.isRequired,
+  }).isRequired,
+  links: PropTypes.object.isRequired,
+};
+
+export default withLinks(withRouter(SolutionActions));
diff --git a/src/components/Solutions/SolutionActions/index.js b/src/components/Solutions/SolutionActions/index.js
new file mode 100644
index 000000000..ca166dd8e
--- /dev/null
+++ b/src/components/Solutions/SolutionActions/index.js
@@ -0,0 +1,2 @@
+import SolutionActions from './SolutionActions';
+export default SolutionActions;
diff --git a/src/components/Solutions/SourceCodeBox/SourceCodeBox.js b/src/components/Solutions/SourceCodeBox/SourceCodeBox.js
index 70589be82..c5b06dd5e 100644
--- a/src/components/Solutions/SourceCodeBox/SourceCodeBox.js
+++ b/src/components/Solutions/SourceCodeBox/SourceCodeBox.js
@@ -30,7 +30,6 @@ const SourceCodeBox = ({
   parentId = id,
   solutionId,
   name,
-  titleSuffix = '',
   entryName = null,
   download = null,
   diffWith = null,
@@ -255,7 +254,6 @@ SourceCodeBox.propTypes = {
   reviewClosed: PropTypes.bool,
   collapsable: PropTypes.bool,
   isOpen: PropTypes.bool,
-  titleSuffix: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
 };
 
 export default SourceCodeBox;
diff --git a/src/components/buttons/AcceptSolution/AcceptSolution.js b/src/components/buttons/AcceptSolution/AcceptSolution.js
deleted file mode 100644
index ccc455830..000000000
--- a/src/components/buttons/AcceptSolution/AcceptSolution.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import Button from '../../widgets/TheButton';
-import OptionalTooltipWrapper from '../../widgets/OptionalTooltipWrapper';
-import Icon from '../../icons';
-
-const AcceptSolution = ({
-  accepted,
-  acceptPending,
-  accept,
-  unaccept,
-  shortLabel = false,
-  captionAsTooltip = false,
-  size = undefined,
-}) => {
-  const label =
-    accepted === true ? (
-      shortLabel ? (
-        <FormattedMessage id="app.acceptSolution.acceptedShort" defaultMessage="Revoke" />
-      ) : (
-        <FormattedMessage id="app.acceptSolution.accepted" defaultMessage="Revoke as Final" />
-      )
-    ) : shortLabel ? (
-      <FormattedMessage id="app.acceptSolution.notAcceptedShort" defaultMessage="Accept" />
-    ) : (
-      <FormattedMessage id="app.acceptSolution.notAccepted" defaultMessage="Accept as Final" />
-    );
-
-  return (
-    <OptionalTooltipWrapper tooltip={label} hide={!captionAsTooltip}>
-      <Button
-        variant={accepted ? 'warning' : 'success'}
-        size={size}
-        onClick={accepted ? unaccept : accept}
-        disabled={acceptPending}>
-        <Icon icon={accepted ? ['far', 'circle-xmark'] : ['far', 'check-circle']} gapRight={!captionAsTooltip} />
-        {!captionAsTooltip && label}
-      </Button>
-    </OptionalTooltipWrapper>
-  );
-};
-
-AcceptSolution.propTypes = {
-  accepted: PropTypes.bool.isRequired,
-  acceptPending: PropTypes.bool.isRequired,
-  accept: PropTypes.func.isRequired,
-  unaccept: PropTypes.func.isRequired,
-  shortLabel: PropTypes.bool,
-  captionAsTooltip: PropTypes.bool,
-  size: PropTypes.string,
-};
-
-export default AcceptSolution;
diff --git a/src/components/buttons/AcceptSolution/index.js b/src/components/buttons/AcceptSolution/index.js
deleted file mode 100644
index ae55e9f4b..000000000
--- a/src/components/buttons/AcceptSolution/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import AcceptSolution from './AcceptSolution';
-export default AcceptSolution;
diff --git a/src/components/buttons/ReviewSolution/ReviewSolution.js b/src/components/buttons/ReviewSolution/ReviewSolution.js
deleted file mode 100644
index 1eccb9412..000000000
--- a/src/components/buttons/ReviewSolution/ReviewSolution.js
+++ /dev/null
@@ -1,128 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import { withRouter } from 'react-router';
-
-import Button from '../../widgets/TheButton';
-import OptionalTooltipWrapper from '../../widgets/OptionalTooltipWrapper';
-import Icon, { DeleteIcon } from '../../icons';
-import withLinks from '../../../helpers/withLinks';
-
-const ReviewSolution = ({
-  id,
-  assignmentId,
-  review = null,
-  showAllButtons = false,
-  updatePending = false,
-  captionAsTooltip = false,
-  size = undefined,
-  openReview = null,
-  closeReview = null,
-  deleteReview = null,
-  history: { push },
-  location: { pathname },
-  links: { SOLUTION_SOURCE_CODES_URI_FACTORY },
-}) => {
-  const reviewPageUri = SOLUTION_SOURCE_CODES_URI_FACTORY(assignmentId, id);
-  const isOnReviewPage = pathname === SOLUTION_SOURCE_CODES_URI_FACTORY(assignmentId, id);
-
-  const openLabel =
-    !review || !review.startedAt ? (
-      <FormattedMessage id="app.reviewSolutionButtons.open" defaultMessage="Start Review" />
-    ) : (
-      <FormattedMessage id="app.reviewSolutionButtons.reopen" defaultMessage="Reopen Review" />
-    );
-
-  return (
-    <>
-      {openReview && Boolean(!review || !review.startedAt || review.closedAt) && (
-        <OptionalTooltipWrapper tooltip={openLabel} hide={!captionAsTooltip}>
-          <Button
-            variant={!review || !review.startedAt ? 'info' : 'warning'}
-            size={size}
-            onClick={
-              isOnReviewPage
-                ? openReview
-                : () => {
-                    openReview().then(() => push(reviewPageUri));
-                  }
-            }
-            disabled={updatePending}>
-            <Icon icon={!review || !review.startedAt ? 'microscope' : 'person-digging'} gapRight={!captionAsTooltip} />
-            {!captionAsTooltip && openLabel}
-          </Button>
-        </OptionalTooltipWrapper>
-      )}
-
-      {closeReview && showAllButtons && Boolean(!review || !review.startedAt) && (
-        <OptionalTooltipWrapper
-          tooltip={<FormattedMessage id="app.reviewSolutionButtons.markReviewed" defaultMessage="Mark as Reviewed" />}
-          hide={!captionAsTooltip}>
-          <Button variant="success" size={size} onClick={closeReview} disabled={updatePending}>
-            <Icon icon="file-circle-check" gapRight={!captionAsTooltip} />
-            {!captionAsTooltip && (
-              <FormattedMessage id="app.reviewSolutionButtons.markReviewed" defaultMessage="Mark as Reviewed" />
-            )}
-          </Button>
-        </OptionalTooltipWrapper>
-      )}
-
-      {closeReview && Boolean(review && review.startedAt && !review.closedAt) && (
-        <OptionalTooltipWrapper
-          tooltip={<FormattedMessage id="app.reviewSolutionButtons.close" defaultMessage="Close Review" />}
-          hide={!captionAsTooltip}>
-          <Button variant="success" size={size} onClick={closeReview} disabled={updatePending}>
-            <Icon icon="boxes-packing" gapRight={!captionAsTooltip} />
-            {!captionAsTooltip && (
-              <FormattedMessage id="app.reviewSolutionButtons.close" defaultMessage="Close Review" />
-            )}
-          </Button>
-        </OptionalTooltipWrapper>
-      )}
-
-      {deleteReview && showAllButtons && Boolean(review && review.startedAt) && (
-        <Button
-          variant="danger"
-          size={size}
-          onClick={deleteReview}
-          disabled={updatePending}
-          confirm={
-            <FormattedMessage
-              id="app.reviewSolutionButtons.deleteConfirm"
-              defaultMessage="All review comments will be erased as well. Do you wish to proceed?"
-            />
-          }
-          confirmId={id}>
-          <DeleteIcon gapRight={!captionAsTooltip} />
-          {<FormattedMessage id="app.reviewSolutionButtons.delete" defaultMessage="Erase Review" />}
-        </Button>
-      )}
-    </>
-  );
-};
-
-ReviewSolution.propTypes = {
-  id: PropTypes.string.isRequired,
-  assignmentId: PropTypes.string.isRequired,
-  review: PropTypes.shape({
-    startedAt: PropTypes.number,
-    closedAt: PropTypes.number,
-    issues: PropTypes.number,
-  }),
-  showAllButtons: PropTypes.bool,
-  updatePending: PropTypes.bool,
-  captionAsTooltip: PropTypes.bool,
-  size: PropTypes.string,
-  openReview: PropTypes.func,
-  closeReview: PropTypes.func,
-  deleteReview: PropTypes.func,
-  history: PropTypes.shape({
-    push: PropTypes.func.isRequired,
-  }),
-  location: PropTypes.shape({
-    pathname: PropTypes.string.isRequired,
-  }).isRequired,
-  links: PropTypes.object.isRequired,
-};
-
-export default withLinks(withRouter(ReviewSolution));
diff --git a/src/components/buttons/ReviewSolution/index.js b/src/components/buttons/ReviewSolution/index.js
deleted file mode 100644
index d0583c209..000000000
--- a/src/components/buttons/ReviewSolution/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import ReviewSolution from './ReviewSolution';
-export default ReviewSolution;
diff --git a/src/components/forms/EditAssignmentForm/InterpolationDialog.js b/src/components/forms/EditAssignmentForm/InterpolationDialog.js
index 37881adb8..2e05c1f65 100644
--- a/src/components/forms/EditAssignmentForm/InterpolationDialog.js
+++ b/src/components/forms/EditAssignmentForm/InterpolationDialog.js
@@ -152,7 +152,7 @@ const InterpolationDialog = ({
               }}
               disabled={!interval}>
               <SendIcon gapRight />
-              <FormattedMessage id="generic.update" defaultMessage="Update" />
+              <FormattedMessage id="" defaultMessage="Update" />
             </Button>
             <Button variant="secondary" onClick={() => setOpen(false)}>
               <CloseIcon gapRight />
diff --git a/src/containers/AcceptSolutionContainer/AcceptedSolutionContainer.js b/src/containers/AcceptSolutionContainer/AcceptedSolutionContainer.js
deleted file mode 100644
index 431518b74..000000000
--- a/src/containers/AcceptSolutionContainer/AcceptedSolutionContainer.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-
-import AcceptSolution from '../../components/buttons/AcceptSolution';
-import { setSolutionFlag } from '../../redux/modules/solutions';
-import { isAccepted, isSetFlagPending } from '../../redux/selectors/solutions';
-
-const AcceptSolutionContainer = ({ accepted, acceptPending, accept, unaccept, ...props }) => {
-  return (
-    <AcceptSolution accepted={accepted} acceptPending={acceptPending} accept={accept} unaccept={unaccept} {...props} />
-  );
-};
-
-AcceptSolutionContainer.propTypes = {
-  id: PropTypes.string.isRequired,
-  accepted: PropTypes.bool.isRequired,
-  acceptPending: PropTypes.bool.isRequired,
-  accept: PropTypes.func.isRequired,
-  unaccept: PropTypes.func.isRequired,
-};
-
-const mapStateToProps = (state, { id }) => ({
-  accepted: isAccepted(state, id),
-  acceptPending: isSetFlagPending(state, id, 'accepted'),
-});
-
-const mapDispatchToProps = (dispatch, { id }) => ({
-  accept: () => dispatch(setSolutionFlag(id, 'accepted', true)),
-  unaccept: () => dispatch(setSolutionFlag(id, 'accepted', false)),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(AcceptSolutionContainer);
diff --git a/src/containers/AcceptSolutionContainer/index.js b/src/containers/AcceptSolutionContainer/index.js
deleted file mode 100644
index 0f72d417a..000000000
--- a/src/containers/AcceptSolutionContainer/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import AcceptedSolutionContainer from './AcceptedSolutionContainer';
-export default AcceptedSolutionContainer;
diff --git a/src/containers/ReviewSolutionContainer/index.js b/src/containers/ReviewSolutionContainer/index.js
deleted file mode 100644
index c21aa63a4..000000000
--- a/src/containers/ReviewSolutionContainer/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import ReviewSolutionContainer from './ReviewSolutionContainer';
-export default ReviewSolutionContainer;
diff --git a/src/containers/ReviewSolutionContainer/ReviewSolutionContainer.js b/src/containers/SolutionActionsContainer/SolutionActionsContainer.js
similarity index 51%
rename from src/containers/ReviewSolutionContainer/ReviewSolutionContainer.js
rename to src/containers/SolutionActionsContainer/SolutionActionsContainer.js
index 2a5112303..f11b145b0 100644
--- a/src/containers/ReviewSolutionContainer/ReviewSolutionContainer.js
+++ b/src/containers/SolutionActionsContainer/SolutionActionsContainer.js
@@ -3,25 +3,35 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
-import ReviewSolution from '../../components/buttons/ReviewSolution';
+import SolutionActions from '../../components/Solutions/SolutionActions';
 import ResourceRenderer from '../../components/helpers/ResourceRenderer';
 
 import { setSolutionReviewState, deleteSolutionReview } from '../../redux/modules/solutionReviews';
-import { getSolution } from '../../redux/selectors/solutions';
+import { getSolution, isSetFlagPending } from '../../redux/selectors/solutions';
 import { isSolutionReviewUpdatePending } from '../../redux/selectors/solutionReviews';
+import { setSolutionFlag } from '../../redux/modules/solutions';
 
-const ReviewSolutionContainer = ({ id, solution, updatePending, openReview, closeReview, deleteReview, ...props }) => {
+const SolutionActionsContainer = ({
+  id,
+  solution,
+  updatePending,
+  setReviewState,
+  deleteReview,
+  acceptPending,
+  setAccepted,
+  ...props
+}) => {
   return (
     <ResourceRenderer resource={solution}>
       {solution => (
-        <ReviewSolution
+        <SolutionActions
           {...props}
           id={id}
-          assignmentId={solution.assignmentId}
-          review={solution.review}
+          solution={solution}
+          acceptPending={acceptPending}
           updatePending={updatePending}
-          openReview={openReview}
-          closeReview={closeReview}
+          setAccepted={setAccepted}
+          setReviewState={setReviewState}
           deleteReview={deleteReview}
         />
       )}
@@ -29,24 +39,26 @@ const ReviewSolutionContainer = ({ id, solution, updatePending, openReview, clos
   );
 };
 
-ReviewSolutionContainer.propTypes = {
+SolutionActionsContainer.propTypes = {
   id: PropTypes.string.isRequired,
   solution: ImmutablePropTypes.map,
+  acceptPending: PropTypes.bool.isRequired,
   updatePending: PropTypes.bool,
-  openReview: PropTypes.func.isRequired,
-  closeReview: PropTypes.func.isRequired,
+  setAccepted: PropTypes.func.isRequired,
+  setReviewState: PropTypes.func.isRequired,
   deleteReview: PropTypes.func.isRequired,
 };
 
 const mapStateToProps = (state, { id }) => ({
   solution: getSolution(state, id),
+  acceptPending: isSetFlagPending(state, id, 'accepted'),
   updatePending: isSolutionReviewUpdatePending(state, id),
 });
 
 const mapDispatchToProps = (dispatch, { id }) => ({
-  openReview: () => dispatch(setSolutionReviewState(id, false)),
-  closeReview: () => dispatch(setSolutionReviewState(id, true)),
+  setAccepted: accepted => dispatch(setSolutionFlag(id, 'accepted', accepted)),
+  setReviewState: closed => dispatch(setSolutionReviewState(id, closed)),
   deleteReview: () => dispatch(deleteSolutionReview(id)),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(ReviewSolutionContainer);
+export default connect(mapStateToProps, mapDispatchToProps)(SolutionActionsContainer);
diff --git a/src/containers/SolutionActionsContainer/index.js b/src/containers/SolutionActionsContainer/index.js
new file mode 100644
index 000000000..a9104f825
--- /dev/null
+++ b/src/containers/SolutionActionsContainer/index.js
@@ -0,0 +1,2 @@
+import SolutionActionsContainer from './SolutionActionsContainer';
+export default SolutionActionsContainer;
diff --git a/src/pages/AssignmentStats/AssignmentStats.js b/src/pages/AssignmentStats/AssignmentStats.js
index 8438e1419..f82fccc66 100644
--- a/src/pages/AssignmentStats/AssignmentStats.js
+++ b/src/pages/AssignmentStats/AssignmentStats.js
@@ -9,8 +9,7 @@ import { defaultMemoize } from 'reselect';
 
 import { ResubmitAllSolutionsContainer } from '../../containers/ResubmitSolutionContainer';
 import DeleteSolutionButtonContainer from '../../containers/DeleteSolutionButtonContainer/DeleteSolutionButtonContainer';
-import AcceptSolutionContainer from '../../containers/AcceptSolutionContainer';
-import ReviewSolutionContainer from '../../containers/ReviewSolutionContainer';
+import SolutionActionsContainer from '../../containers/SolutionActionsContainer';
 import CommentThreadContainer from '../../containers/CommentThreadContainer';
 
 import Page from '../../components/layout/Page';
@@ -224,12 +223,11 @@ const prepareTableColumnDescriptors = defaultMemoize((loggedUserId, assignmentId
               </Link>
             </>
           )}
-          {solution.permissionHints && solution.permissionHints.setFlag && (
-            <AcceptSolutionContainer id={solution.id} locale={locale} shortLabel size="xs" />
-          )}
-          {solution.permissionHints && solution.permissionHints.review && (
-            <ReviewSolutionContainer id={solution.id} locale={locale} size="xs" />
+
+          {solution.permissionHints && (solution.permissionHints.setFlag || solution.permissionHints.review) && (
+            <SolutionActionsContainer id={solution.id} showAllButtons dropdown />
           )}
+
           {solution.permissionHints && solution.permissionHints.delete && (
             <DeleteSolutionButtonContainer id={solution.id} groupId={groupId} size="xs" />
           )}
diff --git a/src/pages/GroupUserSolutions/GroupUserSolutions.js b/src/pages/GroupUserSolutions/GroupUserSolutions.js
index fd0d3aafd..426e59b23 100644
--- a/src/pages/GroupUserSolutions/GroupUserSolutions.js
+++ b/src/pages/GroupUserSolutions/GroupUserSolutions.js
@@ -8,8 +8,7 @@ import { Link } from 'react-router-dom';
 import { defaultMemoize } from 'reselect';
 
 import DeleteSolutionButtonContainer from '../../containers/DeleteSolutionButtonContainer/DeleteSolutionButtonContainer';
-import AcceptSolutionContainer from '../../containers/AcceptSolutionContainer';
-import ReviewSolutionContainer from '../../containers/ReviewSolutionContainer';
+import SolutionActionsContainer from '../../containers/SolutionActionsContainer';
 
 import Page from '../../components/layout/Page';
 import { GroupNavigation } from '../../components/layout/Navigation';
@@ -200,24 +199,23 @@ const prepareTableColumnDescriptors = defaultMemoize((assignments, groupId, loca
       cellRenderer: solution => (
         <TheButtonGroup>
           {solution.permissionHints && solution.permissionHints.viewDetail && (
-            <Link to={SOLUTION_DETAIL_URI_FACTORY(solution.assignmentId, solution.id)}>
-              <Button size="xs" variant="secondary">
-                <DetailIcon gapRight />
-                <FormattedMessage id="generic.detail" defaultMessage="Detail" />
-              </Button>
+            <>
+              <Link to={SOLUTION_DETAIL_URI_FACTORY(solution.assignmentId, solution.id)}>
+                <Button size="xs" variant="secondary">
+                  <DetailIcon gapRight />
+                  <FormattedMessage id="generic.detail" defaultMessage="Detail" />
+                </Button>
+              </Link>
               <Link to={SOLUTION_SOURCE_CODES_URI_FACTORY(solution.assignmentId, solution.id)}>
                 <Button size="xs" variant="primary">
                   <CodeFileIcon fixedWidth gapRight />
                   <FormattedMessage id="generic.files" defaultMessage="Files" />
                 </Button>
               </Link>
-            </Link>
-          )}
-          {solution.permissionHints && solution.permissionHints.setFlag && (
-            <AcceptSolutionContainer id={solution.id} locale={locale} shortLabel size="xs" />
+            </>
           )}
-          {solution.permissionHints && solution.permissionHints.review && (
-            <ReviewSolutionContainer id={solution.id} locale={locale} size="xs" />
+          {solution.permissionHints && (solution.permissionHints.setFlag || solution.permissionHints.review) && (
+            <SolutionActionsContainer id={solution.id} showAllButtons dropdown />
           )}
           {solution.permissionHints && solution.permissionHints.delete && (
             <DeleteSolutionButtonContainer id={solution.id} groupId={groupId} size="xs" />
diff --git a/src/pages/Solution/Solution.js b/src/pages/Solution/Solution.js
index 9d10097c0..03f27d74a 100644
--- a/src/pages/Solution/Solution.js
+++ b/src/pages/Solution/Solution.js
@@ -10,8 +10,7 @@ import Page from '../../components/layout/Page';
 import { AssignmentSolutionNavigation } from '../../components/layout/Navigation';
 import ResourceRenderer from '../../components/helpers/ResourceRenderer';
 import SolutionDetail, { FailedSubmissionDetail } from '../../components/Solutions/SolutionDetail';
-import AcceptSolutionContainer from '../../containers/AcceptSolutionContainer';
-import ReviewSolutionContainer from '../../containers/ReviewSolutionContainer';
+import SolutionActionsContainer from '../../containers/SolutionActionsContainer';
 import ResubmitSolutionContainer from '../../containers/ResubmitSolutionContainer';
 import FetchManyResourceRenderer from '../../components/helpers/FetchManyResourceRenderer';
 import { TheButtonGroup } from '../../components/widgets/TheButton';
@@ -142,14 +141,9 @@ class Solution extends Component {
                 hasPermissions(assignment, 'resubmitSubmissions')) && (
                 <Row>
                   <Col className="mb-3" xs={12} lg={true}>
-                    {hasPermissions(solution, 'setFlag') && (
-                      <AcceptSolutionContainer id={solution.id} locale={locale} />
-                    )}
-                    {hasPermissions(solution, 'review') && (
-                      <TheButtonGroup className="ml-2 text-nowrap">
-                        <ReviewSolutionContainer id={solution.id} locale={locale} />
-                      </TheButtonGroup>
-                    )}
+                    <TheButtonGroup>
+                      <SolutionActionsContainer id={solution.id} />
+                    </TheButtonGroup>
                   </Col>
 
                   <Col xs={12} lg="auto" className="mb-3">
diff --git a/src/pages/SolutionSourceCodes/SolutionSourceCodes.js b/src/pages/SolutionSourceCodes/SolutionSourceCodes.js
index 6c0603fe8..8fbcbabfb 100644
--- a/src/pages/SolutionSourceCodes/SolutionSourceCodes.js
+++ b/src/pages/SolutionSourceCodes/SolutionSourceCodes.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
-import { FormattedMessage, injectIntl } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 import { Row, Col, Modal, Tabs, Tab, Table } from 'react-bootstrap';
 import { defaultMemoize } from 'reselect';
 import { withRouter } from 'react-router';
@@ -22,8 +22,7 @@ import {
   StopIcon,
   SwapIcon,
 } from '../../components/icons';
-import AcceptSolutionContainer from '../../containers/AcceptSolutionContainer';
-import ReviewSolutionContainer from '../../containers/ReviewSolutionContainer';
+import SolutionActionsContainer from '../../containers/SolutionActionsContainer';
 import SourceCodeBox from '../../components/Solutions/SourceCodeBox';
 import RecentlyVisited from '../../components/Solutions/RecentlyVisited';
 import { registerSolutionVisit } from '../../components/Solutions/RecentlyVisited/functions';
@@ -226,7 +225,6 @@ class SolutionSourceCodes extends Component {
       match: {
         params: { solutionId, assignmentId, secondSolutionId },
       },
-      intl: { locale },
     } = this.props;
 
     const diffMode =
@@ -326,16 +324,9 @@ class SolutionSourceCodes extends Component {
                 <Row className="justify-content-sm-between">
                   <Col sm="auto" className="mb-3">
                     {!diffMode && (
-                      <>
-                        {hasPermissions(solution, 'setFlag') && (
-                          <AcceptSolutionContainer id={solution.id} locale={locale} />
-                        )}
-                        {hasPermissions(solution, 'review') && (
-                          <TheButtonGroup className="ml-2 text-nowrap">
-                            <ReviewSolutionContainer id={solution.id} locale={locale} showAllButtons />
-                          </TheButtonGroup>
-                        )}
-                      </>
+                      <TheButtonGroup className="ml-2 text-nowrap">
+                        <SolutionActionsContainer id={solution.id} showAllButtons />
+                      </TheButtonGroup>
                     )}
                   </Col>
 
@@ -674,7 +665,6 @@ SolutionSourceCodes.propTypes = {
   addComment: PropTypes.func.isRequired,
   updateComment: PropTypes.func.isRequired,
   removeComment: PropTypes.func.isRequired,
-  intl: PropTypes.object,
   history: PropTypes.shape({
     push: PropTypes.func.isRequired,
     replace: PropTypes.func.isRequired,
@@ -722,5 +712,5 @@ export default withLinks(
       updateComment: comment => dispatch(updateComment(params.solutionId, comment)),
       removeComment: id => dispatch(removeComment(params.solutionId, id)),
     })
-  )(injectIntl(withRouter(SolutionSourceCodes)))
+  )(withRouter(SolutionSourceCodes))
 );