feat: Version 2

Closes #627, closes #1047

client/src/components/custom-field-groups/AddCustomFieldGroupStep/AddCustomFieldGroupStep.jsx

@@ -0,0 +1,145 @@
+/*!
+ * 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, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { Button, Dropdown, Form } from 'semantic-ui-react';
+import { useDidUpdate, useToggle } from '../../../lib/hooks';
+import { Popup } from '../../../lib/custom-ui';
+
+import selectors from '../../../selectors';
+import { useForm } from '../../../hooks';
+
+import styles from './AddCustomFieldGroupStep.module.scss';
+import CustomFieldGroupEditor from '../CustomFieldGroupEditor/CustomFieldGroupEditor';
+
+const AddCustomFieldGroupStep = React.memo(({ onCreate, onBack, onClose }) => {
+  const baseCustomFieldGroups = useSelector(selectors.selectBaseCustomFieldGroupsForCurrentProject);
+
+  const [t] = useTranslation();
+
+  const [data, handleFieldChange, setData] = useForm({
+    baseCustomFieldGroupId: null,
+    name: '',
+  });
+
+  const selectedBaseCustomFieldGroup = useMemo(() => {
+    if (data.baseCustomFieldGroupId === 'without') {
+      return null;
+    }
+
+    return baseCustomFieldGroups.find(
+      (baseCustomFieldGroup) => baseCustomFieldGroup.id === data.baseCustomFieldGroupId,
+    );
+  }, [baseCustomFieldGroups, data.baseCustomFieldGroupId]);
+
+  const [focusNameFieldState, focusNameField] = useToggle();
+
+  const customFieldGroupEditorRef = useRef(null);
+
+  const handleSubmit = useCallback(() => {
+    const cleanData = {
+      ...data,
+      name: data.name.trim(),
+    };
+
+    if (selectedBaseCustomFieldGroup) {
+      if (!cleanData.name || cleanData.name === selectedBaseCustomFieldGroup.name) {
+        cleanData.name = null;
+      }
+    } else {
+      if (!cleanData.name) {
+        customFieldGroupEditorRef.current.selectNameField();
+        return;
+      }
+
+      delete cleanData.baseCustomFieldGroupId;
+    }
+
+    onCreate(cleanData);
+    onClose();
+  }, [onCreate, onClose, data, selectedBaseCustomFieldGroup, customFieldGroupEditorRef]);
+
+  const handleBaseCustomFieldGroupIdChange = useCallback(
+    (_, { value }) => {
+      setData((prevData) => {
+        const baseCustomFieldGroupId = value === 'without' ? null : value; // FIXME: hack
+
+        const nextSelectedBaseCustomFieldGroup =
+          baseCustomFieldGroupId &&
+          baseCustomFieldGroups.find(
+            (baseCustomFieldGroup) => baseCustomFieldGroup.id === baseCustomFieldGroupId,
+          );
+
+        return {
+          ...prevData,
+          baseCustomFieldGroupId,
+          name: nextSelectedBaseCustomFieldGroup ? nextSelectedBaseCustomFieldGroup.name : '',
+        };
+      });
+
+      focusNameField();
+    },
+    [baseCustomFieldGroups, setData, focusNameField],
+  );
+
+  useDidUpdate(() => {
+    customFieldGroupEditorRef.current.focusNameField();
+  }, [focusNameFieldState]);
+
+  return (
+    <>
+      <Popup.Header onBack={onBack}>
+        {t('common.addCustomFieldGroup', {
+          context: 'title',
+        })}
+      </Popup.Header>
+      <Popup.Content>
+        <Form onSubmit={handleSubmit}>
+          <div className={styles.text}>{t('common.baseGroup')}</div>
+          <Dropdown
+            fluid
+            selection
+            name="baseCustomFieldGroupId"
+            options={[
+              {
+                value: 'without',
+                text: t('common.withoutBaseGroup'),
+              },
+              ...baseCustomFieldGroups.map((baseCustomFieldGroup) => ({
+                value: baseCustomFieldGroup.id,
+                text: baseCustomFieldGroup.name,
+                disabled: !baseCustomFieldGroup.isPersisted,
+              })),
+            ]}
+            value={data.baseCustomFieldGroupId || 'without'}
+            className={styles.field}
+            onChange={handleBaseCustomFieldGroupIdChange}
+          />
+          <CustomFieldGroupEditor
+            ref={customFieldGroupEditorRef}
+            data={data}
+            onFieldChange={handleFieldChange}
+          />
+          <Button positive content={t('action.addCustomFieldGroup')} />
+        </Form>
+      </Popup.Content>
+    </>
+  );
+});
+
+AddCustomFieldGroupStep.propTypes = {
+  onCreate: PropTypes.func.isRequired,
+  onBack: PropTypes.func,
+  onClose: PropTypes.func.isRequired,
+};
+
+AddCustomFieldGroupStep.defaultProps = {
+  onBack: undefined,
+};
+
+export default AddCustomFieldGroupStep;

client/src/components/custom-field-groups/AddCustomFieldGroupStep/AddCustomFieldGroupStep.module.scss

@@ -0,0 +1,17 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .field {
+    margin-bottom: 8px;
+  }
+
+  .text {
+    color: #444444;
+    font-size: 12px;
+    font-weight: bold;
+    padding-bottom: 6px;
+  }
+}

client/src/components/custom-field-groups/AddCustomFieldGroupStep/index.js

@@ -0,0 +1,8 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import AddCustomFieldGroupStep from './AddCustomFieldGroupStep';
+
+export default AddCustomFieldGroupStep;

client/src/components/custom-field-groups/CustomFieldGroup/CustomFieldGroup.jsx

@@ -0,0 +1,36 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+
+import selectors from '../../../selectors';
+import CustomField from '../../custom-fields/CustomField';
+
+import styles from './CustomFieldGroup.module.scss';
+
+const CustomFieldGroup = React.memo(({ id }) => {
+  const selectCustomFieldIdsByGroupId = useMemo(
+    () => selectors.makeSelectCustomFieldIdsByGroupId(),
+    [],
+  );
+
+  const customFieldIds = useSelector((state) => selectCustomFieldIdsByGroupId(state, id));
+
+  return (
+    <div className={styles.wrapper}>
+      {customFieldIds.map((customFieldId) => (
+        <CustomField key={customFieldId} id={customFieldId} customFieldGroupId={id} />
+      ))}
+    </div>
+  );
+});
+
+CustomFieldGroup.propTypes = {
+  id: PropTypes.string.isRequired,
+};
+
+export default CustomFieldGroup;

client/src/components/custom-field-groups/CustomFieldGroup/CustomFieldGroup.module.scss

@@ -0,0 +1,12 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .wrapper {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  }
+}

client/src/components/custom-field-groups/CustomFieldGroup/index.js

@@ -0,0 +1,8 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import CustomFieldGroup from './CustomFieldGroup';
+
+export default CustomFieldGroup;

client/src/components/custom-field-groups/CustomFieldGroupEditor/CustomFieldGroupEditor.jsx

@@ -0,0 +1,64 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React, { useCallback, useEffect, useImperativeHandle } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { Input } from '../../../lib/custom-ui';
+
+import { useNestedRef } from '../../../hooks';
+
+import styles from './CustomFieldGroupEditor.module.scss';
+
+const CustomFieldGroupEditor = React.forwardRef(({ data, onFieldChange }, ref) => {
+  const [t] = useTranslation();
+
+  const [nameFieldRef, handleNameFieldRef] = useNestedRef('inputRef');
+
+  const focusNameField = useCallback(() => {
+    nameFieldRef.current.focus({
+      preventScroll: true,
+    });
+  }, [nameFieldRef]);
+
+  const selectNameField = useCallback(() => {
+    nameFieldRef.current.select();
+  }, [nameFieldRef]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      focusNameField,
+      selectNameField,
+    }),
+    [focusNameField, selectNameField],
+  );
+
+  useEffect(() => {
+    focusNameField();
+  }, [focusNameField]);
+
+  return (
+    <>
+      <div className={styles.text}>{t('common.title')}</div>
+      <Input
+        fluid
+        ref={handleNameFieldRef}
+        name="name"
+        value={data.name}
+        maxLength={128}
+        className={styles.field}
+        onChange={onFieldChange}
+      />
+    </>
+  );
+});
+
+CustomFieldGroupEditor.propTypes = {
+  data: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  onFieldChange: PropTypes.func.isRequired,
+};
+
+export default React.memo(CustomFieldGroupEditor);

client/src/components/custom-field-groups/CustomFieldGroupEditor/CustomFieldGroupEditor.module.scss

@@ -0,0 +1,17 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .field {
+    margin-bottom: 8px;
+  }
+
+  .text {
+    color: #444444;
+    font-size: 12px;
+    font-weight: bold;
+    padding-bottom: 6px;
+  }
+}

client/src/components/custom-field-groups/CustomFieldGroupEditor/index.js

@@ -0,0 +1,8 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import CustomFieldGroupEditor from './CustomFieldGroupEditor';
+
+export default CustomFieldGroupEditor;

client/src/components/custom-field-groups/CustomFieldGroupStep/CustomField.jsx

@@ -0,0 +1,62 @@
+/*!
+ * 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, Icon } from 'semantic-ui-react';
+
+import selectors from '../../../selectors';
+
+import styles from './CustomField.module.scss';
+
+const CustomField = React.memo(({ id, index, onEdit }) => {
+  const selectCustomFieldById = useMemo(() => selectors.makeSelectCustomFieldById(), []);
+
+  const customField = useSelector((state) => selectCustomFieldById(state, id));
+
+  const handleEditClick = useCallback(() => {
+    onEdit(id);
+  }, [id, onEdit]);
+
+  return (
+    <Draggable draggableId={id} index={index} isDragDisabled={!customField.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}
+            >
+              {customField.showOnFrontOfCard && <Icon name="pin" className={styles.nameIcon} />}
+              {customField.name}
+            </span>
+            <Button
+              icon="pencil"
+              size="small"
+              floated="right"
+              disabled={!customField.isPersisted}
+              className={styles.editButton}
+              onClick={handleEditClick}
+            />
+          </div>
+        );
+
+        return isDragging ? ReactDOM.createPortal(contentNode, document.body) : contentNode;
+      }}
+    </Draggable>
+  );
+});
+
+CustomField.propTypes = {
+  id: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
+  onEdit: PropTypes.func.isRequired,
+};
+
+export default CustomField;

client/src/components/custom-field-groups/CustomFieldGroupStep/CustomField.module.scss

@@ -0,0 +1,45 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .editButton {
+    background: transparent;
+    box-shadow: none;
+    flex: 0 0 auto;
+    font-weight: normal;
+    padding: 8px 10px;
+    text-decoration: underline;
+
+    &:hover {
+      background: #e9e9e9;
+    }
+  }
+
+  .name {
+    background: rgba(9, 30, 66, 0.04);
+    border-radius: 3px;
+    color: #17394d;
+    flex: 1 1 auto;
+    font-size: 14px;
+    overflow: hidden;
+    padding: 8px 32px 8px 10px;
+    position: relative;
+    text-overflow: ellipsis;
+  }
+
+  .nameIcon {
+    color: rgba(9, 30, 66, 0.24);
+    font-size: 12px;
+    margin: 0 8px 0 0;
+    width: 14px;
+  }
+
+  .wrapper {
+    display: flex;
+    margin-bottom: 4px;
+    max-width: 280px;
+    white-space: nowrap;
+  }
+}

client/src/components/custom-field-groups/CustomFieldGroupStep/CustomFieldAddStep.jsx

@@ -0,0 +1,73 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React, { useCallback, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { Button, Form } from 'semantic-ui-react';
+import { Popup } from '../../../lib/custom-ui';
+
+import entryActions from '../../../entry-actions';
+import { useForm } from '../../../hooks';
+import CustomFieldEditor from './CustomFieldEditor';
+
+import styles from './CustomFieldAddStep.module.scss';
+
+const CustomFieldAddStep = React.memo(({ customFieldGroupId, defaultData, onBack }) => {
+  const dispatch = useDispatch();
+  const [t] = useTranslation();
+
+  const [data, handleFieldChange] = useForm(() => ({
+    name: '',
+    showOnFrontOfCard: false,
+    ...defaultData,
+  }));
+
+  const customFieldEditorRef = useRef(null);
+
+  const handleSubmit = useCallback(() => {
+    const cleanData = {
+      ...data,
+      name: data.name.trim() || null,
+    };
+
+    if (!cleanData.name) {
+      customFieldEditorRef.current.selectNameField();
+      return;
+    }
+
+    dispatch(entryActions.createCustomFieldInGroup(customFieldGroupId, cleanData));
+    onBack();
+  }, [customFieldGroupId, onBack, dispatch, data]);
+
+  return (
+    <>
+      <Popup.Header onBack={onBack}>
+        {t('common.addCustomField', {
+          context: 'title',
+        })}
+      </Popup.Header>
+      <Popup.Content>
+        <Form onSubmit={handleSubmit}>
+          <CustomFieldEditor
+            ref={customFieldEditorRef}
+            data={data}
+            onFieldChange={handleFieldChange}
+          />
+          <Button positive content={t('action.addCustomField')} className={styles.submitButton} />
+        </Form>
+      </Popup.Content>
+    </>
+  );
+});
+
+CustomFieldAddStep.propTypes = {
+  customFieldGroupId: PropTypes.string.isRequired,
+  defaultData: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  onBack: PropTypes.func.isRequired,
+};
+
+export default CustomFieldAddStep;

client/src/components/custom-field-groups/CustomFieldGroupStep/CustomFieldAddStep.module.scss

@@ -0,0 +1,10 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .submitButton {
+    margin-top: 12px;
+  }
+}

client/src/components/custom-field-groups/CustomFieldGroupStep/CustomFieldEditStep.jsx

@@ -0,0 +1,122 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import { dequal } from 'dequal';
+import React, { useCallback, useMemo, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { Button, Form } from 'semantic-ui-react';
+import { Popup } from '../../../lib/custom-ui';
+
+import selectors from '../../../selectors';
+import entryActions from '../../../entry-actions';
+import { useForm, useSteps } from '../../../hooks';
+import CustomFieldEditor from './CustomFieldEditor';
+import ConfirmationStep from '../../common/ConfirmationStep';
+
+import styles from './CustomFieldEditStep.module.scss';
+
+const StepTypes = {
+  DELETE: 'DELETE',
+};
+
+const CustomFieldEditStep = React.memo(({ id, onBack }) => {
+  const selectCustomFieldById = useMemo(() => selectors.makeSelectCustomFieldById(), []);
+
+  const customField = useSelector((state) => selectCustomFieldById(state, id));
+
+  const dispatch = useDispatch();
+  const [t] = useTranslation();
+
+  const defaultData = useMemo(
+    () => ({
+      name: customField.name,
+      showOnFrontOfCard: customField.showOnFrontOfCard,
+    }),
+    [customField.name, customField.showOnFrontOfCard],
+  );
+
+  const [data, handleFieldChange] = useForm(() => ({
+    name: '',
+    showOnFrontOfCard: false,
+    ...defaultData,
+  }));
+
+  const [step, openStep, handleBack] = useSteps();
+
+  const customFieldEditorRef = useRef(null);
+
+  const handleSubmit = useCallback(() => {
+    const cleanData = {
+      ...data,
+      name: data.name.trim() || null,
+    };
+
+    if (!cleanData.name) {
+      customFieldEditorRef.current.selectNameField();
+      return;
+    }
+
+    if (!dequal(cleanData, defaultData)) {
+      dispatch(entryActions.updateCustomField(id, cleanData));
+    }
+
+    onBack();
+  }, [id, onBack, dispatch, defaultData, data]);
+
+  const handleDeleteConfirm = useCallback(() => {
+    dispatch(entryActions.deleteCustomField(id));
+    onBack();
+  }, [id, onBack, dispatch]);
+
+  const handleDeleteClick = useCallback(() => {
+    openStep(StepTypes.DELETE);
+  }, [openStep]);
+
+  if (step && step.type === StepTypes.DELETE) {
+    return (
+      <ConfirmationStep
+        title="common.deleteCustomField"
+        content="common.areYouSureYouWantToDeleteThisCustomField"
+        buttonContent="action.deleteCustomField"
+        onConfirm={handleDeleteConfirm}
+        onBack={handleBack}
+      />
+    );
+  }
+
+  return (
+    <>
+      <Popup.Header onBack={onBack}>
+        {t('common.editCustomField', {
+          context: 'title',
+        })}
+      </Popup.Header>
+      <Popup.Content>
+        <Form onSubmit={handleSubmit}>
+          <CustomFieldEditor
+            ref={customFieldEditorRef}
+            data={data}
+            onFieldChange={handleFieldChange}
+          />
+          <Button positive content={t('action.save')} className={styles.submitButton} />
+        </Form>
+        <Button
+          content={t('action.delete')}
+          className={styles.deleteButton}
+          onClick={handleDeleteClick}
+        />
+      </Popup.Content>
+    </>
+  );
+});
+
+CustomFieldEditStep.propTypes = {
+  id: PropTypes.string.isRequired,
+  onBack: PropTypes.func.isRequired,
+};
+
+export default CustomFieldEditStep;

client/src/components/custom-field-groups/CustomFieldGroupStep/CustomFieldEditStep.module.scss

@@ -0,0 +1,17 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .deleteButton {
+    bottom: 12px;
+    box-shadow: 0 1px 0 #cbcccc;
+    position: absolute;
+    right: 9px;
+  }
+
+  .submitButton {
+    margin-top: 12px;
+  }
+}

client/src/components/custom-field-groups/CustomFieldGroupStep/CustomFieldEditor.jsx

@@ -0,0 +1,67 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React, { useCallback, useEffect, useImperativeHandle } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Radio } from 'semantic-ui-react';
+import { Input } from '../../../lib/custom-ui';
+
+import { useNestedRef } from '../../../hooks';
+
+import styles from './CustomFieldEditor.module.scss';
+
+const CustomFieldEditor = React.forwardRef(({ data, onFieldChange }, ref) => {
+  const [t] = useTranslation();
+
+  const [nameFieldRef, handleNameFieldRef] = useNestedRef('inputRef');
+
+  const selectNameField = useCallback(() => {
+    nameFieldRef.current.select();
+  }, [nameFieldRef]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      selectNameField,
+    }),
+    [selectNameField],
+  );
+
+  useEffect(() => {
+    nameFieldRef.current.focus();
+  }, [nameFieldRef]);
+
+  return (
+    <>
+      <div className={styles.text}>{t('common.title')}</div>
+      <Input
+        fluid
+        ref={handleNameFieldRef}
+        name="name"
+        value={data.name}
+        maxLength={128}
+        className={styles.fieldName}
+        onChange={onFieldChange}
+      />
+      <Radio
+        toggle
+        name="showOnFrontOfCard"
+        checked={data.showOnFrontOfCard}
+        label={t('common.showOnFrontOfCard')}
+        className={classNames(styles.field, styles.fieldRadio)}
+        onChange={onFieldChange}
+      />
+    </>
+  );
+});
+
+CustomFieldEditor.propTypes = {
+  data: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  onFieldChange: PropTypes.func.isRequired,
+};
+
+export default React.memo(CustomFieldEditor);

client/src/components/custom-field-groups/CustomFieldGroupStep/CustomFieldEditor.module.scss

@@ -0,0 +1,25 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .field {
+    margin-bottom: 8px;
+  }
+
+  .fieldName {
+    margin-bottom: 16px;
+  }
+
+  .fieldRadio {
+    width: 100%;
+  }
+
+  .text {
+    color: #444444;
+    font-size: 12px;
+    font-weight: bold;
+    padding-bottom: 6px;
+  }
+}

client/src/components/custom-field-groups/CustomFieldGroupStep/CustomFieldGroupStep.jsx

@@ -0,0 +1,43 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+
+import selectors from '../../../selectors';
+import UnbasedContent from './UnbasedContent';
+import EditCustomFieldGroupStep from '../EditCustomFieldGroupStep';
+
+const CustomFieldGroupStep = React.memo(({ id, onBack, onClose }) => {
+  const selectCustomFielGroupdById = useMemo(() => selectors.makeSelectCustomFieldGroupById(), []);
+
+  const customFieldGroup = useSelector((state) => selectCustomFielGroupdById(state, id));
+
+  if (customFieldGroup.baseCustomFieldGroupId) {
+    return (
+      <EditCustomFieldGroupStep
+        withDeleteButton
+        id={id}
+        onBack={onBack}
+        onClose={onBack || onClose}
+      />
+    );
+  }
+
+  return <UnbasedContent id={id} onBack={onBack || onClose} />;
+});
+
+CustomFieldGroupStep.propTypes = {
+  id: PropTypes.string.isRequired,
+  onBack: PropTypes.func,
+  onClose: PropTypes.func.isRequired,
+};
+
+CustomFieldGroupStep.defaultProps = {
+  onBack: undefined,
+};
+
+export default CustomFieldGroupStep;

client/src/components/custom-field-groups/CustomFieldGroupStep/UnbasedContent.jsx

@@ -0,0 +1,228 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React, { useCallback, useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { DragDropContext, Droppable } from 'react-beautiful-dnd';
+import { Button } from 'semantic-ui-react';
+import { Input, Popup } from '../../../lib/custom-ui';
+
+import selectors from '../../../selectors';
+import entryActions from '../../../entry-actions';
+import { useField, useNestedRef, useSteps } from '../../../hooks';
+import DroppableTypes from '../../../constants/DroppableTypes';
+import CustomFieldAddStep from './CustomFieldAddStep';
+import CustomFieldEditStep from './CustomFieldEditStep';
+import CustomField from './CustomField';
+import EditCustomFieldGroupStep from '../EditCustomFieldGroupStep';
+import ConfirmationStep from '../../common/ConfirmationStep';
+
+import styles from './UnbasedContent.module.scss';
+
+const StepTypes = {
+  EDIT: 'EDIT',
+  DELETE: 'DELETE',
+  ADD_CUSTOM_FIELD: 'ADD_CUSTOM_FIELD',
+  EDIT_CUSTOM_FIELD: 'EDIT_CUSTOM_FIELD',
+};
+
+const UnbasedContent = React.memo(({ id, onBack }) => {
+  const selectCustomFielGroupdById = useMemo(() => selectors.makeSelectCustomFieldGroupById(), []);
+
+  const customFieldGroup = useSelector((state) => selectCustomFielGroupdById(state, id));
+
+  const selectCustomFieldsByGroupId = useMemo(
+    () => selectors.makeSelectCustomFieldsByGroupId(),
+    [],
+  );
+
+  const customFields = useSelector((state) => selectCustomFieldsByGroupId(state, id));
+
+  const dispatch = useDispatch();
+  const [t] = useTranslation();
+  const [step, openStep, handleBack] = useSteps();
+  const [search, handleSearchChange] = useField('');
+  const cleanSearch = useMemo(() => search.trim().toLowerCase(), [search]);
+
+  const filteredCustomFields = useMemo(
+    () =>
+      customFields.filter((customField) => customField.name.toLowerCase().includes(cleanSearch)),
+    [customFields, cleanSearch],
+  );
+
+  const [searchFieldRef, handleSearchFieldRef] = useNestedRef('inputRef');
+
+  const handleDeleteConfirm = useCallback(() => {
+    dispatch(entryActions.deleteCustomFieldGroup(id));
+  }, [id, dispatch]);
+
+  const handleCustomFieldDragEnd = useCallback(
+    ({ draggableId, source, destination }) => {
+      if (!destination || source.index === destination.index) {
+        return;
+      }
+
+      dispatch(entryActions.moveCustomField(draggableId, destination.index));
+    },
+    [dispatch],
+  );
+
+  const handleEditClick = useCallback(() => {
+    openStep(StepTypes.EDIT);
+  }, [openStep]);
+
+  const handleDeleteClick = useCallback(() => {
+    openStep(StepTypes.DELETE);
+  }, [openStep]);
+
+  const handleCustomFieldAddClick = useCallback(() => {
+    openStep(StepTypes.ADD_CUSTOM_FIELD);
+  }, [openStep]);
+
+  const handleCustomFieldEdit = useCallback(
+    (customFieldId) => {
+      openStep(StepTypes.EDIT_CUSTOM_FIELD, {
+        id: customFieldId,
+      });
+    },
+    [openStep],
+  );
+
+  useEffect(() => {
+    searchFieldRef.current.focus({
+      preventScroll: true,
+    });
+  }, [searchFieldRef]);
+
+  if (step) {
+    switch (step.type) {
+      case StepTypes.EDIT:
+        return <EditCustomFieldGroupStep id={id} onBack={handleBack} onClose={handleBack} />;
+      case StepTypes.DELETE:
+        return (
+          <ConfirmationStep
+            title="common.deleteCustomFieldGroup"
+            content="common.areYouSureYouWantToDeleteThisCustomFieldGroup"
+            buttonContent="action.deleteCustomFieldGroup"
+            typeValue={customFieldGroup.boardId ? customFieldGroup.name : undefined}
+            typeContent={customFieldGroup.boardId ? 'common.typeTitleToConfirm' : undefined}
+            onConfirm={handleDeleteConfirm}
+            onBack={handleBack}
+          />
+        );
+      case StepTypes.ADD_CUSTOM_FIELD:
+        return (
+          <CustomFieldAddStep
+            customFieldGroupId={id}
+            // TODO: memoize?
+            defaultData={{
+              name: search,
+            }}
+            onBack={handleBack}
+          />
+        );
+      case StepTypes.EDIT_CUSTOM_FIELD: {
+        const currentCustomField = customFields.find(
+          (customField) => customField.id === step.params.id,
+        );
+
+        if (currentCustomField) {
+          return <CustomFieldEditStep id={currentCustomField.id} onBack={handleBack} />;
+        }
+
+        openStep(null);
+
+        break;
+      }
+      default:
+    }
+  }
+
+  return (
+    <>
+      <Popup.Header onBack={onBack}>
+        {t('common.customFieldGroup', {
+          context: 'title',
+        })}
+      </Popup.Header>
+      <Popup.Content>
+        <Input
+          fluid
+          ref={handleSearchFieldRef}
+          value={search}
+          placeholder={t('common.searchCustomFields')}
+          maxLength={128}
+          icon="search"
+          onChange={handleSearchChange}
+        />
+        {filteredCustomFields.length > 0 && (
+          <DragDropContext onDragEnd={handleCustomFieldDragEnd}>
+            <Droppable droppableId="customFields" type={DroppableTypes.CUSTOM_FIELD}>
+              {({ innerRef, droppableProps, placeholder }) => (
+                <div
+                  {...droppableProps} // eslint-disable-line react/jsx-props-no-spreading
+                  ref={innerRef}
+                  className={styles.items}
+                >
+                  {filteredCustomFields.map((customField, index) => (
+                    <CustomField
+                      key={customField.id}
+                      id={customField.id}
+                      index={index}
+                      onEdit={handleCustomFieldEdit}
+                    />
+                  ))}
+                  {placeholder}
+                </div>
+              )}
+            </Droppable>
+            <Droppable droppableId="customFields:hack" type={DroppableTypes.CUSTOM_FIELD}>
+              {({ innerRef, droppableProps, placeholder }) => (
+                <div
+                  {...droppableProps} // eslint-disable-line react/jsx-props-no-spreading
+                  ref={innerRef}
+                  className={styles.droppableHack}
+                >
+                  {placeholder}
+                </div>
+              )}
+            </Droppable>
+          </DragDropContext>
+        )}
+        <Button
+          fluid
+          content={t('action.addCustomField')}
+          className={styles.actionButton}
+          onClick={handleCustomFieldAddClick}
+        />
+        <Button
+          fluid
+          content={t('action.editGroup')}
+          className={styles.actionButton}
+          onClick={handleEditClick}
+        />
+        <Button
+          fluid
+          content={t('action.deleteGroup')}
+          className={styles.actionButton}
+          onClick={handleDeleteClick}
+        />
+      </Popup.Content>
+    </>
+  );
+});
+
+UnbasedContent.propTypes = {
+  id: PropTypes.string.isRequired,
+  onBack: PropTypes.func,
+};
+
+UnbasedContent.defaultProps = {
+  onBack: undefined,
+};
+
+export default UnbasedContent;

client/src/components/custom-field-groups/CustomFieldGroupStep/UnbasedContent.module.scss

@@ -0,0 +1,53 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .actionButton {
+    background: transparent;
+    box-shadow: none;
+    color: #6b808c;
+    font-weight: normal;
+    margin-top: 8px;
+    padding: 6px 11px;
+    text-align: left;
+    text-decoration: underline;
+    transition: background 0.3s ease;
+
+    &:hover {
+      background: #e9e9e9;
+    }
+  }
+
+  .droppableHack {
+    display: none;
+    position: fixed;
+  }
+
+  .items {
+    margin-top: 8px;
+    max-height: 60vh;
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    @supports (-moz-appearance: none) {
+      scrollbar-color: rgba(0, 0, 0, 0.32) transparent;
+      scrollbar-width: thin;
+    }
+
+    &::-webkit-scrollbar {
+      width: 9px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-clip: padding-box;
+      border-left: 0.25em transparent solid;
+      border-radius: 3px;
+    }
+  }
+}

client/src/components/custom-field-groups/CustomFieldGroupStep/index.js

@@ -0,0 +1,8 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import CustomFieldGroupStep from './CustomFieldGroupStep';
+
+export default CustomFieldGroupStep;

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

@@ -0,0 +1,191 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React, { useCallback, useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { DragDropContext, Droppable } from 'react-beautiful-dnd';
+import { Button } from 'semantic-ui-react';
+import { Input, Popup } from '../../../lib/custom-ui';
+
+import selectors from '../../../selectors';
+import entryActions from '../../../entry-actions';
+import { useField, useNestedRef, useSteps } from '../../../hooks';
+import DroppableTypes from '../../../constants/DroppableTypes';
+import Item from './Item';
+import CustomFieldGroupStep from '../CustomFieldGroupStep';
+import AddCustomFieldGroupStep from '../AddCustomFieldGroupStep';
+
+import styles from './CustomFieldGroupsStep.module.scss';
+
+const StepTypes = {
+  ADD: 'ADD',
+  EDIT: 'EDIT',
+};
+
+const CustomFieldGroupsStep = React.memo(({ onBack }) => {
+  const customFieldGroups = useSelector(selectors.selectCustomFieldGroupsForCurrentBoard);
+
+  const dispatch = useDispatch();
+  const [t] = useTranslation();
+  const [step, openStep, handleBack] = useSteps();
+  const [search, handleSearchChange] = useField('');
+  const cleanSearch = useMemo(() => search.trim().toLowerCase(), [search]);
+
+  const filteredCustomFieldGroups = useMemo(
+    () =>
+      customFieldGroups.filter((customFieldGroup) =>
+        customFieldGroup.name.toLowerCase().includes(cleanSearch),
+      ),
+    [customFieldGroups, cleanSearch],
+  );
+
+  const [searchFieldRef, handleSearchFieldRef] = useNestedRef('inputRef');
+
+  const handleCreate = useCallback(
+    (data) => {
+      dispatch(entryActions.createCustomFieldGroupInCurrentBoard(data));
+    },
+    [dispatch],
+  );
+
+  const handleDragEnd = useCallback(
+    ({ draggableId, source, destination }) => {
+      if (!destination || source.index === destination.index) {
+        return;
+      }
+
+      dispatch(entryActions.moveCustomFieldGroup(draggableId, destination.index));
+    },
+    [dispatch],
+  );
+
+  const handleAddClick = useCallback(() => {
+    openStep(StepTypes.ADD);
+  }, [openStep]);
+
+  const handleEdit = useCallback(
+    (id) => {
+      openStep(StepTypes.EDIT, {
+        id,
+      });
+    },
+    [openStep],
+  );
+
+  useEffect(() => {
+    searchFieldRef.current.focus({
+      preventScroll: true,
+    });
+  }, [searchFieldRef]);
+
+  if (step) {
+    switch (step.type) {
+      case StepTypes.ADD:
+        return (
+          <AddCustomFieldGroupStep
+            onCreate={handleCreate}
+            onBack={handleBack}
+            onClose={handleBack}
+          />
+        );
+      case StepTypes.EDIT: {
+        const currentCustomFieldGroup = customFieldGroups.find(
+          (customFieldGroup) => customFieldGroup.id === step.params.id,
+        );
+
+        if (currentCustomFieldGroup) {
+          return (
+            <CustomFieldGroupStep
+              id={currentCustomFieldGroup.id}
+              onBack={handleBack}
+              onClose={handleBack}
+            />
+          );
+        }
+
+        openStep(null);
+
+        break;
+      }
+      default:
+    }
+  }
+
+  return (
+    <>
+      <Popup.Header onBack={onBack}>
+        {t('common.customFieldGroups', {
+          context: 'title',
+        })}
+      </Popup.Header>
+      <Popup.Content>
+        <Input
+          fluid
+          ref={handleSearchFieldRef}
+          value={search}
+          placeholder={t('common.searchCustomFieldGroups')}
+          maxLength={128}
+          icon="search"
+          onChange={handleSearchChange}
+        />
+        {filteredCustomFieldGroups.length > 0 && (
+          <DragDropContext onDragEnd={handleDragEnd}>
+            <Droppable droppableId="customFieldGroups" type={DroppableTypes.CUSTOM_FIELD_GROUP}>
+              {({ innerRef, droppableProps, placeholder }) => (
+                <div
+                  {...droppableProps} // eslint-disable-line react/jsx-props-no-spreading
+                  ref={innerRef}
+                  className={styles.items}
+                >
+                  {filteredCustomFieldGroups.map((customFieldGroup, index) => (
+                    <Item
+                      key={customFieldGroup.id}
+                      id={customFieldGroup.id}
+                      index={index}
+                      onEdit={handleEdit}
+                    />
+                  ))}
+                  {placeholder}
+                </div>
+              )}
+            </Droppable>
+            <Droppable
+              droppableId="customFieldGroups:hack"
+              type={DroppableTypes.CUSTOM_FIELD_GROUP}
+            >
+              {({ innerRef, droppableProps, placeholder }) => (
+                <div
+                  {...droppableProps} // eslint-disable-line react/jsx-props-no-spreading
+                  ref={innerRef}
+                  className={styles.droppableHack}
+                >
+                  {placeholder}
+                </div>
+              )}
+            </Droppable>
+          </DragDropContext>
+        )}
+        <Button
+          fluid
+          content={t('action.addCustomFieldGroup')}
+          className={styles.actionButton}
+          onClick={handleAddClick}
+        />
+      </Popup.Content>
+    </>
+  );
+});
+
+CustomFieldGroupsStep.propTypes = {
+  onBack: PropTypes.func,
+};
+
+CustomFieldGroupsStep.defaultProps = {
+  onBack: undefined,
+};
+
+export default CustomFieldGroupsStep;

client/src/components/custom-field-groups/CustomFieldGroupsStep/CustomFieldGroupsStep.module.scss

@@ -0,0 +1,53 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .actionButton {
+    background: transparent;
+    box-shadow: none;
+    color: #6b808c;
+    font-weight: normal;
+    margin-top: 8px;
+    padding: 6px 11px;
+    text-align: left;
+    text-decoration: underline;
+    transition: background 0.3s ease;
+
+    &:hover {
+      background: #e9e9e9;
+    }
+  }
+
+  .droppableHack {
+    display: none;
+    position: fixed;
+  }
+
+  .items {
+    margin-top: 8px;
+    max-height: 60vh;
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    @supports (-moz-appearance: none) {
+      scrollbar-color: rgba(0, 0, 0, 0.32) transparent;
+      scrollbar-width: thin;
+    }
+
+    &::-webkit-scrollbar {
+      width: 9px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-clip: padding-box;
+      border-left: 0.25em transparent solid;
+      border-radius: 3px;
+    }
+  }
+}

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;

client/src/components/custom-field-groups/CustomFieldGroupsStep/Item.module.scss

@@ -0,0 +1,38 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .editButton {
+    background: transparent;
+    box-shadow: none;
+    flex: 0 0 auto;
+    font-weight: normal;
+    padding: 8px 10px;
+    text-decoration: underline;
+
+    &:hover {
+      background: #e9e9e9;
+    }
+  }
+
+  .name {
+    background: rgba(9, 30, 66, 0.04);
+    border-radius: 3px;
+    color: #17394d;
+    flex: 1 1 auto;
+    font-size: 14px;
+    overflow: hidden;
+    padding: 8px 32px 8px 10px;
+    position: relative;
+    text-overflow: ellipsis;
+  }
+
+  .wrapper {
+    display: flex;
+    margin-bottom: 4px;
+    max-width: 280px;
+    white-space: nowrap;
+  }
+}

client/src/components/custom-field-groups/CustomFieldGroupsStep/index.js

@@ -0,0 +1,8 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import CustomFieldGroupsStep from './CustomFieldGroupsStep';
+
+export default CustomFieldGroupsStep;

client/src/components/custom-field-groups/EditCustomFieldGroupStep/EditCustomFieldGroupStep.jsx

@@ -0,0 +1,126 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import { dequal } from 'dequal';
+import React, { useCallback, useMemo, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { Button, Form } from 'semantic-ui-react';
+import { Popup } from '../../../lib/custom-ui';
+
+import selectors from '../../../selectors';
+import entryActions from '../../../entry-actions';
+import { useForm, useSteps } from '../../../hooks';
+import CustomFieldGroupEditor from '../CustomFieldGroupEditor';
+import ConfirmationStep from '../../common/ConfirmationStep';
+
+import styles from './EditCustomFieldGroupStep.module.scss';
+
+const StepTypes = {
+  DELETE: 'DELETE',
+};
+
+const EditCustomFieldGroupStep = React.memo(({ id, withDeleteButton, onBack, onClose }) => {
+  const selectCustomFieldGroupById = useMemo(() => selectors.makeSelectCustomFieldGroupById(), []);
+
+  const customFieldGroup = useSelector((state) => selectCustomFieldGroupById(state, id));
+
+  const dispatch = useDispatch();
+  const [t] = useTranslation();
+
+  const defaultData = useMemo(
+    () => ({
+      name: customFieldGroup.name,
+    }),
+    [customFieldGroup.name],
+  );
+
+  const [data, handleFieldChange] = useForm({
+    name: '',
+    ...defaultData,
+  });
+
+  const [step, openStep, handleBack] = useSteps();
+
+  const customFieldGroupEditorRef = useRef(null);
+
+  const handleSubmit = useCallback(() => {
+    const cleanData = {
+      ...data,
+      name: data.name.trim(),
+    };
+
+    if (!cleanData.name) {
+      customFieldGroupEditorRef.current.selectNameField();
+      return;
+    }
+
+    if (!dequal(cleanData, defaultData)) {
+      dispatch(entryActions.updateCustomFieldGroup(id, cleanData));
+    }
+
+    onClose();
+  }, [id, onClose, dispatch, defaultData, data, customFieldGroupEditorRef]);
+
+  const handleDeleteConfirm = useCallback(() => {
+    dispatch(entryActions.deleteCustomFieldGroup(id));
+  }, [id, dispatch]);
+
+  const handleDeleteClick = useCallback(() => {
+    openStep(StepTypes.DELETE);
+  }, [openStep]);
+
+  if (step && step.type === StepTypes.DELETE) {
+    return (
+      <ConfirmationStep
+        title="common.deleteCustomFieldGroup"
+        content="common.areYouSureYouWantToDeleteThisCustomFieldGroup"
+        buttonContent="action.deleteCustomFieldGroup"
+        typeValue={customFieldGroup.boardId ? customFieldGroup.name : undefined}
+        typeContent={customFieldGroup.boardId ? 'common.typeTitleToConfirm' : undefined}
+        onConfirm={handleDeleteConfirm}
+        onBack={handleBack}
+      />
+    );
+  }
+
+  return (
+    <>
+      <Popup.Header onBack={onBack}>
+        {t('common.editCustomFieldGroup', {
+          context: 'title',
+        })}
+      </Popup.Header>
+      <Popup.Content>
+        <Form onSubmit={handleSubmit}>
+          <CustomFieldGroupEditor data={data} onFieldChange={handleFieldChange} />
+          <Button positive content={t('action.save')} />
+        </Form>
+        {withDeleteButton && (
+          <Button
+            content={t('action.delete')}
+            className={styles.deleteButton}
+            onClick={handleDeleteClick}
+          />
+        )}
+      </Popup.Content>
+    </>
+  );
+});
+
+EditCustomFieldGroupStep.propTypes = {
+  id: PropTypes.string.isRequired,
+  withDeleteButton: PropTypes.bool,
+  onBack: PropTypes.func,
+  onClose: PropTypes.func.isRequired,
+};
+
+EditCustomFieldGroupStep.defaultProps = {
+  withDeleteButton: false,
+  onBack: undefined,
+};
+
+export default EditCustomFieldGroupStep;

client/src/components/custom-field-groups/EditCustomFieldGroupStep/EditCustomFieldGroupStep.module.scss

@@ -0,0 +1,13 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .deleteButton {
+    bottom: 12px;
+    box-shadow: 0 1px 0 #cbcccc;
+    position: absolute;
+    right: 9px;
+  }
+}

client/src/components/custom-field-groups/EditCustomFieldGroupStep/index.js

@@ -0,0 +1,8 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import EditCustomFieldGroupStep from './EditCustomFieldGroupStep';
+
+export default EditCustomFieldGroupStep;