@pranaysahith/decap-cms-core 3.9.1

package/src/components/UI/ErrorBoundary.js

@@ -0,0 +1,214 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { translate } from 'react-polyglot';
+import styled from '@emotion/styled';
+import yaml from 'yaml';
+import truncate from 'lodash/truncate';
+import copyToClipboard from 'copy-text-to-clipboard';
+import { localForage } from 'decap-cms-lib-util';
+import { buttons, colors } from 'decap-cms-ui-default';
+import cleanStack from 'clean-stack';
+
+const ISSUE_URL = 'https://github.com/decaporg/decap-cms/issues/new?';
+
+function getIssueTemplate({ version, provider, browser, config }) {
+  return `
+**Describe the bug**
+
+**To Reproduce**
+
+**Expected behavior**
+
+**Screenshots**
+
+**Applicable Versions:**
+ - Decap CMS version: \`${version}\`
+ - Git provider: \`${provider}\`
+ - Browser version: \`${browser}\`
+
+**CMS configuration**
+\`\`\`
+${config}
+\`\`\`
+
+**Additional context**
+`;
+}
+
+function buildIssueTemplate({ config }) {
+  let version = '';
+  if (typeof DECAP_CMS_VERSION === 'string') {
+    version = `decap-cms@${DECAP_CMS_VERSION}`;
+  } else if (typeof DECAP_CMS_APP_VERSION === 'string') {
+    version = `decap-cms-app@${DECAP_CMS_APP_VERSION}`;
+  }
+  const template = getIssueTemplate({
+    version,
+    provider: config.backend.name,
+    browser: navigator.userAgent,
+    config: yaml.stringify(config),
+  });
+
+  return template;
+}
+
+function buildIssueUrl({ title, config }) {
+  try {
+    const body = buildIssueTemplate({ config });
+
+    const params = new URLSearchParams();
+    params.append('title', truncate(title, { length: 100 }));
+    params.append('body', truncate(body, { length: 4000, omission: '\n...' }));
+    params.append('labels', 'type: bug');
+
+    return `${ISSUE_URL}${params.toString()}`;
+  } catch (e) {
+    console.log(e);
+    return `${ISSUE_URL}template=bug_report.md`;
+  }
+}
+
+const ErrorBoundaryContainer = styled.div`
+  padding: 40px;
+
+  h1 {
+    font-size: 28px;
+    color: ${colors.text};
+  }
+
+  h2 {
+    font-size: 20px;
+  }
+
+  strong {
+    color: ${colors.textLead};
+    font-weight: 500;
+  }
+
+  hr {
+    width: 200px;
+    margin: 30px 0;
+    border: 0;
+    height: 1px;
+    background-color: ${colors.text};
+  }
+
+  a {
+    color: ${colors.active};
+  }
+`;
+
+const PrivacyWarning = styled.span`
+  color: ${colors.text};
+`;
+
+const CopyButton = styled.button`
+  ${buttons.button};
+  ${buttons.default};
+  ${buttons.gray};
+  display: block;
+  margin: 12px 0;
+`;
+
+function RecoveredEntry({ entry, t }) {
+  console.log(entry);
+  return (
+    <>
+      <hr />
+      <h2>{t('ui.errorBoundary.recoveredEntry.heading')}</h2>
+      <strong>{t('ui.errorBoundary.recoveredEntry.warning')}</strong>
+      <CopyButton onClick={() => copyToClipboard(entry)}>
+        {t('ui.errorBoundary.recoveredEntry.copyButtonLabel')}
+      </CopyButton>
+      <pre>
+        <code>{entry}</code>
+      </pre>
+    </>
+  );
+}
+
+export class ErrorBoundary extends React.Component {
+  static propTypes = {
+    children: PropTypes.node,
+    t: PropTypes.func.isRequired,
+    config: PropTypes.object.isRequired,
+  };
+
+  state = {
+    hasError: false,
+    errorMessage: '',
+    errorTitle: '',
+    backup: '',
+  };
+
+  static getDerivedStateFromError(error) {
+    console.error(error);
+    return {
+      hasError: true,
+      errorMessage: cleanStack(error.stack, { basePath: window.location.origin || '' }),
+      errorTitle: error.toString(),
+    };
+  }
+
+  componentDidMount() {
+    // Manually validate PropTypes - React 19 breaking change
+    PropTypes.checkPropTypes(ErrorBoundary.propTypes, this.props, 'prop', 'ErrorBoundary');
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    if (this.props.showBackup) {
+      return (
+        this.state.errorMessage !== nextState.errorMessage || this.state.backup !== nextState.backup
+      );
+    }
+    return true;
+  }
+
+  async componentDidUpdate() {
+    if (this.props.showBackup) {
+      const backup = await localForage.getItem('backup');
+      backup && console.log(backup);
+      this.setState({ backup });
+    }
+  }
+
+  render() {
+    const { hasError, errorMessage, backup, errorTitle } = this.state;
+    const { showBackup, t } = this.props;
+    if (!hasError) {
+      return this.props.children;
+    }
+    return (
+      <ErrorBoundaryContainer>
+        <h1>{t('ui.errorBoundary.title')}</h1>
+        <p>
+          <span>{t('ui.errorBoundary.details')}</span>
+          <a
+            href={buildIssueUrl({ title: errorTitle, config: this.props.config })}
+            target="_blank"
+            rel="noopener noreferrer"
+            data-testid="issue-url"
+          >
+            {t('ui.errorBoundary.reportIt')}
+          </a>
+        </p>
+        <p>
+          {t('ui.errorBoundary.privacyWarning')
+            .split('\n')
+            .map((item, index) => (
+              <>
+                <PrivacyWarning key={index}>{item}</PrivacyWarning>
+                <br />
+              </>
+            ))}
+        </p>
+        <hr />
+        <h2>{t('ui.errorBoundary.detailsHeading')}</h2>
+        <p>{errorMessage}</p>
+        {backup && showBackup && <RecoveredEntry entry={backup} t={t} />}
+      </ErrorBoundaryContainer>
+    );
+  }
+}
+
+export default translate()(ErrorBoundary);

package/src/components/UI/FileUploadButton.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export function FileUploadButton({ label, imagesOnly, onChange, disabled, className }) {
+  return (
+    <label tabIndex={'0'} className={`nc-fileUploadButton ${className || ''}`}>
+      <span>{label}</span>
+      <input
+        type="file"
+        accept={imagesOnly ? 'image/*' : '*/*'}
+        onChange={onChange}
+        disabled={disabled}
+      />
+    </label>
+  );
+}
+
+FileUploadButton.propTypes = {
+  className: PropTypes.string,
+  label: PropTypes.string.isRequired,
+  imagesOnly: PropTypes.bool,
+  onChange: PropTypes.func.isRequired,
+  disabled: PropTypes.bool,
+};

package/src/components/UI/Modal.js

@@ -0,0 +1,112 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css, Global, ClassNames } from '@emotion/react';
+import ReactModal from 'react-modal';
+import { transitions, shadows, lengths, zIndex } from 'decap-cms-ui-default';
+
+function ReactModalGlobalStyles() {
+  return (
+    <Global
+      styles={css`
+        .ReactModal__Body--open {
+          overflow: hidden;
+        }
+      `}
+    />
+  );
+}
+
+const styleStrings = {
+  modalBody: `
+    ${shadows.dropDeep};
+    background-color: #fff;
+    border-radius: ${lengths.borderRadius};
+    height: 80%;
+    text-align: center;
+    max-width: 2200px;
+    padding: 20px;
+
+    &:focus {
+      outline: none;
+    }
+  `,
+  overlay: `
+    z-index: ${zIndex.zIndex99999};
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 0;
+    background-color: rgba(0, 0, 0, 0);
+    transition: background-color ${transitions.main}, opacity ${transitions.main};
+  `,
+  overlayAfterOpen: `
+    background-color: rgba(0, 0, 0, 0.6);
+    opacity: 1;
+  `,
+  overlayBeforeClose: `
+    background-color: rgba(0, 0, 0, 0);
+    opacity: 0;
+  `,
+};
+
+export class Modal extends React.Component {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    isOpen: PropTypes.bool.isRequired,
+    className: PropTypes.string,
+    onClose: PropTypes.func.isRequired,
+  };
+
+  componentDidMount() {
+    // Manually validate PropTypes - React 19 breaking change
+    PropTypes.checkPropTypes(Modal.propTypes, this.props, 'prop', 'Modal');
+
+    ReactModal.setAppElement('#nc-root');
+  }
+
+  render() {
+    const { isOpen, children, className, onClose } = this.props;
+    return (
+      <>
+        <ReactModalGlobalStyles />
+        <ClassNames>
+          {({ css, cx }) => (
+            <ReactModal
+              isOpen={isOpen}
+              onRequestClose={onClose}
+              closeTimeoutMS={300}
+              className={{
+                base: cx(
+                  css`
+                    ${styleStrings.modalBody};
+                  `,
+                  className,
+                ),
+                afterOpen: '',
+                beforeClose: '',
+              }}
+              overlayClassName={{
+                base: css`
+                  ${styleStrings.overlay};
+                `,
+                afterOpen: css`
+                  ${styleStrings.overlayAfterOpen};
+                `,
+                beforeClose: css`
+                  ${styleStrings.overlayBeforeClose};
+                `,
+              }}
+            >
+              {children}
+            </ReactModal>
+          )}
+        </ClassNames>
+      </>
+    );
+  }
+}

package/src/components/UI/Notifications.tsx

@@ -0,0 +1,83 @@
+// eslint-disable-next-line no-unused-vars
+import React, { useEffect } from 'react';
+// import { translate } from 'react-polyglot';
+import { injectStyle } from 'react-toastify/dist/inject-style';
+import { toast, ToastContainer } from 'react-toastify';
+import { connect, useDispatch } from 'react-redux';
+import { useTranslate } from 'react-polyglot';
+
+import { dismissNotification } from '../../actions/notifications';
+
+import type { Id, ToastItem } from 'react-toastify';
+import type { State } from '../../types/redux';
+import type { Notification } from '../../reducers/notifications';
+
+injectStyle();
+
+interface Props {
+  notifications: Notification[];
+}
+
+type IdMap = {
+  [id: string]: Id;
+};
+
+function Notifications({ notifications }: Props) {
+  const t = useTranslate();
+  const dispatch = useDispatch();
+  const [idMap, setIdMap] = React.useState<IdMap>({});
+
+  useEffect(() => {
+    notifications
+      .filter(notification => !idMap[notification.id])
+      .forEach(notification => {
+        const toastId = toast(
+          typeof notification.message == 'string'
+            ? notification.message
+            : t(notification.message.key, { ...notification.message }),
+          {
+            autoClose: notification.dismissAfter,
+            type: notification.type,
+          },
+        );
+
+        idMap[notification.id] = toastId;
+        setIdMap(idMap);
+
+        if (notification.dismissAfter) {
+          setTimeout(() => {
+            dispatch(dismissNotification(notification.id));
+          }, notification.dismissAfter);
+        }
+      });
+
+    Object.entries(idMap).forEach(([id, toastId]) => {
+      if (!notifications.find(notification => notification.id === id)) {
+        toast.dismiss(toastId);
+        delete idMap[id];
+        setIdMap(idMap);
+      }
+    });
+  }, [notifications]);
+
+  toast.onChange((payload: ToastItem) => {
+    if (payload.status == 'removed') {
+      const id = Object.entries(idMap).find(([, toastId]) => toastId === payload.id)?.[0];
+      if (id) {
+        dispatch(dismissNotification(id));
+      }
+    }
+  });
+
+  return (
+    <>
+      <ToastContainer position="top-right" theme="colored" className="notif__container" />
+    </>
+  );
+}
+
+function mapStateToProps({ notifications }: State): Props {
+  return { notifications: notifications.notifications };
+}
+
+export default connect(mapStateToProps)(Notifications);

package/src/components/UI/SettingsDropdown.js

@@ -0,0 +1,103 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { translate } from 'react-polyglot';
+import { Icon, Dropdown, DropdownItem, DropdownButton, colors } from 'decap-cms-ui-default';
+
+import { stripProtocol } from '../../lib/urlHelper';
+
+const styles = {
+  avatarImage: css`
+    width: 32px;
+    border-radius: 32px;
+  `,
+};
+
+const AvatarDropdownButton = styled(DropdownButton)`
+  display: inline-block;
+  padding: 8px;
+  cursor: pointer;
+  color: #1e2532;
+  background-color: transparent;
+`;
+
+const AvatarImage = styled.img`
+  ${styles.avatarImage};
+`;
+
+const AvatarPlaceholderIcon = styled(Icon)`
+  ${styles.avatarImage};
+  height: 32px;
+  color: #1e2532;
+  background-color: ${colors.textFieldBorder};
+`;
+
+const AppHeaderSiteLink = styled.a`
+  font-size: 14px;
+  font-weight: 400;
+  color: #7b8290;
+  padding: 10px 16px;
+`;
+
+const AppHeaderTestRepoIndicator = styled.a`
+  font-size: 14px;
+  font-weight: 400;
+  color: #7b8290;
+  padding: 10px 16px;
+`;
+
+function Avatar({ imageUrl }) {
+  return imageUrl ? (
+    <AvatarImage src={imageUrl} />
+  ) : (
+    <AvatarPlaceholderIcon type="user" size="large" />
+  );
+}
+
+Avatar.propTypes = {
+  imageUrl: PropTypes.string,
+};
+
+function SettingsDropdown({ displayUrl, isTestRepo, imageUrl, onLogoutClick, t }) {
+  return (
+    <React.Fragment>
+      {isTestRepo && (
+        <AppHeaderTestRepoIndicator
+          href="https://www.decapcms.org/docs/test-backend"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Test Backend ↗
+        </AppHeaderTestRepoIndicator>
+      )}
+      {displayUrl ? (
+        <AppHeaderSiteLink href={displayUrl} target="_blank">
+          {stripProtocol(displayUrl)}
+        </AppHeaderSiteLink>
+      ) : null}
+      <Dropdown
+        dropdownTopOverlap="50px"
+        dropdownWidth="100px"
+        dropdownPosition="right"
+        renderButton={() => (
+          <AvatarDropdownButton>
+            <Avatar imageUrl={imageUrl} />
+          </AvatarDropdownButton>
+        )}
+      >
+        <DropdownItem label={t('ui.settingsDropdown.logOut')} onClick={onLogoutClick} />
+      </Dropdown>
+    </React.Fragment>
+  );
+}
+
+SettingsDropdown.propTypes = {
+  displayUrl: PropTypes.string,
+  isTestRepo: PropTypes.bool,
+  imageUrl: PropTypes.string,
+  onLogoutClick: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired,
+};
+
+export default translate()(SettingsDropdown);

package/src/components/UI/__tests__/ErrorBoundary.spec.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { oneLineTrim } from 'common-tags';
+
+import { ErrorBoundary } from '../ErrorBoundary';
+
+function WithError() {
+  throw new Error('Some unknown error');
+}
+
+jest.spyOn(console, 'error').mockImplementation(() => ({}));
+
+Object.defineProperty(
+  window.navigator,
+  'userAgent',
+  (value => ({
+    get() {
+      return value;
+    },
+    set(v) {
+      value = v;
+    },
+  }))(window.navigator['userAgent']),
+);
+
+describe('Editor', () => {
+  const config = { backend: { name: 'github' } };
+
+  const props = { t: jest.fn(key => key), config };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should match snapshot with issue URL', () => {
+    global.navigator.userAgent = 'Test User Agent';
+    const { getByTestId } = render(
+      <ErrorBoundary {...props}>
+        <WithError />
+      </ErrorBoundary>,
+    );
+
+    expect(console.error).toHaveBeenCalledWith(new Error('Some unknown error'));
+    expect(getByTestId('issue-url').getAttribute('href')).toEqual(
+      oneLineTrim`https://github.com/decaporg/decap-cms/issues/new?
+        title=Error%3A+Some+unknown+error&
+        body=%0A**Describe+the+bug**%0A%0A**To+Reproduce**%0A%0A**Expected+behavior**%0A%0A**
+        Screenshots**%0A%0A**Applicable+Versions%3A**%0A+-+
+        Decap+CMS+version%3A+%60%60%0A+-+
+        Git+provider%3A+%60github%60%0A+-+
+        Browser+version%3A+%60Test+User+Agent%60%0A%0A**
+        CMS+configuration**%0A%60%60%60%0Abackend%3A%0A++name%3A+github%0A%0A%60%60%60%0A%0A**
+        Additional+context**%0A&labels=type%3A+bug
+        `,
+    );
+  });
+});

package/src/components/UI/index.js

@@ -0,0 +1,6 @@
+export { DragSource, DropTarget, HTML5DragDrop } from './DragDrop';
+export { default as ErrorBoundary } from './ErrorBoundary';
+export { FileUploadButton } from './FileUploadButton';
+export { Modal } from './Modal';
+export { default as Notifications } from './Notifications';
+export { default as SettingsDropdown } from './SettingsDropdown';