feat: Version 2

Closes #627, closes #1047

client/src/components/custom-field-groups/CustomFieldGroupsStep/Item.jsx

@@ -0,0 +1,61 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React, { useCallback, useMemo } from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import { Draggable } from 'react-beautiful-dnd';
+import { Button } from 'semantic-ui-react';
+
+import selectors from '../../../selectors';
+
+import styles from './Item.module.scss';
+
+const Item = React.memo(({ id, index, onEdit }) => {
+  const selectCustomFieldGroupById = useMemo(() => selectors.makeSelectCustomFieldGroupById(), []);
+
+  const customFieldGroup = useSelector((state) => selectCustomFieldGroupById(state, id));
+
+  const handleEditClick = useCallback(() => {
+    onEdit(id);
+  }, [id, onEdit]);
+
+  return (
+    <Draggable draggableId={id} index={index} isDragDisabled={!customFieldGroup.isPersisted}>
+      {({ innerRef, draggableProps, dragHandleProps }, { isDragging }) => {
+        const contentNode = (
+          // eslint-disable-next-line react/jsx-props-no-spreading
+          <div {...draggableProps} ref={innerRef} className={styles.wrapper}>
+            <span
+              {...dragHandleProps} // eslint-disable-line react/jsx-props-no-spreading
+              className={styles.name}
+            >
+              {customFieldGroup.name}
+            </span>
+            <Button
+              icon="pencil"
+              size="small"
+              floated="right"
+              disabled={!customFieldGroup.isPersisted}
+              className={styles.editButton}
+              onClick={handleEditClick}
+            />
+          </div>
+        );
+
+        return isDragging ? ReactDOM.createPortal(contentNode, document.body) : contentNode;
+      }}
+    </Draggable>
+  );
+});
+
+Item.propTypes = {
+  id: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
+  onEdit: PropTypes.func.isRequired,
+};
+
+export default Item;