Clean up styles

2022-09-19 21:15:15 -04:00
parent 38bbe3ebb7
commit c5a8a7cc1a
13 changed files with 682 additions and 477 deletions
--- a/packages/netlify-cms-core/package.json
+++ b/packages/netlify-cms-core/package.json
@ -49,7 +49,7 @@
    "react-frame-component": "^5.2.1",
    "react-hot-loader": "^4.8.0",
    "react-immutable-proptypes": "^2.1.0",
-    "react-is": "16.13.1",
+    "react-is": "18.2.0",
    "react-markdown": "^6.0.2",
    "react-modal": "^3.8.1",
    "react-polyglot": "^0.7.0",
@ -92,6 +92,7 @@
    "react-immutable-proptypes": "^2.1.0"
  },
  "devDependencies": {
+    "@types/react": "18.0.20",
    "@types/history": "^4.7.8",
    "@types/redux-mock-store": "^1.0.2",
    "@types/url-join": "^4.0.0",
--- a/packages/netlify-cms-core/src/bootstrap.js
+++ b/packages/netlify-cms-core/src/bootstrap.js
@ -3,6 +3,7 @@ import { render } from 'react-dom';
 import { Provider, connect } from 'react-redux';
 import { Route, Router } from 'react-router-dom';
 import { I18n } from 'react-polyglot';
+import { GlobalStyles } from 'netlify-cms-ui-default';

 import { store } from './redux';
 import { history } from './routing/history';
@ -84,6 +85,7 @@ function bootstrap(opts = {}) {
  function Root() {
    return (
      <>
+        <GlobalStyles />
        <Provider store={store}>
          <ConnectedTranslatedApp />
        </Provider>
--- a/packages/netlify-cms-core/src/components/App/App.js
+++ b/packages/netlify-cms-core/src/components/App/App.js
@ -33,6 +33,11 @@ TopBarProgress.config({
  barThickness: 2,
 });

+const AppWrapper = styled.div`
+  width: 100%;
+  min-height: 100%;
+`
+
 const AppMainContainer = styled.div`
  min-width: 1200px;
  max-width: 1440px;
@ -175,7 +180,7 @@ class App extends React.Component {
    const hasWorkflow = publishMode === EDITORIAL_WORKFLOW;

    return (
-      <>
+      <AppWrapper className="cms-wrapper">
        <Notifs CustomComponent={Toast} />
        <Header
          user={user}
@ -248,7 +253,7 @@ class App extends React.Component {
          </Switch>
          {useMediaLibrary ? <MediaLibrary /> : null}
        </AppMainContainer>
-      </>
+      </AppWrapper>
    );
  }
 }
--- a/packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControl.js
+++ b/packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControl.js
@ -7,7 +7,13 @@ import { ClassNames, Global, css as coreCss } from '@emotion/core';
 import styled from '@emotion/styled';
 import { partial, uniqueId } from 'lodash';
 import { connect } from 'react-redux';
-import { FieldLabel, colors, transitions, lengths, borders } from 'netlify-cms-ui-default';
+import {
+  FieldLabel,
+  colors,
+  transitions,
+  lengths,
+  borders,
+} from 'netlify-cms-ui-default';
 import ReactMarkdown from 'react-markdown';
 import gfm from 'remark-gfm';

--- a/packages/netlify-cms-core/src/components/Editor/EditorPreviewPane/EditorPreviewContent.js
+++ b/packages/netlify-cms-core/src/components/Editor/EditorPreviewPane/EditorPreviewContent.js
@ -1,24 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { isElement } from 'react-is';
-
-/**
- * We need to create a lightweight component here so that we can access the
- * context within the Frame. This allows us to attach the ScrollSyncPane to the
- * body.
- */
-class PreviewContent extends React.Component {
-  render() {
-    const { previewComponent, previewProps } = this.props;
-    return isElement(previewComponent)
-      ? React.cloneElement(previewComponent, previewProps)
-      : React.createElement(previewComponent, previewProps);
-  }
-}
-
-PreviewContent.propTypes = {
-  previewComponent: PropTypes.func.isRequired,
-  previewProps: PropTypes.object,
-};
-
-export default PreviewContent;
--- a/packages/netlify-cms-core/src/components/Editor/EditorPreviewPane/EditorPreviewContent.tsx
+++ b/packages/netlify-cms-core/src/components/Editor/EditorPreviewPane/EditorPreviewContent.tsx
@ -0,0 +1,35 @@
+/* eslint-disable @typescript-eslint/consistent-type-imports */
+/* eslint-disable func-style */
+import { CmsWidgetPreviewProps } from 'netlify-cms-core';
+import React, { ComponentType, ReactNode, useMemo } from 'react';
+import ReactDOM from 'react-dom';
+
+interface PreviewContentProps {
+  previewComponent?:
+    | React.ReactElement<unknown, string | React.JSXElementConstructor<any>>
+    | ComponentType<CmsWidgetPreviewProps>;
+  previewProps: CmsWidgetPreviewProps;
+}
+
+const PreviewContent = ({ previewComponent, previewProps }: PreviewContentProps) => {
+  const element = useMemo(() => document.getElementById('nc-root'), []);
+
+  return useMemo(() => {
+    if (!element) {
+      return null;
+    }
+
+    let children: ReactNode;
+    if (!previewComponent) {
+      children = null;
+    } else if (React.isValidElement(previewComponent)) {
+      children = React.cloneElement(previewComponent, previewProps);
+    } else {
+      children = React.createElement(previewComponent, previewProps);
+    }
+
+    return ReactDOM.createPortal(<div className="preview-content">{children}</div>, element);
+  }, [previewComponent, previewProps, element]);
+};
+
+export default PreviewContent;
--- a/packages/netlify-cms-core/src/components/Editor/EditorToolbar.js
+++ b/packages/netlify-cms-core/src/components/Editor/EditorToolbar.js
@ -300,7 +300,9 @@ export class EditorToolbar extends React.Component {
          : this.renderNewEntrySimplePublishControls({ canCreate })}
        <div>
          {showDelete ? (
-            <DeleteButton onClick={onDelete}>{t('editor.editorToolbar.deleteEntry')}</DeleteButton>
+            <DeleteButton key="delete-button" onClick={onDelete}>
+              {t('editor.editorToolbar.deleteEntry')}
+            </DeleteButton>
          ) : null}
        </div>
      </>
@ -319,12 +321,17 @@ export class EditorToolbar extends React.Component {
    return (
      <PreviewButtonContainer>
        {deployPreviewReady ? (
-          <PreviewLink rel="noopener noreferrer" target="_blank" href={url}>
+          <PreviewLink
+            key="preview-ready-button"
+            rel="noopener noreferrer"
+            target="_blank"
+            href={url}
+          >
            <span>{label}</span>
            <Icon type="new-tab" size="xsmall" />
          </PreviewLink>
        ) : (
-          <RefreshPreviewButton onClick={loadDeployPreview}>
+          <RefreshPreviewButton key="preview-pending-button" onClick={loadDeployPreview}>
            <span>{t('editor.editorToolbar.deployPreviewPendingButtonLabel')}</span>
            <Icon type="refresh" size="xsmall" />
          </RefreshPreviewButton>
@ -348,7 +355,9 @@ export class EditorToolbar extends React.Component {
          <Icon type="info-circle" size="small" className="tooltip" />
        </Tooltip>
        {statusKey && (
-          <TooltipText>{t(`editor.editorToolbar.${statusToLocaleKey[statusKey]}`)}</TooltipText>
+          <TooltipText key="status-tooltip">
+            {t(`editor.editorToolbar.${statusToLocaleKey[statusKey]}`)}
+          </TooltipText>
        )}
      </TooltipContainer>
    );
@ -388,6 +397,7 @@ export class EditorToolbar extends React.Component {
            ''
          ) : (
            <StatusDropdownItem
+              key="workflow-status-pending-publish"
              label={t('editor.editorToolbar.ready')}
              onClick={() => onChangeStatus('PENDING_PUBLISH')}
              icon={currentStatus === status.get('PENDING_PUBLISH') ? 'check' : null}
@ -404,6 +414,7 @@ export class EditorToolbar extends React.Component {

    return canPublish ? (
      <ToolbarDropdown
+        key="workflow-new-publish-controls"
        dropdownTopOverlap="40px"
        dropdownWidth="150px"
        renderButton={() => (
@ -445,6 +456,7 @@ export class EditorToolbar extends React.Component {

    return canPublish || canCreate ? (
      <ToolbarDropdown
+        key="workflow-existing-publish-controls"
        dropdownTopOverlap="40px"
        dropdownWidth="150px"
        renderButton={() => (
@ -480,6 +492,7 @@ export class EditorToolbar extends React.Component {
    const { onDuplicate, t } = this.props;
    return canCreate ? (
      <ToolbarDropdown
+        key="simple-existing-publish-controls"
        dropdownTopOverlap="40px"
        dropdownWidth="150px"
        renderButton={() => (
@ -503,7 +516,7 @@ export class EditorToolbar extends React.Component {
    const { onPersist, onPersistAndNew, onPersistAndDuplicate, isPersisting, t } = this.props;

    return (
-      <div>
+      <div key="simple-new-publish-controls">
        <ToolbarDropdown
          dropdownTopOverlap="40px"
          dropdownWidth="150px"
@ -643,9 +656,9 @@ export class EditorToolbar extends React.Component {
              })}
            </BackCollection>
            {hasChanged ? (
-              <BackStatusChanged>{t('editor.editorToolbar.unsavedChanges')}</BackStatusChanged>
+              <BackStatusChanged key="back-changed">{t('editor.editorToolbar.unsavedChanges')}</BackStatusChanged>
            ) : (
-              <BackStatusUnchanged>{t('editor.editorToolbar.changesSaved')}</BackStatusUnchanged>
+              <BackStatusUnchanged key="back-unchanged">{t('editor.editorToolbar.changesSaved')}</BackStatusUnchanged>
            )}
          </div>
        </ToolbarSectionBackLink>