sentinel/static/app/components/modals/importDashboardFromFileModal.tsx

import {Fragment, useState} from 'react';
import {browserHistory} from 'react-router';
import {css} from '@emotion/react';

import {createDashboard} from 'sentry/actionCreators/dashboards';
import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
import {Button} from 'sentry/components/button';
import {CodeSnippet} from 'sentry/components/codeSnippet';
import {IconUpload} from 'sentry/icons';
import {t} from 'sentry/locale';
import {normalizeUrl} from 'sentry/utils/withDomainRequired';
import {
  assignDefaultLayout,
  getInitialColumnDepths,
} from 'sentry/views/dashboards/layoutUtils';
import {Wrapper} from 'sentry/views/discover/table/quickContext/styles';

// Internal feature - no specs written.
function ImportDashboardFromFileModal({
  Header,
  Body,
  Footer,
  organization,
  api,
  location,
}) {
  const [dashboardData, setDashboardData] = useState('');
  const [validated, setValidated] = useState(false);

  function validateFile(fileToUpload) {
    if (!fileToUpload || !(fileToUpload.type === 'application/json')) {
      addErrorMessage('You must upload a JSON file');
      setValidated(false);
      setDashboardData('');
      return false;
    }

    setValidated(true);
    return true;
  }

  const handleFileChange = e => {
    const fileToUpload = e.target.files[0];
    if (validateFile(fileToUpload)) {
      const fileReader = new FileReader();
      fileReader.readAsText(fileToUpload, 'UTF-8');
      fileReader.onload = event => {
        const target = event.target;
        if (target && typeof target.result === 'string') {
          const parsed = JSON.parse(target.result);
          const formatted = JSON.stringify(parsed, null, '\t');
          setDashboardData(formatted);
        }
      };
    }
  };

  const handleUploadClick = async () => {
    const dashboard = JSON.parse(dashboardData);

    try {
      const newDashboard = await createDashboard(
        api,
        organization.slug,
        {
          ...dashboard,
          widgets: assignDefaultLayout(dashboard.widgets, getInitialColumnDepths()),
        },
        true
      );

      addSuccessMessage(`${dashboard.title} dashboard template successfully added`);
      loadDashboard(newDashboard.id);
    } catch (error) {
      addErrorMessage('Could not upload dashboard, JSON may be invalid');
    }
  };

  const loadDashboard = (dashboardId: string) => {
    browserHistory.push(
      normalizeUrl({
        pathname: `/organizations/${organization.slug}/dashboards/${dashboardId}/`,
        query: location.query,
      })
    );
  };

  return (
    <Fragment>
      <Header closeButton>
        <h4>{t('Import Dashboard from JSON File')}</h4>
      </Header>
      <Body>
        <Wrapper>
          <input type="file" onChange={handleFileChange} />
        </Wrapper>
        <Wrapper>
          <Button
            onClick={handleUploadClick}
            disabled={!validated}
            priority="primary"
            icon={<IconUpload />}
          >
            {t('Import')}
          </Button>
        </Wrapper>
      </Body>
      {validated && (
        <Fragment>
          <Footer />
          <Wrapper>
            <h4>{t('Preview')}</h4>
          </Wrapper>
          <CodeSnippet language="json">{dashboardData}</CodeSnippet>
        </Fragment>
      )}
    </Fragment>
  );
}

export default ImportDashboardFromFileModal;

export const modalCss = css`
  max-width: 700px;
  margin: 70px auto;
`;