refactor(communicator): rebuild the communicator builder as a board management dashboard

src/components/Communicator/CommunicatorDialog/BoardDetails/BoardDetails.js

@@ -0,0 +1,196 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { intlShape } from 'react-intl';
+import moment from 'moment';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
+import Divider from '@material-ui/core/Divider';
+
+import BoardThumb from '../shared/BoardThumb';
+import BoardStatusChips from '../shared/BoardStatusChips';
+import { formatBoardLocale } from '../utils/boardLocale';
+import PremiumFeature from '../../../PremiumFeature';
+import messages from '../CommunicatorDialog.messages';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(1.5),
+    padding: theme.spacing(1, 2)
+  },
+  thumb: {
+    width: '100%',
+    height: 120,
+    borderRadius: theme.shape.borderRadius,
+    border: `1px solid ${theme.palette.divider}`
+  },
+  title: {
+    fontWeight: 600
+  },
+  header: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(1)
+  },
+  meta: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    color: theme.palette.text.secondary
+  },
+  separator: {
+    margin: theme.spacing(0, 0.75),
+    opacity: 0.5
+  },
+  actions: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(0.5)
+  },
+  action: {
+    // Full-width, left-aligned, labelled. Comfortably above the 44px target
+    // minimum in both themes.
+    justifyContent: 'flex-start',
+    minHeight: 44,
+    textTransform: 'none'
+  },
+  destructive: {
+    color: theme.palette.error.main
+  },
+  empty: {
+    padding: theme.spacing(4, 2),
+    color: theme.palette.text.secondary,
+    textAlign: 'center'
+  }
+}));
+
+const ActionButton = ({ action, busy, classes }) => {
+  const button = (
+    <Button
+      fullWidth
+      data-action-key={action.key}
+      className={`${classes.action} ${
+        action.destructive ? classes.destructive : ''
+      }`}
+      disabled={!!action.disabled || busy}
+      title={action.hint}
+      startIcon={action.icon}
+      onClick={action.onClick}
+    >
+      {action.label}
+    </Button>
+  );
+
+  return action.premium ? <PremiumFeature>{button}</PremiumFeature> : button;
+};
+
+ActionButton.propTypes = {
+  action: PropTypes.object.isRequired,
+  busy: PropTypes.bool,
+  classes: PropTypes.object.isRequired
+};
+
+const BoardDetails = ({
+  intl,
+  board,
+  actions,
+  busy,
+  communicator,
+  activeBoardId,
+  headingRef,
+  hideTitle
+}) => {
+  const classes = useStyles();
+
+  if (!board) {
+    return (
+      <div className={classes.empty}>
+        <Typography variant="body2">
+          {intl.formatMessage(messages.selectBoardPrompt)}
+        </Typography>
+      </div>
+    );
+  }
+
+  const title = board.name || board.id;
+  const locale = formatBoardLocale(intl, board.locale);
+  const metaParts = [
+    intl.formatMessage(messages.tilesQty, { qty: board.tiles.length }),
+    locale,
+    moment(board.lastEdited).format('DD/MM/YYYY')
+  ].filter(Boolean);
+
+  return (
+    <div className={classes.root}>
+      <BoardThumb board={board} className={classes.thumb} />
+
+      <div className={classes.header}>
+        {!hideTitle && (
+          <Typography
+            variant="h6"
+            component="h2"
+            className={classes.title}
+            tabIndex={-1}
+            ref={headingRef}
+          >
+            {title}
+          </Typography>
+        )}
+        <Typography variant="caption" component="p" className={classes.meta}>
+          {metaParts.map((part, index) => (
+            <React.Fragment key={part}>
+              {index > 0 && (
+                <span className={classes.separator} aria-hidden="true">
+                  ·
+                </span>
+              )}
+              {part}
+            </React.Fragment>
+          ))}
+        </Typography>
+        {communicator && (
+          <BoardStatusChips
+            intl={intl}
+            board={board}
+            isRoot={communicator.rootBoard === board.id}
+            isActive={activeBoardId === board.id}
+          />
+        )}
+      </div>
+
+      <Divider />
+
+      <div className={classes.actions}>
+        {actions.map((action) => (
+          <ActionButton
+            key={action.key}
+            action={action}
+            busy={busy}
+            classes={classes}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+BoardDetails.defaultProps = {
+  actions: [],
+  busy: false,
+  hideTitle: false
+};
+
+BoardDetails.propTypes = {
+  intl: intlShape.isRequired,
+  board: PropTypes.object,
+  actions: PropTypes.array,
+  busy: PropTypes.bool,
+  communicator: PropTypes.object,
+  activeBoardId: PropTypes.string,
+  headingRef: PropTypes.object,
+  hideTitle: PropTypes.bool
+};
+
+export default BoardDetails;

src/components/Communicator/CommunicatorDialog/BoardDetails/BoardDetails.test.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Button from '@material-ui/core/Button';
+import BoardDetails from './BoardDetails';
+
+jest.mock('../CommunicatorDialog.messages', () => ({
+  __esModule: true,
+  default: new Proxy(
+    {},
+    {
+      get: (target, prop) => ({
+        id: String(prop),
+        defaultMessage: String(prop)
+      })
+    }
+  )
+}));
+
+jest.mock('../shared/BoardThumb', () => ({
+  __esModule: true,
+  default: () => null
+}));
+
+const intl = { formatMessage: ({ defaultMessage }) => defaultMessage };
+
+const board = {
+  id: 'b1',
+  name: 'Comidas',
+  tiles: [{ id: 't1' }, { id: 't2' }],
+  lastEdited: '2026-01-01T00:00:00.000Z'
+};
+
+const actions = [
+  { key: 'show', label: 'Show', icon: null, onClick: jest.fn() },
+  {
+    key: 'clone',
+    label: 'Clone',
+    icon: null,
+    disabled: true,
+    onClick: jest.fn()
+  },
+  {
+    key: 'delete',
+    label: 'Delete',
+    icon: null,
+    destructive: true,
+    onClick: jest.fn()
+  }
+];
+
+const render = (props = {}) =>
+  mount(
+    <BoardDetails
+      intl={intl}
+      board={board}
+      actions={actions}
+      busy={false}
+      onClose={jest.fn()}
+      {...props}
+    />
+  );
+
+describe('BoardDetails', () => {
+  it('renders the board name', () => {
+    expect(render().text()).toContain('Comidas');
+  });
+
+  it('renders one button per action with a visible label', () => {
+    const buttons = render()
+      .find(Button)
+      .filterWhere((node) => !!node.prop('data-action-key'));
+    expect(buttons).toHaveLength(3);
+    expect(buttons.map((node) => node.text())).toEqual(
+      expect.arrayContaining(['Show', 'Clone', 'Delete'])
+    );
+  });
+
+  it('disables an action marked disabled', () => {
+    const clone = render()
+      .find(Button)
+      .filterWhere((node) => node.prop('data-action-key') === 'clone');
+    expect(clone.prop('disabled')).toBe(true);
+  });
+
+  it('disables every action while busy', () => {
+    const show = render({ busy: true })
+      .find(Button)
+      .filterWhere((node) => node.prop('data-action-key') === 'show');
+    expect(show.prop('disabled')).toBe(true);
+  });
+
+  it('calls the action handler on click', () => {
+    const onClick = jest.fn();
+    const wrapper = render({
+      actions: [{ key: 'show', label: 'Show', icon: null, onClick }]
+    });
+
+    wrapper
+      .find(Button)
+      .filterWhere((node) => node.prop('data-action-key') === 'show')
+      .simulate('click');
+
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it('renders a prompt when nothing is selected', () => {
+    expect(render({ board: null }).text()).toContain('selectBoardPrompt');
+  });
+});