feat(open-authoring): add hover tooltip (#5567)

packages/netlify-cms-core/src/components/Editor/EditorToolbar.js

@@ -41,6 +41,40 @@ const styles = {
   `,
 };
 
+const TooltipText = styled.div`
+  visibility: hidden;
+  width: 321px;
+  background-color: #555;
+  color: #fff;
+  text-align: unset;
+  border-radius: 6px;
+  padding: 5px;
+
+  /* Position the tooltip text */
+  position: absolute;
+  z-index: 1;
+  top: 145%;
+  left: 50%;
+  margin-left: -320px;
+
+  /* Fade in tooltip */
+  opacity: 0;
+  transition: opacity 0.3s;
+`;
+
+const Tooltip = styled.div`
+  position: relative;
+  display: inline-block;
+  &:hover + ${TooltipText} {
+    visibility: visible;
+    opacity: 0.9;
+  }
+`;
+
+const TooltipContainer = styled.div`
+  position: relative;
+`;
+
 const DropdownButton = styled(StyledDropdownButton)`
   ${styles.noOverflow}
   @media (max-width: 1200px) {
@@ -301,40 +335,64 @@ export class EditorToolbar extends React.Component {
     );
   };
 
+  renderStatusInfoTooltip = () => {
+    const { t, currentStatus } = this.props;
+
+    const statusToLocaleKey = {
+      [status.get('DRAFT')]: 'statusInfoTooltipDraft',
+      [status.get('PENDING_REVIEW')]: 'statusInfoTooltipInReview',
+    };
+
+    const statusKey = Object.keys(statusToLocaleKey).find(key => key === currentStatus);
+    return (
+      <TooltipContainer>
+        <Tooltip>
+          <Icon type="info-circle" size="small" className="tooltip" />
+        </Tooltip>
+        {statusKey && (
+          <TooltipText>{t(`editor.editorToolbar.${statusToLocaleKey[statusKey]}`)}</TooltipText>
+        )}
+      </TooltipContainer>
+    );
+  };
+
   renderWorkflowStatusControls = () => {
     const { isUpdatingStatus, onChangeStatus, currentStatus, t, useOpenAuthoring } = this.props;
     return (
-      <ToolbarDropdown
-        dropdownTopOverlap="40px"
-        dropdownWidth="120px"
-        renderButton={() => (
-          <StatusButton>
-            {isUpdatingStatus
-              ? t('editor.editorToolbar.updating')
-              : t('editor.editorToolbar.setStatus')}
-          </StatusButton>
-        )}
-      >
-        <StatusDropdownItem
-          label={t('editor.editorToolbar.draft')}
-          onClick={() => onChangeStatus('DRAFT')}
-          icon={currentStatus === status.get('DRAFT') ? 'check' : null}
-        />
-        <StatusDropdownItem
-          label={t('editor.editorToolbar.inReview')}
-          onClick={() => onChangeStatus('PENDING_REVIEW')}
-          icon={currentStatus === status.get('PENDING_REVIEW') ? 'check' : null}
-        />
-        {useOpenAuthoring ? (
-          ''
-        ) : (
+      <>
+        <ToolbarDropdown
+          dropdownTopOverlap="40px"
+          dropdownWidth="120px"
+          renderButton={() => (
+            <StatusButton>
+              {isUpdatingStatus
+                ? t('editor.editorToolbar.updating')
+                : t('editor.editorToolbar.setStatus')}
+            </StatusButton>
+          )}
+        >
           <StatusDropdownItem
-            label={t('editor.editorToolbar.ready')}
-            onClick={() => onChangeStatus('PENDING_PUBLISH')}
-            icon={currentStatus === status.get('PENDING_PUBLISH') ? 'check' : null}
+            label={t('editor.editorToolbar.draft')}
+            onClick={() => onChangeStatus('DRAFT')}
+            icon={currentStatus === status.get('DRAFT') ? 'check' : null}
           />
-        )}
-      </ToolbarDropdown>
+          <StatusDropdownItem
+            label={t('editor.editorToolbar.inReview')}
+            onClick={() => onChangeStatus('PENDING_REVIEW')}
+            icon={currentStatus === status.get('PENDING_REVIEW') ? 'check' : null}
+          />
+          {useOpenAuthoring ? (
+            ''
+          ) : (
+            <StatusDropdownItem
+              label={t('editor.editorToolbar.ready')}
+              onClick={() => onChangeStatus('PENDING_PUBLISH')}
+              icon={currentStatus === status.get('PENDING_PUBLISH') ? 'check' : null}
+            />
+          )}
+        </ToolbarDropdown>
+        {useOpenAuthoring && this.renderStatusInfoTooltip()}
+      </>
     );
   };
 

packages/netlify-cms-core/src/components/Editor/__tests__/EditorToolbar.spec.js

@@ -4,21 +4,6 @@ import { fromJS } from 'immutable';
 
 import { EditorToolbar } from '../EditorToolbar';
 
-jest.mock('netlify-cms-ui-default', () => ({
-  // eslint-disable-next-line react/display-name
-  Icon: props => <mock-icon {...props} />,
-  // eslint-disable-next-line react/display-name
-  Dropdown: props => <mock-dropdown {...props} />,
-  // eslint-disable-next-line react/display-name
-  DropdownItem: props => <mock-dropdown-item {...props} />,
-  // eslint-disable-next-line react/display-name
-  StyledDropdownButton: props => <mock-dropdown-button {...props} />,
-  colorsRaw: {},
-  colors: {},
-  components: {},
-  buttons: {},
-  zIndex: {},
-}));
 jest.mock('../../UI', () => ({
   // eslint-disable-next-line react/display-name
   SettingsDropdown: props => <mock-settings-dropdown {...props} />,
@@ -112,5 +97,19 @@ describe('EditorToolbar', () => {
       );
       expect(asFragment()).toMatchSnapshot();
     });
+
+    ['draft', 'pending_review', 'pending_publish'].forEach(status => {
+      it(`should render with status=${status},useOpenAuthoring=${useOpenAuthoring}`, () => {
+        const { asFragment } = render(
+          <EditorToolbar
+            {...props}
+            hasWorkflow={true}
+            currentStatus={status}
+            useOpenAuthoring={useOpenAuthoring}
+          />,
+        );
+        expect(asFragment()).toMatchSnapshot();
+      });
+    });
   });
 });