+ {visible.map((definition) => (
+
+ );
+};
+
+CustomFieldForm.propTypes = {
+ definitions: PropTypes.array,
+ values: PropTypes.object,
+ onChange: PropTypes.func,
+ users: PropTypes.array,
+ disabled: PropTypes.bool,
+};
+
+export default CustomFieldForm;
diff --git a/src/components/features/custom-field-form/styles.less b/src/components/features/custom-field-form/styles.less
new file mode 100644
index 0000000..afd2bc5
--- /dev/null
+++ b/src/components/features/custom-field-form/styles.less
@@ -0,0 +1,33 @@
+// ── Custom field form ────────────────────────────────────────────────────────
+// Inputs generated from the team's configured field definitions.
+.custom-field-form {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-3);
+
+ .custom-field-row {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-1);
+ }
+
+ .custom-field-label {
+ color: var(--main-panel-font-color);
+ font-size: var(--font-size-sm);
+ font-weight: var(--font-weight-medium);
+ }
+
+ .custom-field-required {
+ margin-left: var(--space-1);
+ color: var(--fail-color);
+ }
+
+ // An archived field only appears when a value already exists for it, so the marker
+ // explains why an author is seeing a field that is no longer offered.
+ .custom-field-archived {
+ margin-left: var(--space-2);
+ color: var(--modal-secondary-font-color);
+ font-size: var(--font-size-xs);
+ font-style: italic;
+ }
+}
diff --git a/src/components/features/folder-tree/FolderTree.js b/src/components/features/folder-tree/FolderTree.js
new file mode 100644
index 0000000..ecca807
--- /dev/null
+++ b/src/components/features/folder-tree/FolderTree.js
@@ -0,0 +1,256 @@
+import React, { useState } from 'react';
+import { Tree, IconButton, Whisper, Tooltip, Modal, Button, Form, Input, Loader } from 'rsuite';
+import FolderFillIcon from '@rsuite/icons/FolderFill';
+import PlusIcon from '@rsuite/icons/Plus';
+import EditIcon from '@rsuite/icons/Edit';
+import TrashIcon from '@rsuite/icons/Trash';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { CASE_MIME } from '../test-case-suites/dragTypes';
+
+/*
+Folder tree for manual test cases.
+
+The API already returns the tree nested with a per-folder count, so this renders what it is
+given rather than reassembling it. A synthetic "All test cases" root sits above the real
+folders: cases that have never been filed have to stay reachable, and a tree with no way
+back to everything is a trap.
+
+Selecting a folder reports its id upward; the synthetic entries report undefined (all) and
+'none' (unfiled), which is what the list endpoint expects.
+ */
+export const ALL_FOLDERS = '__all__';
+export const UNFILED = 'none';
+
+const FolderTree = ({
+ folders, unfiledCount, totalCount, value, onSelect, onCreate, onRename, onDelete, loading,
+ onDropCase,
+}) => {
+ const intl = useIntl();
+ const [dialog, setDialog] = useState(undefined);
+ const [name, setName] = useState('');
+ const [busy, setBusy] = useState(false);
+ const [dropTarget, setDropTarget] = useState(undefined);
+
+ // Only a dragged test case is a valid drop; anything else dragged over the tree (a
+ // file, selected text) has to keep its default browser behaviour.
+ const isCaseDrag = (event) => event.dataTransfer.types.includes(CASE_MIME);
+
+ const handleDragOver = (event, key) => {
+ if (!onDropCase || !isCaseDrag(event)) return;
+ event.preventDefault();
+ event.dataTransfer.dropEffect = 'move';
+ setDropTarget(key);
+ };
+
+ const handleDrop = (event, key) => {
+ if (!onDropCase || !isCaseDrag(event)) return;
+ event.preventDefault();
+ // Stop the drop bubbling to an ancestor folder row, which would otherwise file
+ // the case into the parent as well as the folder actually aimed at.
+ event.stopPropagation();
+ setDropTarget(undefined);
+ const caseId = event.dataTransfer.getData(CASE_MIME);
+ if (caseId) onDropCase(caseId, key === UNFILED ? null : key);
+ };
+
+ // Shared by every droppable row, real or synthetic.
+ const dropProps = (key) => ({
+ onDragOver: (event) => handleDragOver(event, key),
+ onDragLeave: () => setDropTarget(undefined),
+ onDrop: (event) => handleDrop(event, key),
+ });
+
+ // RSuite's Tree wants a uniform node shape, so the two synthetic rows are mapped into
+ // the same shape as a real folder rather than rendered separately.
+ const toNode = (folder) => ({
+ value: folder._id,
+ label: folder.name,
+ count: folder.testCaseCount,
+ folder,
+ children: (folder.children || []).map(toNode),
+ });
+
+ const data = [
+ {
+ value: ALL_FOLDERS,
+ label: intl.formatMessage({ id: 'app.manual.folders.all' }),
+ count: totalCount,
+ synthetic: true,
+ },
+ {
+ value: UNFILED,
+ label: intl.formatMessage({ id: 'app.manual.folders.unfiled' }),
+ count: unfiledCount,
+ synthetic: true,
+ },
+ ...(folders || []).map(toNode),
+ ];
+
+ const openDialog = (mode, folder) => {
+ setDialog({ mode, folder });
+ setName(mode === 'rename' && folder ? folder.name : '');
+ };
+
+ const closeDialog = () => {
+ setDialog(undefined);
+ setName('');
+ };
+
+ const submit = async () => {
+ if (!dialog || !name.trim()) return;
+ setBusy(true);
+ try {
+ if (dialog.mode === 'rename') {
+ await onRename(dialog.folder, name.trim());
+ } else {
+ // A null folder on "create" means a new root; otherwise it nests under the
+ // folder whose + was clicked, which is how depth is added.
+ await onCreate(dialog.folder ? dialog.folder._id : null, name.trim());
+ }
+ closeDialog();
+ } finally {
+ setBusy(false);
+ }
+ };
+
+ const renderNode = (node) => {
+ if (node.synthetic) {
+ // "All test cases" is a view, not a place - there is nothing to file into, so
+ // only the unfiled row accepts a drop (it means "take this out of its folder").
+ const droppable = node.value === UNFILED;
+ return (
+
+ {node.label}
+ {node.count}
+
+ );
+ }
+ return (
+
+
+
+
+ ))}
+
+ {renderInput(definition)}
+
+
+ onSelect(node.value)}
+ />
+ )}
+
+
+
+
+
+
+
+ {dialog && dialog.mode === 'create' && dialog.folder && (
+
+
+
+
+
+
+
+ );
+};
+
+export default FolderTree;
diff --git a/src/components/features/folder-tree/styles.less b/src/components/features/folder-tree/styles.less
new file mode 100644
index 0000000..0eb7805
--- /dev/null
+++ b/src/components/features/folder-tree/styles.less
@@ -0,0 +1,50 @@
+// ── Folder tree ──────────────────────────────────────────────────────────────
+// Sidebar tree for organising manual test cases.
+.folder-tree {
+ .folder-tree-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: var(--space-2);
+ }
+
+ .folder-tree-node {
+ display: flex;
+ align-items: center;
+ gap: var(--space-2);
+ width: 100%;
+ }
+
+ .folder-tree-icon {
+ color: var(--sub-panel-icon-color);
+ }
+
+ .folder-tree-label {
+ flex: 1 1 auto;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ .folder-tree-count {
+ color: var(--main-panel-secondary-font-color);
+ font-size: var(--font-size-xs);
+ }
+
+ // Row actions stay out of the way until the row is hovered, so a deep tree reads as
+ // structure rather than as a wall of buttons.
+ .folder-tree-actions {
+ display: none;
+ gap: var(--space-1);
+ }
+
+ .rs-tree-node:hover .folder-tree-actions {
+ display: inline-flex;
+ }
+
+ .folder-tree-parent-hint {
+ color: var(--main-panel-secondary-font-color);
+ font-size: var(--font-size-sm);
+ margin-bottom: var(--space-2);
+ }
+}
diff --git a/src/components/features/manual-step-editor/ManualStepEditor.js b/src/components/features/manual-step-editor/ManualStepEditor.js
new file mode 100644
index 0000000..2dc0658
--- /dev/null
+++ b/src/components/features/manual-step-editor/ManualStepEditor.js
@@ -0,0 +1,308 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Input, IconButton, Button, SelectPicker, Tag, Whisper, Tooltip } from 'rsuite';
+import TrashIcon from '@rsuite/icons/Trash';
+import PlusIcon from '@rsuite/icons/Plus';
+import AttachmentIcon from '@rsuite/icons/Attachment';
+import { FormattedMessage, useIntl } from 'react-intl';
+import AttachmentUpload from '../attachment-upload/AttachmentUpload';
+
+/**
+ * Ordered editor for a test case's steps.
+ *
+ * A step is either literal (action + expected result) or an inclusion of a shared step, in
+ * which case its own text is ignored and the shared step's steps take its place when the
+ * case is read expanded or frozen into a version. The two are rendered differently so an
+ * author can see at a glance which steps they actually control here.
+ *
+ * Action and expected sit side by side on one row: a step is a single "do this, expect
+ * that" pair, and stacking them made a ten-step case scroll for no reason. Attachments are
+ * collapsed behind a toggle per step, because most steps have none and an always-visible
+ * drop zone on every row would bury the text the author is actually writing.
+ *
+ * Reordering is drag-and-drop using the native HTML5 API rather than a library - the list
+ * is a single flat column, which is the case the native API handles well, and it avoids a
+ * dependency for one interaction.
+ */
+const ManualStepEditor = ({ steps, onChange, sharedSteps, readOnly, attachmentOwner }) => {
+ const intl = useIntl();
+ const [dragIndex, setDragIndex] = useState(undefined);
+ const [dropIndex, setDropIndex] = useState(undefined);
+ // Which rows have their attachment panel open. Kept by index rather than id because a
+ // step has no id until it is saved.
+ const [openAttachments, setOpenAttachments] = useState({});
+
+ const sharedStepOptions = (sharedSteps || []).map((sharedStep) => ({
+ label: `${sharedStep.name} (v${sharedStep.version})`,
+ value: sharedStep._id,
+ }));
+
+ const updateStep = (index, changes) => {
+ const next = steps.map((step, i) => (i === index ? { ...step, ...changes } : step));
+ onChange(next);
+ };
+
+ const addStep = () => {
+ onChange([...(steps || []), { action: '', expected: '' }]);
+ };
+
+ const addSharedStep = () => {
+ onChange([...(steps || []), { action: '', sharedStep: null }]);
+ };
+
+ const removeStep = (index) => {
+ onChange(steps.filter((step, i) => i !== index));
+ };
+
+ const toggleAttachments = (index) => {
+ setOpenAttachments((current) => ({ ...current, [index]: !current[index] }));
+ };
+
+ // Removing the dragged row and re-inserting it is what makes a drag across several
+ // positions land where the marker showed, rather than swapping two neighbours.
+ const moveStep = (from, to) => {
+ if (from === to || to === undefined || from === undefined) return;
+ const next = [...steps];
+ const [moved] = next.splice(from, 1);
+ next.splice(to, 0, moved);
+ onChange(next);
+ };
+
+ const handleDragStart = (index) => (event) => {
+ setDragIndex(index);
+ // Firefox ignores a drag that sets no data.
+ event.dataTransfer.effectAllowed = 'move';
+ try { event.dataTransfer.setData('text/plain', String(index)); } catch (error) { /* noop */ }
+ };
+
+ const handleDragOver = (index) => (event) => {
+ event.preventDefault();
+ event.dataTransfer.dropEffect = 'move';
+ if (index !== dropIndex) setDropIndex(index);
+ };
+
+ const handleDrop = (index) => (event) => {
+ event.preventDefault();
+ moveStep(dragIndex, index);
+ setDragIndex(undefined);
+ setDropIndex(undefined);
+ };
+
+ const handleDragEnd = () => {
+ setDragIndex(undefined);
+ setDropIndex(undefined);
+ };
+
+ if (readOnly) {
+ return (
+
+
+
+
+ {loading ?
+
+ )}
+
+ -
+ {(steps || []).map((step, index) => (
+ // eslint-disable-next-line react/no-array-index-key
+
-
+ ++++ {step.data && ( +{step.action}+{step.expected}++ ++ )} + {(step.attachments || []).length > 0 && ( +
+ + {step.data} + {}} + readOnly + /> + )} + {/* An expanded step says where it came from, so a reader can tell + which content is owned by this case and which by a shared step. */} + {step.sharedStepRef && ( + + + )} + {step.unresolvedSharedStep && ( ++ + + )} ++
+ ))}
+
+
+ );
+};
+
+ManualStepEditor.propTypes = {
+ steps: PropTypes.array,
+ onChange: PropTypes.func,
+ sharedSteps: PropTypes.array,
+ readOnly: PropTypes.bool,
+ attachmentOwner: PropTypes.object,
+};
+
+export default ManualStepEditor;
diff --git a/src/components/features/manual-step-editor/styles.less b/src/components/features/manual-step-editor/styles.less
new file mode 100644
index 0000000..826252b
--- /dev/null
+++ b/src/components/features/manual-step-editor/styles.less
@@ -0,0 +1,212 @@
+// ── Manual step editor ───────────────────────────────────────────────────────
+// Ordered list of a test case's steps. A step is either literal or an inclusion of a
+// shared step; the two look different so an author can see which content they own here.
+//
+// Action and expected sit side by side: a step is one "do this, expect that" pair, and
+// stacking them made a long case scroll for no reason.
+.manual-step-editor {
+ // Column headings, so the two inputs on each row are labelled once rather than carrying
+ // a label each.
+ .manual-step-heading {
+ display: flex;
+ align-items: center;
+ gap: var(--space-3);
+ padding: 0 var(--space-3) var(--space-1);
+ color: var(--modal-secondary-font-color);
+ font-size: var(--font-size-xs);
+ font-weight: var(--font-weight-medium);
+ text-transform: uppercase;
+ }
+
+ .manual-step-heading-number {
+ flex: 0 0 auto;
+ min-width: var(--space-5);
+ }
+
+ .manual-step-heading-action,
+ .manual-step-heading-expected {
+ flex: 1 1 50%;
+ min-width: 0;
+ }
+
+ .manual-step-heading-controls {
+ flex: 0 0 auto;
+ width: 64px;
+ }
+
+ .manual-step-list {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ }
+
+ .manual-step {
+ display: flex;
+ align-items: flex-start;
+ gap: var(--space-3);
+ padding: var(--space-3);
+ margin-bottom: var(--space-2);
+ background: var(--sub-panel-background);
+ border: 1px solid var(--border-subtle);
+ border-radius: var(--radius-md);
+ // The whole row is the drag handle, so the cursor has to say so everywhere on it.
+ cursor: grab;
+ transition: opacity var(--transition-fast), border-color var(--transition-fast);
+ }
+
+ // The row being dragged fades so the gap it will leave is legible.
+ .manual-step-dragging {
+ opacity: 0.4;
+ cursor: grabbing;
+ }
+
+ // Where the row will land. A top border rather than a filled background: the marker has
+ // to read as a position between rows, not as another selected row.
+ .manual-step-drop-target {
+ border-top: 2px solid var(--button-background);
+ }
+
+ .manual-step-handle {
+ flex: 0 0 auto;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-width: var(--space-5);
+ padding-top: var(--space-1);
+ color: var(--modal-secondary-font-color);
+ }
+
+ .manual-step-number {
+ font-weight: var(--font-weight-medium);
+ }
+
+ .manual-step-controls {
+ flex: 0 0 auto;
+ display: flex;
+ gap: var(--space-1);
+ width: 64px;
+ justify-content: flex-end;
+ }
+
+ .manual-step-body {
+ flex: 1 1 auto;
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-2);
+ min-width: 0;
+ }
+
+ // The side-by-side pair.
+ .manual-step-row {
+ display: flex;
+ gap: var(--space-3);
+ align-items: flex-start;
+ }
+
+ .manual-step-action-input,
+ .manual-step-expected-input {
+ flex: 1 1 50%;
+ min-width: 0;
+ }
+
+ .manual-step-attachments {
+ padding-top: var(--space-1);
+ }
+
+ .manual-step-label {
+ display: inline-block;
+ margin-right: var(--space-2);
+ color: var(--modal-secondary-font-color);
+ font-size: var(--font-size-xs);
+ font-weight: var(--font-weight-medium);
+ text-transform: uppercase;
+ }
+
+ .manual-step-action {
+ color: var(--main-panel-font-color);
+ white-space: pre-wrap;
+ }
+
+ .manual-step-expected,
+ .manual-step-data {
+ color: var(--modal-secondary-font-color);
+ font-size: var(--font-size-sm);
+ white-space: pre-wrap;
+ }
+
+ .manual-step-shared-tag {
+ align-self: flex-start;
+ background: var(--sub-panel-background);
+ color: var(--modal-secondary-font-color);
+ font-size: var(--font-size-xs);
+ }
+
+ // An inclusion whose shared step has gone is kept rather than dropped, so it has to be
+ // visibly flagged - otherwise the case silently reads as one step short.
+ .manual-step-unresolved-tag {
+ align-self: flex-start;
+ background: var(--sub-panel-background);
+ color: var(--error-color);
+ font-size: var(--font-size-xs);
+ }
+
+ .manual-step-editor-actions {
+ display: flex;
+ gap: var(--space-2);
+ margin-top: var(--space-3);
+ }
+}
+
+// Narrow screens have no room for two columns, so the pair stacks. The editor stays
+// usable rather than squeezing two textareas into half a phone width each.
+@media (max-width: 768px) {
+ .manual-step-editor {
+ .manual-step-row {
+ flex-direction: column;
+ }
+
+ .manual-step-heading-expected {
+ display: none;
+ }
+ }
+}
+
+.manual-step-editor-readonly {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ counter-reset: manual-step;
+
+ .manual-step {
+ padding: var(--space-3);
+ border-bottom: 1px solid var(--border-subtle);
+ counter-increment: manual-step;
+
+ &:last-child {
+ border-bottom: none;
+ }
+
+ &::before {
+ content: counter(manual-step);
+ display: inline-block;
+ min-width: var(--space-5);
+ color: var(--modal-secondary-font-color);
+ font-weight: var(--font-weight-medium);
+ }
+ }
+
+ // The read-only view shows the same pairing, so a frozen version reads the way the
+ // editor looked when it was written.
+ .manual-step-row {
+ display: flex;
+ gap: var(--space-3);
+ align-items: flex-start;
+ }
+
+ .manual-step-action,
+ .manual-step-expected {
+ flex: 1 1 50%;
+ min-width: 0;
+ white-space: pre-wrap;
+ }
+}
diff --git a/src/components/features/screenshot-view/baseline/BaselineImageView.js b/src/components/features/screenshot-view/baseline/BaselineImageView.js
index 0cf5a5c..97387b5 100644
--- a/src/components/features/screenshot-view/baseline/BaselineImageView.js
+++ b/src/components/features/screenshot-view/baseline/BaselineImageView.js
@@ -381,7 +381,7 @@ const BaselineImageView = (props) => {
type="warning"
message={(
-
+
+
+
+
+ -
+ {(steps || []).map((step, index) => {
+ const classes = ['manual-step'];
+ if (dragIndex === index) classes.push('manual-step-dragging');
+ if (dropIndex === index && dragIndex !== index) classes.push('manual-step-drop-target');
+ return (
+
-
+
+ {index + 1}
+
+
+ + {/* `sharedStep` being present at all (even null) marks this row as an + inclusion, so an author can add one before choosing which. */} + {'sharedStep' in step ? ( ++ ++ ++ ) : ( + <> +
+ + updateStep(index, { sharedStep: value })} + placeholder={intl.formatMessage({ id: 'app.manual.step-editor.shared-step-placeholder' })} + block + cleanable={false} + /> + +
++ + updateStep(index, { action: value })} + placeholder={intl.formatMessage({ id: 'app.manual.step-editor.action-placeholder' })} + /> + updateStep(index, { expected: value })} + placeholder={intl.formatMessage({ id: 'app.manual.step-editor.expected-placeholder' })} + /> ++ updateStep(index, { data: value })} + placeholder={intl.formatMessage({ id: 'app.manual.step-editor.data-placeholder' })} + /> + {(openAttachments[index] || (step.attachments || []).length > 0) && ( ++ {attachmentOwner ? ( ++ )} + + )} +updateStep(index, { attachments })} + /> + ) : ( + // Uploads are keyed on the owning entity, so one + // that has not been saved yet has nothing to key on. + ++ )} ++ + {!('sharedStep' in step) && ( +++ + )} ++ + )} + > + } + onClick={() => toggleAttachments(index)} + aria-label={intl.formatMessage({ id: 'app.manual.step-editor.attachments' })} + /> + } + onClick={() => removeStep(index)} + aria-label={intl.formatMessage({ id: 'app.manual.step-editor.remove' })} + /> +
+ );
+ })}
+
+
+ )}
+
+
+ }>
+
+
+
+ {sectionKeys.map((key) => {
+ const collapsed = collapsedIds.includes(key);
+ const rows = grouped[key] || [];
+ return (
+
+ );
+};
+
+export default TestCaseSuites;
diff --git a/src/components/features/test-case-suites/dragTypes.js b/src/components/features/test-case-suites/dragTypes.js
new file mode 100644
index 0000000..a826279
--- /dev/null
+++ b/src/components/features/test-case-suites/dragTypes.js
@@ -0,0 +1,12 @@
+/*
+The MIME type a manual test case is dragged with.
+
+Lives on its own because both the folder tree (a drop target) and the suite list (the drag
+source and also a drop target) need it. Importing it from either component would make the
+two import each other, which is a cycle a bundler resolves by handing one of them
+`undefined` at module-evaluation time.
+
+A custom type rather than text/plain so text dragged from anywhere else - or a case dragged
+out of the browser entirely - is never mistaken for a move.
+ */
+export const CASE_MIME = 'application/x-angles-test-case';
diff --git a/src/components/features/version-badge/VersionBadge.js b/src/components/features/version-badge/VersionBadge.js
new file mode 100644
index 0000000..a6c78b9
--- /dev/null
+++ b/src/components/features/version-badge/VersionBadge.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Tag } from 'rsuite';
+import { FormattedMessage } from 'react-intl';
+
+/**
+ * Shows which version of a test case is being looked at, and how far behind the latest it
+ * is. Displayed anywhere a bound version is rendered - a run's execution view, or a
+ * historical version - because "v3" alone does not tell a QA whether what they are reading
+ * is current.
+ */
+const VersionBadge = ({ version, latestVersion, onClick }) => {
+ if (!version) return null;
+ const behind = latestVersion && latestVersion > version ? latestVersion - version : 0;
+ const isCurrent = behind === 0;
+
+ return (
+
+ handleDragOver(event, key)}
+ onDragLeave={() => setDropTarget(undefined)}
+ onDrop={(event) => handleDrop(event, key)}
+ >
+
+ );
+ })}
+ onToggleCollapse(key)}
+ role="button"
+ aria-expanded={!collapsed}
+ tabIndex={0}
+ onKeyDown={(event) => {
+ if (event.key === 'Enter' || event.key === ' ') onToggleCollapse(key);
+ }}
+ >
+
+
+ {!collapsed && (
+
+ onOpen(row._id)}
+ >
+
+
+ )}
+
+
+ );
+ }
+
+ const renderCell = (value) => {
+ const formatted = formatValue(value);
+ if (formatted === null) {
+ return (
+
+
+
+
+
+
+ );
+};
+
+export default VersionDiff;
diff --git a/src/components/features/version-diff/styles.less b/src/components/features/version-diff/styles.less
new file mode 100644
index 0000000..e5110ad
--- /dev/null
+++ b/src/components/features/version-diff/styles.less
@@ -0,0 +1,54 @@
+// ── Version diff ─────────────────────────────────────────────────────────────
+// Side-by-side comparison of two frozen test case versions.
+.version-diff {
+ .version-diff-header {
+ display: flex;
+ align-items: center;
+ gap: var(--space-2);
+ margin-bottom: var(--space-3);
+ }
+
+ .version-diff-arrow {
+ color: var(--main-panel-secondary-font-color);
+ }
+
+ .version-diff-table {
+ width: 100%;
+ border-collapse: collapse;
+
+ th,
+ td {
+ text-align: left;
+ padding: var(--space-2);
+ border-bottom: 1px solid var(--border-subtle);
+ vertical-align: top;
+ font-size: var(--font-size-sm);
+ }
+
+ th {
+ color: var(--main-panel-secondary-font-color);
+ font-weight: var(--font-weight-medium);
+ }
+ }
+
+ // The two sides borrow the fail/pass hues to read as removed/added without
+ // introducing a diff-specific palette.
+ .version-diff-before {
+ color: var(--fail-color);
+ }
+
+ .version-diff-after {
+ color: var(--pass-color);
+ }
+
+ .version-diff-expected {
+ color: var(--main-panel-secondary-font-color);
+ font-size: var(--font-size-xs);
+ margin-top: var(--space-1);
+ }
+
+ .version-diff-empty {
+ color: var(--main-panel-secondary-font-color);
+ font-style: italic;
+ }
+}
diff --git a/src/components/layout/Shell.js b/src/components/layout/Shell.js
index 274fb1c..868ab78 100644
--- a/src/components/layout/Shell.js
+++ b/src/components/layout/Shell.js
@@ -29,6 +29,7 @@ import AngleRightIcon from '@rsuite/icons/legacy/AngleRight';
import Image from '@rsuite/icons/Image';
import BarChart from '@rsuite/icons/BarChart';
import DocPass from '@rsuite/icons/DocPass';
+import TaskIcon from '@rsuite/icons/Task';
import InfoOutline from '@rsuite/icons/InfoOutline';
import GlobalIcon from '@rsuite/icons/Global';
import AdminIcon from '@rsuite/icons/Admin';
@@ -38,6 +39,9 @@ import ExitIcon from '@rsuite/icons/Exit';
import { CgDarkMode } from 'react-icons/cg';
import translations from '../../translations/translations.json';
+import BrandLogo from '../common/BrandLogo';
+import ThemeSwatch from '../common/ThemeSwatch';
+import { applyTheme, getThemesByPolarity } from '../../utility/Themes';
import { storeCurrentTeam, storeTeams, storeTeamsError } from '../../redux/teamActions';
import { storeEnvironments } from '../../redux/environmentActions';
import { clearCurrentErrorMessage, clearCurrentInfoMessage, clearCurrentLoaderMessage } from '../../redux/notificationActions';
@@ -59,7 +63,7 @@ const Shell = function (props) {
const teamRequests = new TeamRequests(axios);
const environmentRequests = new EnvironmentRequests(axios);
const [expand, setExpand] = useState(true);
- const { user, logout, isLoading } = useAuth();
+ const { user, logout, isLoading, manualTestingEnabled } = useAuth();
const intl = useIntl();
const {
@@ -156,6 +160,15 @@ const Shell = function (props) {
if (teamId) {
if (!currentTeam || teamId !== currentTeam._id) {
changeCurrentTeam(teamId);
+ } else {
+ // The param has been applied, so drop it. It is a one-shot deep
+ // link, not a source of truth: left in place it re-asserts itself
+ // on every render of this effect, so picking a different team in
+ // the header would be immediately reverted to the URL's team.
+ const params = new URLSearchParams(searchParams.toString());
+ params.delete('teamId');
+ const query = params.toString();
+ router.replace(query ? `${pathname}?${query}` : pathname);
}
} else if (Cookies.get('teamId')) {
if (!currentTeam || Cookies.get('teamId') !== currentTeam._id) {
@@ -164,17 +177,16 @@ const Shell = function (props) {
} else if (teams && teams.length > 0) {
changeCurrentTeam(teams[0]._id);
}
- }, [teams, currentTeam, searchParams]);
+ }, [teams, currentTeam, searchParams, pathname, router]);
const setLanguage = (languageCode) => {
Cookies.set('language', languageCode);
window.location.reload(); // Force reload to apply language change
};
- const setTheme = (theme) => {
- const rootElement = document.documentElement;
- rootElement.setAttribute('data-theme', theme);
- Cookies.set('theme', theme);
+ const setTheme = (themeId) => {
+ applyTheme(themeId);
+ Cookies.set('theme', themeId);
};
const toggleMenu = () => {
@@ -198,8 +210,7 @@ const Shell = function (props) {
+
+
+ | {renderCell(left[field])} | +{renderCell(right[field])} | +|
| {key} | +{renderCell(leftFields[key])} | +{renderCell(rightFields[key])} | +
|
+ |
+
+ {leftStep ? (
+ <>
+ {renderCell(leftStep.action)}
+ {renderCell(leftStep.expected)}
+
+ ) : renderCell(null)}
+ |
+
+ {rightStep ? (
+ <>
+ {renderCell(rightStep.action)}
+ {renderCell(rightStep.expected)}
+
+ ) : renderCell(null)}
+ |
+
- 
- 
+
-
+
+
+ ) : (
+
+ )}
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+ )}
+
+
+ setEditing(undefined)}>
+
+
+
+
+
+ {editing && (
+ <>
+ {cascadeWarning > 0 && (
+ setEditing({ ...editing, steps })}
+ attachmentOwner={editing._id
+ ? { sharedStepId: editing._id } : undefined}
+ />
+
+ )}
+
+
+
+
+
+
+
+ setUsage(undefined)}>
+
+
+
+
+
+ {usageLoading &&
+
+
+ setHistory(undefined)}>
+
+
+
+
+
+
+
+
+ setDeleteState({ open: false, sharedStep: undefined })}
+ />
+
+ );
+};
+
+const mapStateToProps = (state) => ({ currentTeam: state.teamsReducer.currentTeam });
+
+export default connect(mapStateToProps)(SharedStepsPage);
diff --git a/src/components/pages/shared-steps/styles.less b/src/components/pages/shared-steps/styles.less
new file mode 100644
index 0000000..bc90dd2
--- /dev/null
+++ b/src/components/pages/shared-steps/styles.less
@@ -0,0 +1,15 @@
+// ── Shared steps ─────────────────────────────────────────────────────────────
+.shared-steps-page {
+ .shared-steps-search {
+ max-width: 320px;
+ }
+
+ .shared-steps-usage-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: var(--space-2);
+ padding: var(--space-2) 0;
+ border-bottom: 1px solid var(--border-subtle);
+ }
+}
diff --git a/src/components/pages/team-settings/TeamSettingsPage.js b/src/components/pages/team-settings/TeamSettingsPage.js
index 546b153..bd7d9ac 100644
--- a/src/components/pages/team-settings/TeamSettingsPage.js
+++ b/src/components/pages/team-settings/TeamSettingsPage.js
@@ -1,7 +1,6 @@
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { connect } from 'react-redux';
-import Cookies from 'js-cookie';
import { Container, Content, Panel, Form, ButtonToolbar, Button, Message, useToaster, SelectPicker, TagInput, Tag, Divider } from 'rsuite';
import { useAuth } from '../../../context/AuthContext';
import { useRouter } from 'next/navigation';
@@ -35,10 +34,25 @@ function TeamSettingsPage(props) {
}
}, [user, isLoading, router]);
+ // Seeds the edit target ONCE, then leaves it alone. The guard is
+ // `selectedTeamId === undefined` — "nothing chosen yet" — not a comparison
+ // against `currentTeam`.
+ //
+ // Deliberately not kept in sync with the header afterwards, in either
+ // direction: which team you are configuring is a separate question from
+ // which team the app is scoped to. Wanting to rename Team B or add a
+ // component to it says nothing about wanting to leave Team A's dashboards
+ // and test runs. An earlier version followed `currentTeam` here, which
+ // meant a header switch silently swapped the form out from under whatever
+ // was being edited.
+ //
+ // The header is still the sensible starting point, so it is what the page
+ // opens on.
useEffect(() => {
- if (!selectedTeamId && currentTeam && currentTeam._id) {
+ if (selectedTeamId !== undefined) return;
+ if (currentTeam && currentTeam._id) {
setSelectedTeamId(currentTeam._id);
- } else if (!selectedTeamId && teams && teams.length > 0) {
+ } else if (teams && teams.length > 0) {
setSelectedTeamId(teams[0]._id);
}
}, [teams, currentTeam, selectedTeamId]);
@@ -74,14 +88,19 @@ function TeamSettingsPage(props) {
}
};
+ // Kept as an in-page control, unlike the filters on Dashboard and Metrics.
+ // Here the team is the object being edited — renamed, its components
+ // changed — not a filter over the page's content, so it belongs in the form
+ // next to the fields it governs.
+ //
+ // Purely local: it does NOT write `currentTeam` or the `teamId` cookie.
+ // Editing another team's configuration is not a statement that you want to
+ // work in that team, and it used to be treated as one — opening this page
+ // and picking Team B to rename it would move the whole app, for a year,
+ // onto Team B. Switching context stays the header picker's job.
const handleTeamChange = (teamId) => {
if (!teamId) return;
setSelectedTeamId(teamId);
- const team = teams.find((t) => t._id === teamId);
- if (team) {
- saveCurrentTeam(team);
- Cookies.set('teamId', teamId, { expires: 365 });
- }
};
const handleSaveName = async () => {
@@ -90,6 +109,15 @@ function TeamSettingsPage(props) {
await axios.put(`/team/${selectedTeamId}`, { name: nameInput });
toaster.push(
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {loading ?
+
+ )}
+
+
+
+ )}
+ {usage && !usageLoading && usage.testCases.map((testCase) => (
+
+ {testCase.title}
+ {`v${testCase.version}`}
+
+ ))}
+