feat: Version 2

Closes #627, closes #1047
2025-05-10 02:09:06 +02:00
parent ad7fb51cfa
commit 2ee1166747
1557 changed files with 76832 additions and 47042 deletions
@@ -0,0 +1,79 @@
+/*!
+ * 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 } 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 { Input, Popup } from '../../../lib/custom-ui';
+
+import entryActions from '../../../entry-actions';
+import { useForm, useNestedRef } from '../../../hooks';
+
+import styles from './AddBaseCustomFieldGroupStep.module.scss';
+
+const AddBaseCustomFieldGroupStep = React.memo(({ onClose }) => {
+  const dispatch = useDispatch();
+  const [t] = useTranslation();
+
+  const [data, handleFieldChange] = useForm({
+    name: '',
+  });
+
+  const [nameFieldRef, handleNameFieldRef] = useNestedRef('inputRef');
+
+  const handleSubmit = useCallback(() => {
+    const cleanData = {
+      ...data,
+      name: data.name.trim(),
+    };
+
+    if (!cleanData.name) {
+      nameFieldRef.current.select();
+      return;
+    }
+
+    dispatch(entryActions.createBaseCustomFieldGroupInCurrentProject(cleanData));
+    onClose();
+  }, [onClose, dispatch, data, nameFieldRef]);
+
+  useEffect(() => {
+    nameFieldRef.current.focus({
+      preventScroll: true,
+    });
+  }, [nameFieldRef]);
+
+  return (
+    <>
+      <Popup.Header>
+        {t('common.createCustomFieldGroup', {
+          context: 'title',
+        })}
+      </Popup.Header>
+      <Popup.Content>
+        <Form onSubmit={handleSubmit}>
+          <div className={styles.text}>{t('common.title')}</div>
+          <Input
+            fluid
+            ref={handleNameFieldRef}
+            name="name"
+            value={data.name}
+            maxLength={128}
+            className={styles.field}
+            onChange={handleFieldChange}
+          />
+          <Button positive content={t('action.createCustomFieldGroup')} />
+        </Form>
+      </Popup.Content>
+    </>
+  );
+});
+
+AddBaseCustomFieldGroupStep.propTypes = {
+  onClose: PropTypes.func.isRequired,
+};
+
+export default AddBaseCustomFieldGroupStep;
@@ -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;
+  }
+}
@@ -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 AddBaseCustomFieldGroupStep from './AddBaseCustomFieldGroupStep';
+
+export default AddBaseCustomFieldGroupStep;
@@ -0,0 +1,68 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import upperFirst from 'lodash/upperFirst';
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+
+import selectors from '../../../selectors';
+
+import styles from './BaseCustomFieldGroupChip.module.scss';
+
+const Sizes = {
+  TINY: 'tiny',
+  SMALL: 'small',
+  MEDIUM: 'medium',
+};
+
+const BaseCustomFieldGroupChip = React.memo(({ id, size, onClick }) => {
+  const selectBaseCustomFieldGroupById = useMemo(
+    () => selectors.makeSelectBaseCustomFieldGroupById(),
+    [],
+  );
+
+  const baseCustomFieldGroup = useSelector((state) => selectBaseCustomFieldGroupById(state, id));
+
+  const contentNode = (
+    <span
+      title={baseCustomFieldGroup.name}
+      className={classNames(
+        styles.wrapper,
+        styles[`wrapper${upperFirst(size)}`],
+        onClick && styles.wrapperHoverable,
+      )}
+    >
+      {baseCustomFieldGroup.name}
+    </span>
+  );
+
+  return onClick ? (
+    <button
+      type="button"
+      disabled={!baseCustomFieldGroup.isPersisted}
+      className={styles.button}
+      onClick={onClick}
+    >
+      {contentNode}
+    </button>
+  ) : (
+    contentNode
+  );
+});
+
+BaseCustomFieldGroupChip.propTypes = {
+  id: PropTypes.string.isRequired,
+  size: PropTypes.oneOf(Object.values(Sizes)),
+  onClick: PropTypes.func,
+};
+
+BaseCustomFieldGroupChip.defaultProps = {
+  size: Sizes.MEDIUM,
+  onClick: undefined,
+};
+
+export default BaseCustomFieldGroupChip;
@@ -0,0 +1,55 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .button {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    display: inline-block;
+    max-width: 100%;
+    outline: none;
+    padding: 0;
+  }
+
+  .wrapper {
+    background: #dce0e4;
+    border-radius: 3px;
+    color: #6a808b;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transition: background 0.3s ease;
+    vertical-align: top;
+    white-space: nowrap;
+  }
+
+  .wrapperHoverable:hover {
+    background: #d2d8dc;
+    color: #17394d;
+  }
+
+  /* Sizes */
+
+  .wrapperTiny {
+    font-size: 12px;
+    line-height: 20px;
+    max-width: 176px;
+    padding: 0px 6px;
+  }
+
+  .wrapperSmall {
+    font-size: 12px;
+    line-height: 20px;
+    max-width: 176px;
+    padding: 2px 8px;
+  }
+
+  .wrapperMedium {
+    line-height: 20px;
+    max-width: 230px;
+    padding: 6px 12px;
+  }
+}
@@ -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 BaseCustomFieldGroupChip from './BaseCustomFieldGroupChip';
+
+export default BaseCustomFieldGroupChip;
@@ -0,0 +1,234 @@
+/*!
+ * 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 EditStep from './EditStep';
+import CustomField from './CustomField';
+import CustomFieldAddStep from './CustomFieldAddStep';
+import CustomFieldEditStep from './CustomFieldEditStep';
+import ConfirmationStep from '../../common/ConfirmationStep';
+
+import styles from './BaseCustomFieldGroupStep.module.scss';
+
+const StepTypes = {
+  EDIT: 'EDIT',
+  DELETE: 'DELETE',
+  ADD_CUSTOM_FIELD: 'ADD_CUSTOM_FIELD',
+  EDIT_CUSTOM_FIELD: 'EDIT_CUSTOM_FIELD',
+};
+
+const BaseCustomFieldGroupStep = React.memo(({ id, onBack, onClose }) => {
+  const selectBaseCustomFieldGroupById = useMemo(
+    () => selectors.makeSelectBaseCustomFieldGroupById(),
+    [],
+  );
+
+  const selectCustomFieldsByBaseGroupId = useMemo(
+    () => selectors.makeSelectCustomFieldsByBaseGroupId(),
+    [],
+  );
+
+  const baseCustomFieldGroupName = useSelector(
+    (state) => selectBaseCustomFieldGroupById(state, id).name,
+  );
+
+  const customFields = useSelector((state) => selectCustomFieldsByBaseGroupId(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.deleteBaseCustomFieldGroup(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 <EditStep baseCustomFieldGroupId={id} onBack={handleBack} onClose={onClose} />;
+      case StepTypes.DELETE:
+        return (
+          <ConfirmationStep
+            title="common.deleteCustomFieldGroup"
+            content="common.areYouSureYouWantToDeleteThisCustomFieldGroup"
+            buttonContent="action.deleteCustomFieldGroup"
+            typeValue={baseCustomFieldGroupName}
+            typeContent="common.typeTitleToConfirm"
+            onConfirm={handleDeleteConfirm}
+            onBack={handleBack}
+          />
+        );
+      case StepTypes.ADD_CUSTOM_FIELD:
+        return (
+          <CustomFieldAddStep
+            baseCustomFieldGroupId={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>
+    </>
+  );
+});
+
+BaseCustomFieldGroupStep.propTypes = {
+  id: PropTypes.string.isRequired,
+  onBack: PropTypes.func,
+  onClose: PropTypes.func.isRequired,
+};
+
+BaseCustomFieldGroupStep.defaultProps = {
+  onBack: undefined,
+};
+
+export default BaseCustomFieldGroupStep;
@@ -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;
+    }
+  }
+}
@@ -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;
@@ -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;
+  }
+}
@@ -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(({ baseCustomFieldGroupId, 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.createCustomFieldInBaseGroup(baseCustomFieldGroupId, cleanData));
+    onBack();
+  }, [baseCustomFieldGroupId, 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 = {
+  baseCustomFieldGroupId: PropTypes.string.isRequired,
+  defaultData: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  onBack: PropTypes.func.isRequired,
+};
+
+export default CustomFieldAddStep;
@@ -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;
+  }
+}
@@ -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;
@@ -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;
+  }
+}
@@ -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);
@@ -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;
+  }
+}
@@ -0,0 +1,103 @@
+/*!
+ * 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, useEffect, useMemo } 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 { Input, Popup } from '../../../lib/custom-ui';
+
+import selectors from '../../../selectors';
+import entryActions from '../../../entry-actions';
+import { useForm, useNestedRef } from '../../../hooks';
+
+import styles from './EditStep.module.scss';
+
+const EditStep = React.memo(({ baseCustomFieldGroupId, onBack, onClose }) => {
+  const selectBaseCustomFieldGroupById = useMemo(
+    () => selectors.makeSelectBaseCustomFieldGroupById(),
+    [],
+  );
+
+  const baseCustomFieldGroup = useSelector((state) =>
+    selectBaseCustomFieldGroupById(state, baseCustomFieldGroupId),
+  );
+
+  const dispatch = useDispatch();
+  const [t] = useTranslation();
+
+  const defaultData = useMemo(
+    () => ({
+      name: baseCustomFieldGroup.name,
+    }),
+    [baseCustomFieldGroup.name],
+  );
+
+  const [data, handleFieldChange] = useForm({
+    name: '',
+    ...defaultData,
+  });
+
+  const [nameFieldRef, handleNameFieldRef] = useNestedRef('inputRef');
+
+  const handleSubmit = useCallback(() => {
+    const cleanData = {
+      ...data,
+      name: data.name.trim(),
+    };
+
+    if (!cleanData.name) {
+      nameFieldRef.current.select();
+      return;
+    }
+
+    if (!dequal(cleanData, defaultData)) {
+      dispatch(entryActions.updateBaseCustomFieldGroup(baseCustomFieldGroupId, cleanData));
+    }
+
+    onClose();
+  }, [baseCustomFieldGroupId, onClose, dispatch, defaultData, data, nameFieldRef]);
+
+  useEffect(() => {
+    nameFieldRef.current.focus({
+      preventScroll: true,
+    });
+  }, [nameFieldRef]);
+
+  return (
+    <>
+      <Popup.Header onBack={onBack}>
+        {t('common.editCustomFieldGroup', {
+          context: 'title',
+        })}
+      </Popup.Header>
+      <Popup.Content>
+        <Form onSubmit={handleSubmit}>
+          <div className={styles.text}>{t('common.title')}</div>
+          <Input
+            fluid
+            ref={handleNameFieldRef}
+            name="name"
+            value={data.name}
+            maxLength={128}
+            className={styles.field}
+            onChange={handleFieldChange}
+          />
+          <Button positive content={t('action.save')} />
+        </Form>
+      </Popup.Content>
+    </>
+  );
+});
+
+EditStep.propTypes = {
+  baseCustomFieldGroupId: PropTypes.string.isRequired,
+  onBack: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default EditStep;
@@ -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;
+  }
+}
@@ -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 BaseCustomFieldGroupStep from './BaseCustomFieldGroupStep';
+
+export default BaseCustomFieldGroupStep;