@blaze-cms/plugin-data-ui 0.146.0-rc-eagle-3.10 → 0.146.0-rc-eagle-3.11

package/src/components/EntityManager/Entity/Entity.js

@@ -5,7 +5,7 @@ import { useApolloClient } from '@apollo/client';
 import PropTypes from 'prop-types';
 import { RenderHook } from '@blaze-cms/plugin-render-hooks-ui';
 import { getQuery } from '@blaze-cms/admin-ui-utils';
-import { FormBuilder, parseFormValues } from '@blaze-cms/react-form-builder';
+import { FormBuilder, parseFormValues, validate } from '@blaze-cms/react-form-builder';
 import { DeleteAction, CopyDataFromAction } from '@blaze-cms/admin';
 import { useToasts } from '@blaze-react/toaster';
 import cloneDeep from 'lodash.clonedeep';
@@ -23,13 +23,17 @@ import {
   PAGE_BUILDER_TEMPLATE_FIELD_ID,
   ERROR,
   SAVE_BUTTON_TEXTS,
-  UNPUBLISHED_WARNING
+  UNPUBLISHED_WARNING,
+  VIEW_UNPUBLISHED_REASON,
+  TITLE_FIELD_ID
 } from '../../../constants';
 import EntityHeader from './EntityHeader';
 
 import {
   validateSideBarRelations,
+  canEditTitle,
   canViewPage,
+  hasViewableUrl,
   onViewUrlClick,
   getUpdatedFormValues,
   checkFulfilConditions
@@ -407,9 +411,29 @@ const Entity = ({
 
   const showModal = checkFulfilConditions(formData, modalStatus);
 
-  const onViewUrlHandler = canViewPage(entity, schema, entityIsPublished)
-    ? () => onViewUrlClick(getFullUrl)
-    : onViewUrl;
+  // Unpublished keeps the button, disabled with a reason, rather than hiding it.
+  const isViewable = canViewPage(entity, schema, entityIsPublished);
+  const onViewUrlHandler = isViewable ? () => onViewUrlClick(getFullUrl) : onViewUrl;
+  const viewUrlDisabledReason =
+    !isViewable && hasViewableUrl(entity, schema) ? VIEW_UNPUBLISHED_REASON : null;
+
+  const onTitleChange = value => {
+    if (!componentIsMounted.current) return;
+    const updatedFormValues = getUpdatedFormValues({ id: TITLE_FIELD_ID, value, formValues });
+    const [isValid, valuesChecked] = validate({
+      values: updatedFormValues,
+      schema,
+      currentField: TITLE_FIELD_ID
+    });
+
+    setFormValues(valuesChecked);
+    setPageTitle(value);
+    setIsFormValid(isValid);
+    setIsSaveButtonAvailable(isValid);
+    isValid && setSaveButtonText(SAVE_BUTTON_TEXTS.save);
+  };
+
+  const onTitleChangeHandler = canEditTitle(schema, formValues) ? onTitleChange : null;
 
   const pageName = formData && formData.values && formData.values.name;
 
@@ -434,6 +458,8 @@ const Entity = ({
           toggleModal={setModalStatus}
           formData={formData}
           onViewUrl={onViewUrlHandler}
+          viewUrlDisabledReason={viewUrlDisabledReason}
+          onTitleChange={onTitleChangeHandler}
           saveButtonText={saveButtonText}
           saveOnChange={saveOnChange}
           entitySchema={entitySchema}

package/src/components/EntityManager/Entity/EntityHeader/EntityHeader.js

@@ -22,6 +22,8 @@ const EntityHeader = ({
   formData,
   pageName,
   onViewUrl,
+  viewUrlDisabledReason,
+  onTitleChange,
   saveOnChange
 }) => {
   const SaveButtonModifiers = isSaveButtonAvailable ? ['small'] : ['small', 'disabled'];
@@ -36,7 +38,17 @@ const EntityHeader = ({
     deleteAction.active && formData && Object.keys(formData.values).length !== 0;
 
   return (
-    <PageHeader title={pageTitle} pageName={pageName} onViewUrl={onViewUrl}>
+    <PageHeader
+      title={pageTitle}
+      pageName={pageName}
+      onViewUrl={onViewUrl}
+      viewUrlDisabledReason={viewUrlDisabledReason}
+      onTitleChange={onTitleChange}
+      titleActions={
+        showPreviewButton ? (
+          <HeaderPreviewButton itemId={entityData.id} itemEntity={entityIdentifier} iconOnly />
+        ) : null
+      }>
       <PageHeader.Actions>
         {!saveOnChange && (
           <Button onClick={onSubmit} modifiers={SaveButtonModifiers} data-testid="button-save">
@@ -96,6 +108,8 @@ EntityHeader.propTypes = {
   toggleModal: PropTypes.func.isRequired,
   formData: PropTypes.object,
   onViewUrl: PropTypes.func.isRequired,
+  viewUrlDisabledReason: PropTypes.string,
+  onTitleChange: PropTypes.func,
   saveButtonText: PropTypes.string,
   saveOnChange: PropTypes.bool.isRequired
 };
@@ -105,6 +119,8 @@ EntityHeader.defaultProps = {
   entityIdentifier: '',
   formData: null,
   pageName: '',
+  viewUrlDisabledReason: null,
+  onTitleChange: null,
   saveButtonText: 'save'
 };
 

package/src/components/EntityManager/Entity/EntityHeader/HeaderPreviewButton/HeaderPreviewButton.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Button from '@blaze-react/button';
+import { PageHeader } from '@blaze-cms/admin';
 import { useMutation } from '@apollo/client';
 import { getMutation } from '@blaze-cms/admin-ui-utils';
 import { DEBUG_PARAM } from '../../../../../constants';
 
-const HeaderPreviewButton = ({ itemId, itemEntity }) => {
+const HeaderPreviewButton = ({ itemId, itemEntity, iconOnly }) => {
   const [createPreviewToken] = useMutation(getMutation('PREVIEW_TOKEN_MUTATION'));
   if (process.env.BLAZE_DISABLE_PREVIEW) return null;
 
@@ -35,6 +36,17 @@ const HeaderPreviewButton = ({ itemId, itemEntity }) => {
     } catch (err) {}
   };
 
+  if (iconOnly) {
+    return (
+      <PageHeader.IconButton
+        icon="visibility"
+        label="Preview"
+        onClick={onViewPreview}
+        data-testid="page-header-preview"
+      />
+    );
+  }
+
   return (
     <Button className="more-menu__link" onClick={onViewPreview}>
       Preview
@@ -44,7 +56,12 @@ const HeaderPreviewButton = ({ itemId, itemEntity }) => {
 
 HeaderPreviewButton.propTypes = {
   itemId: PropTypes.string.isRequired,
-  itemEntity: PropTypes.string.isRequired
+  itemEntity: PropTypes.string.isRequired,
+  iconOnly: PropTypes.bool
+};
+
+HeaderPreviewButton.defaultProps = {
+  iconOnly: false
 };
 
 export default HeaderPreviewButton;

package/src/components/EntityManager/utils/entity.js

@@ -1,13 +1,31 @@
-import { DEBUG_PARAM, ENTITY_PUBLISHED, SELECT_DEFAULT_VALUE } from '../../../constants';
+import {
+  DEBUG_PARAM,
+  ENTITY_PUBLISHED,
+  SELECT_DEFAULT_VALUE,
+  TITLE_FIELD_ID
+} from '../../../constants';
+
+// Whether this record has a front end url at all, publish state aside.
+function hasViewableUrl(entity, schema) {
+  return !!(entity && entity.id && schema && schema.id && schema.properties.slug);
+}
 
 function canViewPage(entity, schema, entityIsPublished) {
-  return (
-    entity &&
-    entity.id &&
-    schema &&
-    schema.id &&
-    entityIsPublished === ENTITY_PUBLISHED &&
-    schema.properties.slug
+  return hasViewableUrl(entity, schema) && entityIsPublished === ENTITY_PUBLISHED;
+}
+
+// The header title is only editable inline when it is the record's name field.
+function canEditTitle(schema, formValues) {
+  const { properties = {}, displayProperties = {} } = schema || {};
+  const { adminHeader } = displayProperties || {};
+  const isTitleFromName =
+    !adminHeader || (adminHeader.length === 1 && adminHeader[0] === TITLE_FIELD_ID);
+
+  return !!(
+    isTitleFromName &&
+    properties[TITLE_FIELD_ID] &&
+    Array.isArray(formValues) &&
+    formValues.some(({ id }) => id === TITLE_FIELD_ID)
   );
 }
 
@@ -71,7 +89,9 @@ function checkFulfilConditions(...args) {
 }
 
 export {
+  canEditTitle,
   canViewPage,
+  hasViewableUrl,
   validateSideBarRelations,
   onViewUrlClick,
   getUpdatedFormValues,

package/src/constants.js

@@ -6,6 +6,7 @@ const ENTITY_PUBLISHED = 'published';
 const SELECT_DEFAULT_VALUE = 'Please Choose...';
 const LEAVE_PAGE_MESSAGE = 'You are going to leave without saving. Are you sure you want to leave?';
 const KEY_TO_CHECK = 'values.slug';
+const TITLE_FIELD_ID = 'name';
 const MENU_PERMISSIONS = ['update:any', 'update:own', 'create:any', 'create:own'];
 const PREVIEW_INTERFACE = 'preview/can-preview';
 const PAGE_BUILDER_FIELD_ID = 'pageBuilder';
@@ -18,6 +19,7 @@ const SAVE_BUTTON_TEXTS = { save: 'save', saved: 'saved', saving: 'saving' };
 const ACTIONS = 'actions';
 const UNPUBLISHED_WARNING = 'Page already unpublished';
 const PAGE_NOT_FOUND = 'Page not found';
+const VIEW_UNPUBLISHED_REASON = 'Not published yet - publish to view it on the site';
 const SAVE_BEFORE_PUBLISH_MESSAGE =
   'You have to click save to create the record before you can publish';
 
@@ -46,6 +48,7 @@ export {
   DEBUG_PARAM,
   ENTITY_PUBLISHED,
   KEY_TO_CHECK,
+  TITLE_FIELD_ID,
   LEAVE_PAGE_MESSAGE,
   MENU_PERMISSIONS,
   PAGE_BUILDER,
@@ -70,6 +73,7 @@ export {
   ICON_SIZE,
   ICON_COLOR,
   PAGE_NOT_FOUND,
+  VIEW_UNPUBLISHED_REASON,
   ENTER_KEY,
   DEFAULT_FILTER_OPTION_LABEL
 };