Merge pull request #475 from dolittle/change-architecture

Change architecture
dolittle · Sep 28, 2023 · 5c31d8f · 5c31d8f
2 parents 3dcaa8b + 1e8f89d
commit 5c31d8f
Show file tree

Hide file tree

Showing 59 changed files with 749 additions and 737 deletions.
diff --git a/Source/SelfService/Web/App.tsx b/Source/SelfService/Web/App.tsx
@@ -21,18 +21,19 @@ import { RouteNotFound } from './components/notfound';
 import { Problem } from './components/problem';
 import { LandingPageDecider } from './components/layout/landingPageDecider';
 
-import { BackupsScreen } from './applications/backupsScreen';
-import { SetupScreen } from './applications/setupScreen';
-import { MicroservicesScreen } from './applications/microservicesScreen';
-import { ContainerRegistryScreen } from './applications/containerRegistryScreen';
-import { M3ConnectorScreen } from './applications/m3connectorScreen';
-import { LogsScreen } from './applications/logsScreen';
+import { BackupsIndex } from './applications/backup';
+import { ContainerRegistryIndex } from './applications/containerregistry';
+import { LogsIndex } from './applications/logging';
+import { MicroservicesIndex } from './applications/microservice';
+import { M3ConnectorIndex } from './applications/m3connector';
+import { SetupIndex } from './applications/setup';
+
+import { AdminIndex } from './admin';
+import { HomeIndex } from './home';
+import { IntegrationsIndex } from './integrations';
 
-import { ApplicationsScreen } from './spaces/applications/applicationsScreen';
-import { Screen as AdminScreen } from './admin/adminScreen';
+import { ApplicationsIndex } from './spaces/applications';
 import { ApplicationBuilding } from './spaces/applications/applicationBuilding';
-import { HomeScreen } from './home/homeScreen';
-import { IntegrationsIndex } from './integrations';
 
 // Set license info for MUI components
 LicenseInfo.setLicenseKey(process.env.MUI_LICENSE_KEY!);
@@ -54,31 +55,18 @@ export const App = () => {
                     >
                         <Routes>
                             <Route path='/' element={<LandingPageDecider />} />
-
-                            <Route path='/home' element={<HomeScreen />} />
-
-                            <Route path='/applications' element={<ApplicationsScreen />} />
-
-                            <Route path='/microservices/application/:applicationId/*' element={<MicroservicesScreen />} />
-
-                            <Route path='/backups/application/:applicationId/*' element={<BackupsScreen />} />
-
-                            <Route path='/containerregistry/application/:applicationId/*' element={<ContainerRegistryScreen />} />
-
-                            <Route path='/m3connector/application/:applicationId/*' element={<M3ConnectorScreen />} />
-
-                            <Route path='/logs/application/:applicationId' element={<LogsScreen />} />
-
-                            <Route path='/setup/application/:applicationId/*' element={<SetupScreen />} />
-
+                            <Route path='/home' element={<HomeIndex />} />
+                            <Route path='/applications' element={<ApplicationsIndex />} />
+                            <Route path='/microservices/application/:applicationId/*' element={<MicroservicesIndex />} />
+                            <Route path='/backups/application/:applicationId/*' element={<BackupsIndex />} />
+                            <Route path='/containerregistry/application/:applicationId/*' element={<ContainerRegistryIndex />} />
+                            <Route path='/m3connector/application/:applicationId/*' element={<M3ConnectorIndex />} />
+                            <Route path='/logs/application/:applicationId' element={<LogsIndex />} />
+                            <Route path='/setup/application/:applicationId/*' element={<SetupIndex />} />
                             <Route path='/integrations/*' element={<IntegrationsIndex />} />
-
-                            <Route path='/admin/*' element={<AdminScreen />} />
-
+                            <Route path='/admin/*' element={<AdminIndex />} />
                             <Route path='/building' element={<ApplicationBuilding />} />
-
                             <Route path='/problem' element={<Problem />} />
-
                             <Route path='*' element={<RouteNotFound redirectUrl='/' auto={true} />} />
                         </Routes>
                     </SnackbarProvider>

diff --git a/Source/SelfService/Web/admin/Welcome.tsx b/Source/SelfService/Web/admin/Welcome.tsx
@@ -0,0 +1,25 @@
+// Copyright (c) Dolittle. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import React from 'react';
+
+import { Link } from 'react-router-dom';
+
+import { Typography } from '@mui/material';
+
+import { Button } from '@dolittle/design-system';
+
+export const Welcome = () =>
+    <>
+        <Typography variant='h1' my={2}>Hello Admin</Typography>
+
+        <Button
+            label='Take me to the Customers'
+            variant='filled'
+            endWithIcon='KeyboardDoubleArrowRight'
+            overrides={{
+                component: Link,
+                to: '/admin/customers',
+            }}
+        />
+    </>;
diff --git a/Source/SelfService/Web/admin/adminScreen.tsx b/Source/SelfService/Web/admin/adminScreen.tsx
diff --git a/...elfService/Web/admin/application/view.tsx → ...min/application/ApplicationAccessView.tsx b/...elfService/Web/admin/application/view.tsx → ...min/application/ApplicationAccessView.tsx
@@ -3,13 +3,12 @@
 
 import React, { useEffect, useState } from 'react';
 
-import { useParams, useNavigate } from 'react-router-dom';
-
+import { useNavigate, useParams } from 'react-router-dom';
 import { useSnackbar } from 'notistack';
 
 import { Typography } from '@mui/material';
 
-import { Button } from '@dolittle/design-system';
+import { Button, TextField } from '@dolittle/design-system';
 
 import {
     adminApplicationAccessAddUser,
@@ -20,21 +19,19 @@ import {
 } from '../../apis/solutions/application';
 import { Customer, getCustomer } from '../../apis/solutions/customer';
 
-import { TextField } from '../../components/theme-legacy/textField';
-
 type ViewParams = {
     customerId: string;
     applicationId: string;
 };
 
-export const View = () => {
+export const ApplicationAccessView = () => {
     const navigate = useNavigate();
     const { enqueueSnackbar } = useSnackbar();
-
     const { customerId, applicationId } = useParams<ViewParams>();
+
     if (!customerId || !applicationId) return null;
 
-    const [loaded, setLoaded] = useState(false);
+    const [isLoaded, setIsLoaded] = useState(false);
     const [fetchDataError, setFetchDataError] = useState(false);
     const [accessInfo, setAccessInfo] = useState({} as HttpResponseApplicationAccess);
     const [customer, setCustomer] = useState({} as Customer);
@@ -46,20 +43,20 @@ export const View = () => {
                 getCustomer(customerId),
                 getAdminApplicationAccess(customerId, applicationId),
             ]);
+
             setCustomer(data[0].customer);
             setAccessInfo(data[1]);
-            setLoaded(true);
+            setIsLoaded(true);
         };
 
         fetchData().catch(() => {
             setFetchDataError(true);
-            // TODO could be better with the message
             enqueueSnackbar('Failed to get data from the server.', { variant: 'error' });
         });
     }, []);
 
     const handleBackToCustomers = () => {
-        const href = `/admin/customers`;
+        const href = '/admin/customers';
         navigate(href);
     };
 
@@ -77,7 +74,7 @@ export const View = () => {
         );
     }
 
-    if (!loaded) return null;
+    if (!isLoaded) return null;
 
     const handleAddEmail = async () => {
         if (userEmail === '') {
@@ -125,11 +122,10 @@ export const View = () => {
 
             <Typography variant='h2' my={4}>Access View</Typography>
 
-            <TextField id="userEmail"
+            <TextField
                 label='Email'
-                placeholder=""
                 value={userEmail}
-                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                onValueChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                     const newValue = event.target.value!;
                     setUserEmail(newValue);
                 }}

diff --git a/...elfService/Web/admin/customer/viewAll.tsx → ...e/Web/admin/customer/AllCustomersView.tsx b/...elfService/Web/admin/customer/viewAll.tsx → ...e/Web/admin/customer/AllCustomersView.tsx
@@ -12,24 +12,24 @@ import { Button } from '@dolittle/design-system';
 
 import { getCustomers, Customers } from '../../apis/solutions/customer';
 
-export const ViewAll = () => {
+export const AllCustomersView = () => {
     const { enqueueSnackbar } = useSnackbar();
 
-    const [loaded, setLoaded] = useState(false);
     const [customers, setCustomers] = useState([] as Customers);
+    const [isLoaded, setIsLoaded] = useState(false);
 
     useEffect(() => {
         getCustomers()
             .then(customers => {
                 setCustomers(customers);
-                setLoaded(true);
-            }).catch(error => {
-                console.log(error);
+                setIsLoaded(true);
+            })
+            .catch(() => {
                 enqueueSnackbar('Failed getting data from the server.', { variant: 'error' });
             });
     }, []);
 
-    if (!loaded) return null;
+    if (!isLoaded) return null;
 
     return (
         <>

diff --git a/...SelfService/Web/admin/customer/create.tsx → ...ice/Web/admin/customer/CreateCustomer.tsx b/...SelfService/Web/admin/customer/create.tsx → ...ice/Web/admin/customer/CreateCustomer.tsx
@@ -2,8 +2,8 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
 
+import { useNavigate } from 'react-router-dom';
 import { useSnackbar } from 'notistack';
 
 import { Box, Grid, Step, Stepper, StepContent, StepLabel, Typography } from '@mui/material';
@@ -50,9 +50,7 @@ const styles = {
     }
 };
 
-
-
-export const Create = () => {
+export const CreateCustomer = () => {
     const navigate = useNavigate();
     const { enqueueSnackbar } = useSnackbar();
 
@@ -67,11 +65,8 @@ export const Create = () => {
 
     const stepsContent = [
         <>
-            <Typography component='span'>
-                <p>
-                    Customer Name
-                </p>
-            </Typography>
+            <Typography>Customer Name</Typography>
+
             <Grid
                 container
                 direction='row'
@@ -89,25 +84,24 @@ export const Create = () => {
                     }}
                 />
             </Grid>
-        </>,
+        </>
     ];
 
-
-    const handleNext = async (event: React.MouseEvent<HTMLElement>) => {
+    const handleNext = async () => {
         const input: HttpCustomerRequest = {
             name: customerName,
         };
+
         try {
             const data = await createCustomer(input);
-            console.log(data);
             enqueueSnackbar('Customer created', { variant: 'info' });
         } catch (error) {
-            enqueueSnackbar('Error creating customer', { variant: 'error' });
+            enqueueSnackbar('Error creating customer.', { variant: 'error' });
         }
+
         return;
     };
 
-
     return (
         <>
             <Typography variant='h1' my={2}>Create Customer Screen</Typography>