oneconsole-plugin-starter/src/app/App.tsx

import './App.css';

import React from 'react';
import Container from '@material-ui/core/Container';
import Grid from '@material-ui/core/Grid';
import InputLabel from '@material-ui/core/InputLabel';
import IconButton from '@material-ui/core/IconButton';
import OpenInNewIcon from '@material-ui/icons/OpenInNew';
import AssignmentIcon from '@material-ui/icons/Assignment';
import ShareIcon from '@material-ui/icons/Share';
import BasePath from '../features/BasePath/BasePath';
import PluginPath from '../features/PluginPath/PluginPath';
import ConfigOverride from '../features/ConfigOverride/ConfigOverride';

import { useMemo } from 'react';
import { useSelector, useStore } from 'react-redux';
import { RootState } from './rootReducer';

const copyToClipboard = (text: string) => navigator.clipboard.writeText(text)
  .then(
    () => console.log('Async: Copying to clipboard was successful!'),
    (err) => console.error('Async: Could not copy text: ', err)
  );

const shareApp = (state: RootState) => copyToClipboard(`${window.location.href}?state=${encodeURIComponent(JSON.stringify(state))}`);

const App: React.FC = () => {
  const store = useStore();

  const { basePath, pluginPath, configOverride } = useSelector((state: RootState) => ({
    basePath: state.basePath.value,
    pluginPath: state.pluginPath.value,
    configOverride: state.configOverride.value
  }));

  const fullPath = useMemo(() => `${basePath}configoverride=${encodeURIComponent(configOverride)}`, [basePath, configOverride]);

  return (
    <Container className="App">
      <Grid container spacing={3} direction="column">
        <Grid item xs={12}>
          <BasePath />
        </Grid>
        <Grid item xs={12}>
          <PluginPath />
        </Grid>
        <Grid item xs={12}>
          <ConfigOverride pluginPath={pluginPath} />
        </Grid>
        <Grid item xs={12}>
          <InputLabel id="link-label">Link</InputLabel>
          <div style={{ overflowWrap: "break-word" }}>{fullPath}</div>
        </Grid>
        <Grid item xs={12} style={{ textAlign: "center" }}>
          <IconButton title="Share application" color="secondary" onClick={_ => shareApp(store.getState())}>
            <ShareIcon fontSize="small" />
          </IconButton>
          <IconButton title="Copy link to clipboard" color="secondary" onClick={_ => copyToClipboard(fullPath)}>
            <AssignmentIcon fontSize="small" />
          </IconButton>
          <IconButton title="Open link new window" color="primary" onClick={_ => window.open(fullPath)}>
            <OpenInNewIcon fontSize="large" />
          </IconButton>
        </Grid>
      </Grid>
    </Container>
  );
}

export default App;