refactor: extract rendering elements to views

client/src/App.tsx

@@ -15,23 +15,10 @@
  */
 import React, { useEffect, useState } from 'react';
 
-import DoneOutlinedIcon from '@mui/icons-material/DoneOutlined';
-import RocketLaunchIcon from '@mui/icons-material/RocketLaunch';
-import SettingsIcon from '@mui/icons-material/Settings';
 import Backdrop from '@mui/material/Backdrop';
-import IconButton from '@mui/material/IconButton';
 
-import OpenInNewIcon from '@mui/icons-material/OpenInNew';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Chip from '@mui/material/Chip';
 import CircularProgress from '@mui/material/CircularProgress';
 import Container from '@mui/material/Container';
-import Link from '@mui/material/Link';
-import Paper from '@mui/material/Paper';
-import Stack from '@mui/material/Stack';
-import Tooltip from '@mui/material/Tooltip';
-import Typography from '@mui/material/Typography';
 
 import { ExecStreamOptions } from '@docker/extension-api-client-types/dist/v1';
 import './App.css';
@@ -47,11 +34,7 @@ import { sendMetric } from './api/metrics';
 import { ensureNetworkExists } from './api/network';
 import { ensureVolumeExists } from './api/volume';
 import AlertDialog from './components/AlertDialog';
-import ClipboardCopy from './components/ClipboardCopy';
 import DeleteDialog from './components/DeleteDialog';
-import Footer from './components/Footer';
-import ImportDialog from './components/ImportDialog';
-import Services from './components/Services';
 import SettingsDialog from './components/Settings';
 import { ContainerStatus } from './types/ContainerStatus';
 import { ExtensionConfig } from './types/ExtensionConfig';
@@ -63,6 +46,9 @@ import {
   POSTMAN_CONTAINER
 } from './utils/constants';
 import { useDockerDesktopClient } from './utils/ddclient';
+import InitializingView from './components/views/InitializingView';
+import NotRunningView from './components/views/NotRunningView';
+import RunningView from './components/views/RunningView';
 
 const isWindows = () => {
   const platform = useDockerDesktopClient().host.platform;
@@ -763,203 +749,21 @@ const App = () => {
   return (
     <Container>
       {status === 'INITIALIZING' ? (
-        <Stack
-          sx={{
-            display: 'flex',
-            flexGrow: 1,
-            height: '90vh',
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}
-          spacing={5}
-        >
-          <CircularProgress color="primary" />
-        </Stack>
+        <InitializingView />
       ) : status == 'NOT_RUNNING' ? (
-        <>
-          <Stack
-            sx={{
-              display: 'flex',
-              flexGrow: 1,
-              height: '90vh',
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-          >
-            <Box
-              m={4}
-              sx={{
-                width: 450,
-                maxWidth: { xs: 450, md: 350 },
-              }}
-              component="img"
-              src={
-                uiMode === 'light'
-                  ? 'assets/images/microcks-logo-blue-baseline-tweet.png'
-                  : 'assets/images/microcks-logo-white-baseline-tweet.png'
-              }
-              alt="Microcks Logo"
-            />
-            <Paper
-              elevation={3}
-              sx={{
-                margin: 4,
-                padding: 2,
-                width: '100%',
-                display: 'flex',
-                flexDirection: 'row',
-              }}
-            >
-              {!appStatus.isRunning && (
-                <Chip variant="outlined" color="error" label="STOPPED" />
-              )}
-              <Box
-                alignContent="center"
-                display="flex"
-                alignItems="center"
-                mx={1}
-              >
-                <RocketLaunchIcon />
-              </Box>
-              <Box
-                flexGrow={1}
-                alignContent="center"
-                display="flex"
-                alignItems="center"
-              >
-                <Typography variant="subtitle1">
-                  Microcks is not running. First launch can take some time while
-                  we're pulling the container images.
-                </Typography>
-              </Box>
-              <Box
-                flexGrow={1}
-                alignContent="center"
-                display="flex"
-                alignItems="center"
-              ></Box>
-            </Paper>
-            <Stack m={2} spacing={2} direction="row">
-              <Button
-                variant="outlined"
-                size="large"
-                startIcon={<SettingsIcon />}
-                onClick={handleOpenSettings}
-              >
-                Settings
-              </Button>
-              <Button variant="contained" size="large" onClick={launchMicrocks}>
-                Launch Microcks
-              </Button>
-            </Stack>
-          </Stack>
-          <Footer>
-            {appStatus.exists && (
-              <Link onClick={deleteMicrocksDialog} component="button">
-                Delete Microcks
-              </Link>
-            )}
-          </Footer>
-        </>
+        <NotRunningView 
+          uiMode={uiMode}
+          appStatus={appStatus}
+          onLaunchMicrocks={launchMicrocks}
+          onOpenSettings={handleOpenSettings}
+          onDeleteMicrocks={deleteMicrocksDialog}
+        />
       ) : (
-        <Box
-          display="flex"
-          flexDirection="column"
-          justifyContent="flex-start"
-          height="95vh"
-        >
-          <Box
-            sx={{ display: 'flex', width: '100%', alignItems: 'center' }}
-            my={1}
-          >
-            <Box alignContent="flex-start" textAlign="left" flexGrow={1}>
-              <Typography sx={{ fontWeight: 'bolder' }} variant="h5">
-                Microcks
-              </Typography>
-              <Typography variant="subtitle1" color="InactiveCaptionText">
-                API Mocking and Testing for REST, GraphQL, gRPC and AsyncAPI
-              </Typography>
-            </Box>
-            <Box>
-              <Tooltip title="Settings">
-                <IconButton onClick={handleOpenSettings}>
-                  <SettingsIcon />
-                </IconButton>
-              </Tooltip>
-            </Box>
-            <Box m={2}>
-              <Button variant="contained" color="error" onClick={stopMicrocks}>
-                Stop Microcks
-              </Button>
-            </Box>
-          </Box>
-          <Paper
-            elevation={3}
-            sx={{
-              marginTop: 4,
-              padding: 2,
-              width: '100%',
-              display: 'flex',
-              flexDirection: 'row',
-            }}
-          >
-            <Chip variant="filled" color="success" label="RUNNING" />
-            <Box
-              alignContent="center"
-              display="flex"
-              alignItems="center"
-              mx={1}
-            >
-              <DoneOutlinedIcon />
-            </Box>
-            <Box
-              flexGrow={1}
-              alignContent="center"
-              display="flex"
-              alignItems="center"
-            >
-              <Typography variant="subtitle1" component="span">
-                Microcks is running. To access the UI navigate to:{' '}
-                <Link
-                  onClick={() =>
-                    ddClient.host.openExternal(
-                      `http://localhost:${8080 + config.portOffset}/#/`,
-                    )
-                  }
-                  variant="subtitle1"
-                  component="span"
-                >
-                  http://localhost:{8080 + config.portOffset}
-                </Link>
-                <IconButton
-                  onClick={() =>
-                    ddClient.host.openExternal(
-                      `http://localhost:${8080 + config.portOffset}/#/`,
-                    )
-                  }
-                  component="span"
-                  size="small"
-                >
-                  <OpenInNewIcon
-                    fontSize="small"
-                  />
-                </IconButton>
-                <ClipboardCopy
-                  copyText={`http://localhost:${8080 + config.portOffset}/#/`}
-                  size="small"
-                />
-              </Typography>
-            </Box>
-          </Paper>
-          <Services config={config} />
-          <Footer>
-            {appStatus.exists && (
-              <Link onClick={deleteMicrocksDialog} component="button">
-                Delete Microcks
-              </Link>
-            )}
-          </Footer>
-        </Box>
+        <RunningView
+          appStatus={appStatus}
+          onOpenSettings={handleOpenSettings}
+          onDeleteMicrocks={deleteMicrocksDialog} config={config} onStopMicrocks={stopMicrocks}
+          />
       )}
       <SettingsDialog
         config={config}

client/src/components/views/InitializingView.tsx

@@ -0,0 +1,39 @@
+/*
+ * Copyright The Microcks Authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import {
+  Stack,
+  CircularProgress,
+} from '@mui/material';
+
+const InitializingView: React.FC = () => {
+  return (
+    <Stack
+      sx={{
+        display: 'flex',
+        flexGrow: 1,
+        height: '90vh',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+      spacing={5}
+    >
+      <CircularProgress color="primary" />
+    </Stack>
+  );
+};
+
+export default InitializingView;