pgadmin4/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffComponent.jsx

/////////////////////////////////////////////////////////////
//
// pgAdmin 4 - PostgreSQL Tools
//
// Copyright (C) 2013 - 2022, The pgAdmin Development Team
// This software is released under the PostgreSQL Licence
//
//////////////////////////////////////////////////////////////


import React, { createContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import PropTypes from 'prop-types';
import {DividerBox} from 'rc-dock';

import url_for from 'sources/url_for';

import { Box, makeStyles } from '@material-ui/core';

import { Results } from './Results';
import { SchemaDiffCompare } from './SchemaDiffCompare';
import EventBus from '../../../../../static/js/helpers/EventBus';
import getApiInstance from '../../../../../static/js/api_instance';
import { useModal } from '../../../../../static/js/helpers/ModalProvider';

export const SchemaDiffEventsContext = createContext();
export const SchemaDiffContext = createContext();

const useStyles = makeStyles((theme) => ({
  resetRoot: {
    padding: '2px 4px',
    display: 'flex',
    alignItems: 'center',
    gap: '4px',
    backgroundColor: theme.otherVars.editorToolbarBg,
    flexWrap: 'wrap',
    ...theme.mixins.panelBorder.bottom,

    '& #id-schema-diff': {
      overflow: 'auto'
    },

    '& #id-results': {
      overflow: 'auto'
    }
  },
  resultPanle: {
    backgroundColor: theme.palette.default.main,
    zIndex: 5,
    border: '1px solid ' + theme.otherVars.borderColor, 
    display: 'flex',
    flexDirection: 'column',
    flexGrow: 1,
    height: '50%', 
    minHeight: 150,
    overflow: 'hidden',   
  },
  comparePanel:{
    overflow: 'hidden',
    border: '1px solid ' + theme.otherVars.borderColor, 
    display: 'flex',
    flexDirection: 'column',
    flexGrow: 1,
    minHeight: 150,
    height: '50%',
  }
}));

export default function SchemaDiffComponent({params}) {
  const classes = useStyles();
  const eventBus = useRef(new EventBus());
  const containerRef = React.useRef(null);
  const api = getApiInstance();
  const modal = useModal();
  const [schemaDiffState, setSchemaDiffState] = useState({
    preferences: null
  });

  const schemaDiffContextValue = useMemo(()=> ({
    api: api,
    modal: modal,
    preferences_schema_diff: schemaDiffState.preferences
  }), [schemaDiffState.preferences]);

  registerUnload();
  useEffect(() => {
    reflectPreferences();
    params.pgAdmin.Browser.onPreferencesChange('schema_diff', function () {
      reflectPreferences();
    });
  }, []);

  const reflectPreferences = useCallback(() => {
    setSchemaDiffState({
      preferences: params.pgAdmin.Browser.get_preferences_for_module('schema_diff')
    });
  }, []);

  function registerUnload() {
    window.addEventListener('unload', ()=>{
      api.delete(url_for('schema_diff.close', {
        trans_id: params.transId
      }));
    });
  }
    
  return (
    <SchemaDiffContext.Provider value={schemaDiffContextValue}>
      <SchemaDiffEventsContext.Provider value={eventBus.current}>
        <Box display="flex" flexDirection="column" flexGrow="1" tabIndex="0" style={{overflowY: 'auto', minHeight: 80}}>
          <DividerBox mode='vertical' style={{flexGrow: 1}}>
            <div className={classes.comparePanel} id="schema-diff-compare-container" ref={containerRef}><SchemaDiffCompare params={params} /></div>
            <div className={classes.resultPanle} id="schema-diff-result-container">
              <Results />
            </div>
          </DividerBox>
        </Box>
      </SchemaDiffEventsContext.Provider>
    </SchemaDiffContext.Provider>
  );
}

SchemaDiffComponent.propTypes = {
  params: PropTypes.object
};