From 988158e959a957abe6e8f237f876cb6f4d282b3d Mon Sep 17 00:00:00 2001
From: Apoorva Appadoo Srinivas <appadooapoorva@gmail.com>
Date: Mon, 22 Sep 2025 15:44:49 +0200
Subject: [PATCH 1/4] refactor: move render to views for initializing, not
 running, and running states in App component

Signed-off-by: Apoorva Appadoo Srinivas <appadooapoorva@gmail.com>
---
 client/src/App.tsx                            | 211 ++----------------
 .../src/components/views/InitializingView.tsx |  39 ++++
 .../src/components/views/NotRunningView.tsx   | 135 +++++++++++
 client/src/components/views/RunningView.tsx   | 148 ++++++++++++
 4 files changed, 338 insertions(+), 195 deletions(-)
 create mode 100644 client/src/components/views/InitializingView.tsx
 create mode 100644 client/src/components/views/NotRunningView.tsx
 create mode 100644 client/src/components/views/RunningView.tsx

diff --git a/client/src/App.tsx b/client/src/App.tsx
index c735f82..872ddf9 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -63,6 +63,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 +766,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}
diff --git a/client/src/components/views/InitializingView.tsx b/client/src/components/views/InitializingView.tsx
new file mode 100644
index 0000000..4aea0ec
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/client/src/components/views/NotRunningView.tsx b/client/src/components/views/NotRunningView.tsx
new file mode 100644
index 0000000..cee96f7
--- /dev/null
+++ b/client/src/components/views/NotRunningView.tsx
@@ -0,0 +1,135 @@
+/*
+ * 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 {
+  Box,
+  Button,
+  Chip,
+  Link,
+  Paper,
+  Stack,
+  Typography,
+} from '@mui/material';
+import RocketLaunchIcon from '@mui/icons-material/RocketLaunch';
+import SettingsIcon from '@mui/icons-material/Settings';
+import { ContainerStatus } from '../../types/ContainerStatus';
+import Footer from '../Footer';
+
+interface NotRunningViewProps {
+  uiMode: string;
+  appStatus: ContainerStatus;
+  onLaunchMicrocks: () => void;
+  onOpenSettings: () => void;
+  onDeleteMicrocks: () => void;
+}
+
+const NotRunningView: React.FC<NotRunningViewProps> = ({
+  uiMode,
+  appStatus,
+  onLaunchMicrocks,
+  onOpenSettings,
+  onDeleteMicrocks,
+}) => {
+  return (
+    <>
+      <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={onOpenSettings}
+          >
+            Settings
+          </Button>
+          <Button variant="contained" size="large" onClick={onLaunchMicrocks}>
+            Launch Microcks
+          </Button>
+        </Stack>
+      </Stack>
+      <Footer>
+        {appStatus.exists && (
+          <Link onClick={onDeleteMicrocks} component="button">
+            Delete Microcks
+          </Link>
+        )}
+      </Footer>
+    </>
+  );
+};
+
+export default NotRunningView;
\ No newline at end of file
diff --git a/client/src/components/views/RunningView.tsx b/client/src/components/views/RunningView.tsx
new file mode 100644
index 0000000..8f9849f
--- /dev/null
+++ b/client/src/components/views/RunningView.tsx
@@ -0,0 +1,148 @@
+/*
+ * 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 {
+  Box,
+  Button,
+  Chip,
+  IconButton,
+  Link,
+  Paper,
+  Tooltip,
+  Typography,
+} from '@mui/material';
+import DoneOutlinedIcon from '@mui/icons-material/DoneOutlined';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import SettingsIcon from '@mui/icons-material/Settings';
+import { ExtensionConfig } from '../../types/ExtensionConfig';
+import { ContainerStatus } from '../../types/ContainerStatus';
+import ClipboardCopy from '../ClipboardCopy';
+import Services from '../Services';
+import Footer from '../Footer';
+import { useDockerDesktopClient } from '../../utils/ddclient';
+
+interface RunningViewProps {
+  config: ExtensionConfig;
+  appStatus: ContainerStatus;
+  onStopMicrocks: () => void;
+  onOpenSettings: () => void;
+  onDeleteMicrocks: () => void;
+}
+
+const RunningView: React.FC<RunningViewProps> = ({
+  config,
+  appStatus,
+  onStopMicrocks,
+  onOpenSettings,
+  onDeleteMicrocks,
+}) => {
+  const ddClient = useDockerDesktopClient();
+  const microcksUrl = `http://localhost:${8080 + config.portOffset}/#/`;
+
+  const handleOpenExternal = () => {
+    ddClient.host.openExternal(microcksUrl);
+  };
+
+  return (
+    <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={onOpenSettings}>
+              <SettingsIcon />
+            </IconButton>
+          </Tooltip>
+        </Box>
+        <Box m={2}>
+          <Button variant="contained" color="error" onClick={onStopMicrocks}>
+            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={handleOpenExternal}
+              variant="subtitle1"
+              component="span"
+            >
+              {microcksUrl}
+            </Link>
+            <IconButton
+              onClick={handleOpenExternal}
+              component="span"
+              size="small"
+            >
+              <OpenInNewIcon fontSize="small" />
+            </IconButton>
+            <ClipboardCopy copyText={microcksUrl} size="small" />
+          </Typography>
+        </Box>
+      </Paper>
+      <Services config={config} />
+      <Footer>
+        {appStatus.exists && (
+          <Link onClick={onDeleteMicrocks} component="button">
+            Delete Microcks
+          </Link>
+        )}
+      </Footer>
+    </Box>
+  );
+};
+
+export default RunningView;
\ No newline at end of file

From dfd46376666fb42f8122d711d1c16ccec9183efd Mon Sep 17 00:00:00 2001
From: Apoorva Appadoo Srinivas <appadooapoorva@gmail.com>
Date: Mon, 22 Sep 2025 16:36:31 +0200
Subject: [PATCH 2/4] style: cleanup imports

Signed-off-by: Apoorva Appadoo Srinivas <appadooapoorva@gmail.com>
---
 client/src/App.tsx | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 872ddf9..6345809 100644
--- a/client/src/App.tsx
+++ b/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';

From 8c154a0a4ea1e9cf6be2863e4777086a76c7c317 Mon Sep 17 00:00:00 2001
From: Apoorva Appadoo Srinivas <appadooapoorva@gmail.com>
Date: Mon, 22 Sep 2025 17:05:04 +0200
Subject: [PATCH 3/4] style: add newline at the end

Signed-off-by: Apoorva Appadoo Srinivas <appadooapoorva@gmail.com>
---
 client/src/components/views/InitializingView.tsx | 2 +-
 client/src/components/views/NotRunningView.tsx   | 2 +-
 client/src/components/views/RunningView.tsx      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/components/views/InitializingView.tsx b/client/src/components/views/InitializingView.tsx
index 4aea0ec..24da32b 100644
--- a/client/src/components/views/InitializingView.tsx
+++ b/client/src/components/views/InitializingView.tsx
@@ -36,4 +36,4 @@ const InitializingView: React.FC = () => {
   );
 };
 
-export default InitializingView;
\ No newline at end of file
+export default InitializingView;
diff --git a/client/src/components/views/NotRunningView.tsx b/client/src/components/views/NotRunningView.tsx
index cee96f7..6b91441 100644
--- a/client/src/components/views/NotRunningView.tsx
+++ b/client/src/components/views/NotRunningView.tsx
@@ -132,4 +132,4 @@ const NotRunningView: React.FC<NotRunningViewProps> = ({
   );
 };
 
-export default NotRunningView;
\ No newline at end of file
+export default NotRunningView;
diff --git a/client/src/components/views/RunningView.tsx b/client/src/components/views/RunningView.tsx
index 8f9849f..0a4d9cf 100644
--- a/client/src/components/views/RunningView.tsx
+++ b/client/src/components/views/RunningView.tsx
@@ -145,4 +145,4 @@ const RunningView: React.FC<RunningViewProps> = ({
   );
 };
 
-export default RunningView;
\ No newline at end of file
+export default RunningView;

From cae8b798560aaabc734f43228b0ba21a337ec2f2 Mon Sep 17 00:00:00 2001
From: Apoorva Appadoo Srinivas <appadooapoorva@gmail.com>
Date: Mon, 22 Sep 2025 17:08:10 +0200
Subject: [PATCH 4/4] style: format with pretiier

Signed-off-by: Apoorva Appadoo Srinivas <appadooapoorva@gmail.com>
---
 client/src/components/views/NotRunningView.tsx |  7 +------
 client/src/components/views/RunningView.tsx    | 12 ++----------
 2 files changed, 3 insertions(+), 16 deletions(-)

diff --git a/client/src/components/views/NotRunningView.tsx b/client/src/components/views/NotRunningView.tsx
index 6b91441..df13682 100644
--- a/client/src/components/views/NotRunningView.tsx
+++ b/client/src/components/views/NotRunningView.tsx
@@ -81,12 +81,7 @@ const NotRunningView: React.FC<NotRunningViewProps> = ({
           {!appStatus.isRunning && (
             <Chip variant="outlined" color="error" label="STOPPED" />
           )}
-          <Box
-            alignContent="center"
-            display="flex"
-            alignItems="center"
-            mx={1}
-          >
+          <Box alignContent="center" display="flex" alignItems="center" mx={1}>
             <RocketLaunchIcon />
           </Box>
           <Box
diff --git a/client/src/components/views/RunningView.tsx b/client/src/components/views/RunningView.tsx
index 0a4d9cf..066d6f3 100644
--- a/client/src/components/views/RunningView.tsx
+++ b/client/src/components/views/RunningView.tsx
@@ -63,10 +63,7 @@ const RunningView: React.FC<RunningViewProps> = ({
       justifyContent="flex-start"
       height="95vh"
     >
-      <Box
-        sx={{ display: 'flex', width: '100%', alignItems: 'center' }}
-        my={1}
-      >
+      <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
@@ -99,12 +96,7 @@ const RunningView: React.FC<RunningViewProps> = ({
         }}
       >
         <Chip variant="filled" color="success" label="RUNNING" />
-        <Box
-          alignContent="center"
-          display="flex"
-          alignItems="center"
-          mx={1}
-        >
+        <Box alignContent="center" display="flex" alignItems="center" mx={1}>
           <DoneOutlinedIcon />
         </Box>
         <Box