fix: clear field error in Editor after the field value is changed (#7216

) * fix: remove field error in Editor after the field is changed * fix: add px to control hint * fix: add ControlTopbar for correct error display at widget * chore: update after tests * chore: update caniuse-lite * fix: child list element should have key prop * chore: update formatting * fix: add ControlTopbar margin and padding * fix: add changes to the tests * fix: remove the comments --------- Co-authored-by: Martin Jagodic <[email protected]> Co-authored-by: Anze Demsar <[email protected]>
decaporg · Nov 12, 2024 · d9655ea · d9655ea
1 parent 1d0cd61
commit d9655ea
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 42 deletions.
diff --git a/cypress/e2e/markdown_widget_code_block_spec.js b/cypress/e2e/markdown_widget_code_block_spec.js
@@ -77,7 +77,8 @@ function codeBlock(content) {
     <div>
       <div></div>
       <div>
-        <div><label>Code Block</label>
+        <div>
+          <div><label>Code Block</label></div>
           <div><button><span><svg>
                   <path></path>
                 </svg></span></button>

diff --git a/cypress/utils/steps.js b/cypress/utils/steps.js
@@ -69,6 +69,7 @@ function assertColorOn(cssProperty, color, opts) {
     } else {
       (opts.scope ? opts.scope : cy)
         .contains('label', opts.label)
+        .parents()
         .next()
         .should(assertion);
     }
@@ -518,23 +519,31 @@ function validateNestedListFields() {
   cy.contains('button', 'hotel locations').click();
   cy.contains('button', 'cities').click();
   cy.contains('label', 'City')
+    .parents()
     .next()
+    .first()
     .type('Washington DC');
   cy.contains('label', 'Number of Hotels in City')
+    .parents()
     .next()
+    .first()
     .type('5');
   cy.contains('button', 'city locations').click();
 
   // add second city list item
   cy.contains('button', 'cities').click();
   cy.contains('label', 'Cities')
+    .parents()
     .next()
+    .first()
     .find('div[class*=SortableListItem]')
     .eq(2)
     .as('secondCitiesListControl');
   cy.get('@secondCitiesListControl')
     .contains('label', 'City')
+    .parents()
     .next()
+    .first()
     .type('Boston');
   cy.get('@secondCitiesListControl')
     .contains('button', 'city locations')
@@ -561,21 +570,25 @@ function validateNestedListFields() {
 
   // list control aliases
   cy.contains('label', 'Hotel Locations')
+    .parents()
     .next()
     .find('div[class*=SortableListItem]')
     .first()
     .as('hotelLocationsListControl');
   cy.contains('label', 'Cities')
+    .parents()
     .next()
     .find('div[class*=SortableListItem]')
     .eq(0)
     .as('firstCitiesListControl');
   cy.contains('label', 'City Locations')
+    .parents()
     .next()
     .find('div[class*=SortableListItem]')
     .eq(0)
     .as('firstCityLocationsListControl');
   cy.contains('label', 'Cities')
+    .parents()
     .next()
     .find('div[class*=SortableListItem]')
     .eq(3)
@@ -589,7 +602,9 @@ function validateNestedListFields() {
   assertListControlErrorStatus([colorError, colorError], '@secondCityLocationsListControl');
 
   cy.contains('label', 'Hotel Name')
+    .parents()
     .next()
+    .first()
     .type('The Ritz Carlton');
   cy.contains('button', 'Save').click();
   assertNotification(notifications.error.missingField);
@@ -598,12 +613,20 @@ function validateNestedListFields() {
   // fill out rest of form and save
   cy.get('@secondCitiesListControl')
     .contains('label', 'Number of Hotels in City')
+    .parents()
+    .next()
+    .first()
     .type(3);
   cy.get('@secondCitiesListControl')
     .contains('label', 'Hotel Name')
+    .parents()
+    .next()
+    .first()
     .type('Grand Hyatt');
   cy.contains('label', 'Country')
+    .parents()
     .next()
+    .first()
     .type('United States');
   flushClockAndSave();
   assertNotification(notifications.saved);

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/decap-cms-core/src/actions/entries.ts b/packages/decap-cms-core/src/actions/entries.ts
@@ -431,8 +431,11 @@ export function changeDraftFieldValidation(
   };
 }
 
-export function clearFieldErrors() {
-  return { type: DRAFT_CLEAR_ERRORS };
+export function clearFieldErrors(uniqueFieldId: string) {
+  return {
+    type: DRAFT_CLEAR_ERRORS,
+    payload: { uniqueFieldId },
+  };
 }
 
 export function localBackupRetrieved(entry: EntryValue) {

diff --git a/packages/decap-cms-core/src/components/Editor/EditorControlPane/EditorControl.js b/packages/decap-cms-core/src/components/Editor/EditorControlPane/EditorControl.js
@@ -62,7 +62,6 @@ const styleStrings = {
   disabled: `
     pointer-events: none;
     opacity: 0.5;
-    background: #ccc;
   `,
   hidden: `
     visibility: hidden;
@@ -77,18 +76,26 @@ const ControlContainer = styled.div`
   }
 `;
 
+const ControlTopbar = styled.div`
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+  align-items: end;
+`;
 const ControlErrorsList = styled.ul`
   list-style-type: none;
   font-size: 12px;
   color: ${colors.errorText};
-  margin-bottom: 8px;
   text-align: right;
+  text-transform: uppercase;
   font-weight: 600;
+  margin: 0;
+  padding: 2px 0 3px;
 `;
 
 export const ControlHint = styled.p`
   margin-bottom: 0;
-  padding: 3px 0;
+  padding: 6px 0 0;
   font-size: 12px;
   color: ${props =>
     props.error ? colors.errorText : props.active ? colors.active : colors.controlLabel};
@@ -238,28 +245,30 @@ class EditorControl extends React.Component {
               ${isHidden && styleStrings.hidden};
             `}
           >
-            {widget.globalStyles && <Global styles={coreCss`${widget.globalStyles}`} />}
-            {errors && (
-              <ControlErrorsList>
-                {errors.map(
-                  error =>
-                    error.message &&
-                    typeof error.message === 'string' && (
-                      <li key={error.message.trim().replace(/[^a-z0-9]+/gi, '-')}>
-                        {error.message}
-                      </li>
-                    ),
-                )}
-              </ControlErrorsList>
-            )}
-            <LabelComponent
-              field={field}
-              isActive={isSelected || this.state.styleActive}
-              hasErrors={hasErrors}
-              uniqueFieldId={this.uniqueFieldId}
-              isFieldOptional={isFieldOptional}
-              t={t}
-            />
+            <ControlTopbar>
+              {widget.globalStyles && <Global styles={coreCss`${widget.globalStyles}`} />}
+              <LabelComponent
+                field={field}
+                isActive={isSelected || this.state.styleActive}
+                hasErrors={hasErrors}
+                uniqueFieldId={this.uniqueFieldId}
+                isFieldOptional={isFieldOptional}
+                t={t}
+              />
+              {errors && (
+                <ControlErrorsList>
+                  {errors.map(
+                    error =>
+                      error.message &&
+                      typeof error.message === 'string' && (
+                        <li key={error.message.trim().replace(/[^a-z0-9]+/gi, '-')}>
+                          {error.message}
+                        </li>
+                      ),
+                  )}
+                </ControlErrorsList>
+              )}
+            </ControlTopbar>
             <Widget
               classNameWrapper={cx(
                 css`
@@ -302,7 +311,10 @@ class EditorControl extends React.Component {
               value={value}
               mediaPaths={mediaPaths}
               metadata={metadata}
-              onChange={(newValue, newMetadata) => onChange(field, newValue, newMetadata)}
+              onChange={(newValue, newMetadata) => {
+                onChange(field, newValue, newMetadata);
+                clearFieldErrors(this.uniqueFieldId); // Видаляємо помилки лише для цього поля
+              }}
               onValidate={onValidate && partial(onValidate, this.uniqueFieldId)}
               onOpenMediaLibrary={openMediaLibrary}
               onClearMediaControl={clearMediaControl}

diff --git a/packages/decap-cms-core/src/components/Editor/EditorToolbar.js b/packages/decap-cms-core/src/components/Editor/EditorToolbar.js
@@ -594,11 +594,20 @@ export class EditorToolbar extends React.Component {
       </SaveButton>,
       currentStatus
         ? [
-            this.renderWorkflowStatusControls(),
-            this.renderNewEntryWorkflowPublishControls({ canCreate, canPublish }),
+            <React.Fragment key="workflow-status-controls">
+              {this.renderWorkflowStatusControls()}
+              {!hasChanged && this.renderNewEntryWorkflowPublishControls({ canCreate, canPublish })}
+            </React.Fragment>,
           ]
-        : !isNewEntry &&
-          this.renderExistingEntryWorkflowPublishControls({ canCreate, canPublish, canDelete }),
+        : !isNewEntry && (
+            <React.Fragment key="existing-entry-workflow-publish-controls">
+              {this.renderExistingEntryWorkflowPublishControls({
+                canCreate,
+                canPublish,
+                canDelete,
+              })}
+            </React.Fragment>
+          ),
       (!showDelete || useOpenAuthoring) && !hasUnpublishedChanges && !isModification ? null : (
         <DeleteButton
           key="delete-button"

diff --git a/packages/decap-cms-core/src/reducers/entryDraft.js b/packages/decap-cms-core/src/reducers/entryDraft.js
@@ -129,7 +129,8 @@ function entryDraftReducer(state = Map(), action) {
       }
 
     case DRAFT_CLEAR_ERRORS: {
-      return state.set('fieldsErrors', Map());
+      const { uniqueFieldId } = action.payload;
+      return state.deleteIn(['fieldsErrors', uniqueFieldId]);
     }
 
     case ENTRY_PERSIST_REQUEST: