API Use new class_description configuration

Author: GuySartorelli

client/dist/js/bundle.js

@@ -114,38 +114,24 @@ class Header extends Component {
     );
   }
 
-  renderStatusBadge() {
-    const {
-      element: { isLiveVersion, isPublished },
-    } = this.props;
-
-    // No indication required for published elements
-    if (isPublished && isLiveVersion) {
+  renderStatusFlagBadges() {
+    const statusFlags = this.props.element.statusFlags;
+    if (!statusFlags) {
       return null;
     }
-
-    let versionStateTitle = '';
-    let versionStateButtonTitle = '';
-    const stateClassNames = ['badge'];
-
-    if (!isPublished) {
-      versionStateTitle = i18n._t('ElementHeader.BADGE_DRAFT', 'Draft');
-      versionStateButtonTitle = i18n._t('ElementHeader.STATE_DRAFT', 'Item has not been published yet');
-      stateClassNames.push('status-addedtodraft');
-    } else if (!isLiveVersion) {
-      versionStateTitle = i18n._t('ElementHeader.BADGE_MODIFIED', 'Modified');
-      versionStateButtonTitle = i18n._t('ElementHeader.STATE_MODIFIED', 'Item has unpublished changes');
-      stateClassNames.push('status-modified');
+    const badges = [];
+    // eslint-disable-next-line no-restricted-syntax
+    for (let [cssClasses, data] of Object.entries(statusFlags)) {
+      cssClasses = `badge status-${cssClasses}`;
+      if (typeof data === 'string') {
+        data = { text: data };
+      }
+      if (!data.title) {
+        data.title = '';
+      }
+      badges.push(<span key={cssClasses} className={cssClasses} title={data.title}>{data.text}</span>);
     }
-
-    return (
-      <span
-        className={classNames(stateClassNames)}
-        title={versionStateButtonTitle}
-      >
-        {versionStateTitle}
-      </span>
-    );
+    return badges;
   }
 
   render() {
@@ -209,7 +195,7 @@ class Header extends Component {
             </Tooltip>}
           </div>
           <h3 className={titleClasses}>{title}</h3>
-          {this.renderStatusBadge()}
+          {this.renderStatusFlagBadges()}
         </div>
         {!simple && <div className="element-editor-header__actions">
           <div role="none" onClick={(event) => event.stopPropagation()}>

client/dist/styles/bundle.css

@@ -29,8 +29,6 @@
     max-width: calc(100% - 60px);
 
     .badge {
-      color: $state-draft;
-      background-color: $state-modified-bg;
       padding: 2px 3px 2px 4px;
       margin-left: 0.5rem;
     }

client/src/components/ElementEditor/Header.js

@@ -225,7 +225,13 @@ test('Header should render a versioned draft badge when the element is not publi
     element: {
       id: 14,
       isPublished: false,
-      liveVersion: false
+      liveVersion: false,
+      statusFlags: {
+        addedtodraft: {
+          text: 'Draft',
+          title: 'Item has not been published yet'
+        }
+      }
     }
   })}
   />);
@@ -242,7 +248,13 @@ test('Header should render a versioned modified badge when the element is modifi
     element: {
       id: 14,
       isPublished: true,
-      isLiveVersion: false
+      isLiveVersion: false,
+      statusFlags: {
+        modified: {
+          text: 'Modified',
+          title: 'Item has unpublished changes'
+        }
+      }
     }
   })}
   />);

client/src/components/ElementEditor/Header.scss

@@ -22,7 +22,7 @@ class MyElement extends BaseElement
 
     private static $plural_name = 'my elements';
 
-    private static $description = 'What my custom element does';
+    private static $class_description = 'What my custom element does';
 
     public function getCMSFields()
     {

client/src/components/ElementEditor/tests/Header-test.js

@@ -205,6 +205,7 @@ public function apiReadElements(HTTPRequest $request): HTTPResponse
                 'canPublish' => $element->canPublish(),
                 'canUnpublish' => $element->canUnpublish(),
                 'canCreate' => $element->canCreate(),
+                'statusFlags' => $element->getStatusFlags(),
             ];
         }
         $this->extend('updateApiReadElementalArea', $data, $request);

docs/en/04_defining-you-own-elements.md

@@ -60,13 +60,7 @@ class BaseElement extends DataObject implements CMSPreviewable
 
     /**
      * Describe the purpose of this element
-     *
-     * @config
-     * @var string
-     * @deprecated 5.4.0 use class_description instead.
      */
-    private static $description = 'Base element class';
-
     private static $class_description = 'Base element class';
 
     /**
@@ -1122,10 +1116,7 @@ public function getIcon()
      */
     public function getTypeNice()
     {
-        $description = $this->config()->uninherited('description');
-        if ($description) {
-            $description = _t(__CLASS__ . '.Description', $description);
-        }
+        $description = $this->i18n_classDescription();
         $markup = ($description) ? ' <span class="element__note"> &mdash; ' . $description . '</span>' : '';
 
         return DBField::create_field(

src/Controllers/ElementalAreaController.php

@@ -23,11 +23,6 @@ class ElementContent extends BaseElement
 
     private static $plural_name = 'content blocks';
 
-    /**
-     * @deprecated 5.4.0 use class_description instead.
-     */
-    private static $description = 'HTML text block';
-
     private static $class_description = 'HTML text block';
 
     /**