From d00bf69924e16f7ec671829004e1ba69dc731462 Mon Sep 17 00:00:00 2001
From: N00bG1rl <403helen@gmail.com>
Date: Tue, 26 Sep 2023 14:58:08 +0300
Subject: [PATCH] Separate LoadingSpinnerFullPage to its own component

---
 .../atoms/LoadingSpinner/LoadingSpinner.tsx   | 15 +++++--------
 .../atoms/LoadingSpinner/index.ts             |  2 +-
 .../LoadingSpinnerFullPage.stories.tsx        | 22 +++++++++++++++++++
 .../LoadingSpinnerFullPage.tsx                | 22 +++++++++++++++++++
 .../atoms/LoadingSpinnerFullPage/index.ts     |  4 ++++
 Source/DesignSystem/index.ts                  |  3 ++-
 .../deployMicroservice/deployMicroservice.tsx |  5 +++--
 .../setupSection/setupSection.tsx             |  4 ++--
 .../healthStatus/healthStatus.tsx             |  2 +-
 .../applications/applicationCreateDialog.tsx  |  4 ++--
 10 files changed, 64 insertions(+), 19 deletions(-)
 create mode 100644 Source/DesignSystem/atoms/LoadingSpinnerFullPage/LoadingSpinnerFullPage.stories.tsx
 create mode 100644 Source/DesignSystem/atoms/LoadingSpinnerFullPage/LoadingSpinnerFullPage.tsx
 create mode 100644 Source/DesignSystem/atoms/LoadingSpinnerFullPage/index.ts

diff --git a/Source/DesignSystem/atoms/LoadingSpinner/LoadingSpinner.tsx b/Source/DesignSystem/atoms/LoadingSpinner/LoadingSpinner.tsx
index ed874db2d..886acc60f 100644
--- a/Source/DesignSystem/atoms/LoadingSpinner/LoadingSpinner.tsx
+++ b/Source/DesignSystem/atoms/LoadingSpinner/LoadingSpinner.tsx
@@ -2,20 +2,15 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import React from 'react';
-import { createPortal } from 'react-dom';
 
 import { Box, CircularProgress, CircularProgressProps } from '@mui/material';
 
+/**
+ * The {@link LoadingSpinner} component is used to display a loading spinner.
+ * @param {CircularProgress} props - The {@link CircularProgressProps}.
+ * @returns A {@link LoadingSpinner} component.
+ */
 export const LoadingSpinner = (props: CircularProgressProps) =>
     <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh', p: 2 }}>
         <CircularProgress {...props} />
     </Box>;
-
-// TODO: Move this to a separate component.
-export const FullPageLoadingSpinner = (props: CircularProgressProps) =>
-    createPortal(
-        <Box sx={{ width: 1, height: 1, position: 'absolute', top: 0, left: 0, zIndex: '9999', backgroundColor: '#191A2150' }}>
-            <LoadingSpinner {...props} />
-        </Box>,
-        document.body,
-    );
diff --git a/Source/DesignSystem/atoms/LoadingSpinner/index.ts b/Source/DesignSystem/atoms/LoadingSpinner/index.ts
index 3f630ad8a..ff5fa9336 100644
--- a/Source/DesignSystem/atoms/LoadingSpinner/index.ts
+++ b/Source/DesignSystem/atoms/LoadingSpinner/index.ts
@@ -1,4 +1,4 @@
 // Copyright (c) Dolittle. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-export { FullPageLoadingSpinner, LoadingSpinner } from './LoadingSpinner';
+export { LoadingSpinner } from './LoadingSpinner';
diff --git a/Source/DesignSystem/atoms/LoadingSpinnerFullPage/LoadingSpinnerFullPage.stories.tsx b/Source/DesignSystem/atoms/LoadingSpinnerFullPage/LoadingSpinnerFullPage.stories.tsx
new file mode 100644
index 000000000..1cdcf34ee
--- /dev/null
+++ b/Source/DesignSystem/atoms/LoadingSpinnerFullPage/LoadingSpinnerFullPage.stories.tsx
@@ -0,0 +1,22 @@
+// Copyright (c) Dolittle. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { componentStories, LoadingSpinnerFullPage } from '../../index';
+
+const { metadata, createStory } = componentStories(LoadingSpinnerFullPage);
+
+// TODO: Update component to improve text.
+
+metadata.parameters = {
+    docs: {
+        description: {
+            component: `A loading spinner is a progress indicator used to inform users about the status of ongoing processes, 
+        such as loading data or submitting a form. Provide a descriptive label that indicates the status to the user. 
+        By default, loading spinners are in an indeterminate state.` },
+    },
+    layout: 'centered',
+};
+
+export default metadata;
+
+export const Default = createStory();
diff --git a/Source/DesignSystem/atoms/LoadingSpinnerFullPage/LoadingSpinnerFullPage.tsx b/Source/DesignSystem/atoms/LoadingSpinnerFullPage/LoadingSpinnerFullPage.tsx
new file mode 100644
index 000000000..e29395cab
--- /dev/null
+++ b/Source/DesignSystem/atoms/LoadingSpinnerFullPage/LoadingSpinnerFullPage.tsx
@@ -0,0 +1,22 @@
+// 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 { createPortal } from 'react-dom';
+
+import { Box, CircularProgressProps } from '@mui/material';
+
+import { LoadingSpinner } from '../../index';
+
+/**
+ * The {@link LoadingSpinnerFullPage} component is used to display a loading spinner full page.
+ * @param {LoadingSpinnerFullPage} props - The {@link CircularProgressProps}.
+ * @returns A {@link LoadingSpinnerFullPage} component.
+ */
+export const LoadingSpinnerFullPage = (props: CircularProgressProps) =>
+    createPortal(
+        <Box sx={{ width: 1, height: 1, position: 'absolute', top: 0, left: 0, zIndex: '9999', backgroundColor: '#191A2150' }}>
+            <LoadingSpinner {...props} />
+        </Box>,
+        document.body,
+    );
diff --git a/Source/DesignSystem/atoms/LoadingSpinnerFullPage/index.ts b/Source/DesignSystem/atoms/LoadingSpinnerFullPage/index.ts
new file mode 100644
index 000000000..828997cc3
--- /dev/null
+++ b/Source/DesignSystem/atoms/LoadingSpinnerFullPage/index.ts
@@ -0,0 +1,4 @@
+// Copyright (c) Dolittle. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export { LoadingSpinnerFullPage } from './LoadingSpinnerFullPage';
diff --git a/Source/DesignSystem/index.ts b/Source/DesignSystem/index.ts
index acd278275..c169ca814 100644
--- a/Source/DesignSystem/index.ts
+++ b/Source/DesignSystem/index.ts
@@ -17,7 +17,8 @@ export * from './atoms/Forms';
 export { Icon, IconProps } from './atoms/Icon';
 export { IconButton, IconButtonProps } from './atoms/IconButton';
 export { Link, LinkProps } from './atoms/Link';
-export { FullPageLoadingSpinner, LoadingSpinner } from './atoms/LoadingSpinner';
+export { LoadingSpinner } from './atoms/LoadingSpinner';
+export { LoadingSpinnerFullPage } from './atoms/LoadingSpinnerFullPage';
 export { StatusIndicator, StatusIndicatorProps } from './atoms/StatusIndicator';
 export { Summary } from './atoms/Metrics';
 export { Tabs } from './atoms/Tabs';
diff --git a/Source/SelfService/Web/applications/microservice/deployMicroservice/deployMicroservice.tsx b/Source/SelfService/Web/applications/microservice/deployMicroservice/deployMicroservice.tsx
index fdf3d6b30..3a6c8fdf3 100644
--- a/Source/SelfService/Web/applications/microservice/deployMicroservice/deployMicroservice.tsx
+++ b/Source/SelfService/Web/applications/microservice/deployMicroservice/deployMicroservice.tsx
@@ -10,7 +10,7 @@ import { Guid } from '@dolittle/rudiments';
 
 import { Typography } from '@mui/material';
 
-import { Button, Form, FullPageLoadingSpinner } from '@dolittle/design-system';
+import { Button, Form, LoadingSpinnerFullPage } from '@dolittle/design-system';
 
 import { saveSimpleMicroservice } from '../../stores/microservice';
 
@@ -91,7 +91,8 @@ export const DeployMicroservice = ({ application }: DeployMicroserviceProps) =>
 
     return (
         <>
-            {isLoading && <FullPageLoadingSpinner />}
+            {isLoading && <LoadingSpinnerFullPage />}
+
             <Typography variant='h1' sx={{ mt: 3, mb: 4 }}>Deploy Base Microservice</Typography>
 
             <Form<MicroserviceFormParameters>
diff --git a/Source/SelfService/Web/applications/microservice/microserviceDetails/configurationFilesSection/setupSection/setupSection.tsx b/Source/SelfService/Web/applications/microservice/microserviceDetails/configurationFilesSection/setupSection/setupSection.tsx
index fc8125f78..843914067 100644
--- a/Source/SelfService/Web/applications/microservice/microserviceDetails/configurationFilesSection/setupSection/setupSection.tsx
+++ b/Source/SelfService/Web/applications/microservice/microserviceDetails/configurationFilesSection/setupSection/setupSection.tsx
@@ -8,7 +8,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { Box } from '@mui/material';
 
-import { AlertDialog, Button, Form, FullPageLoadingSpinner } from '@dolittle/design-system';
+import { AlertDialog, Button, Form, LoadingSpinnerFullPage } from '@dolittle/design-system';
 
 import { canDeleteMicroservice, deleteMicroservice, MicroserviceStore } from '../../../../stores/microservice';
 
@@ -99,7 +99,7 @@ export const SetupSection = ({ application, currentMicroservice }: SetupSectionP
 
     return (
         <>
-            {isLoading && <FullPageLoadingSpinner />}
+            {isLoading && <LoadingSpinnerFullPage />}
 
             <AlertDialog
                 id='delete-microservice'
diff --git a/Source/SelfService/Web/applications/microservice/microserviceDetails/healthStatus/healthStatus.tsx b/Source/SelfService/Web/applications/microservice/microserviceDetails/healthStatus/healthStatus.tsx
index bb8e83ada..6842b7f2f 100644
--- a/Source/SelfService/Web/applications/microservice/microserviceDetails/healthStatus/healthStatus.tsx
+++ b/Source/SelfService/Web/applications/microservice/microserviceDetails/healthStatus/healthStatus.tsx
@@ -5,7 +5,7 @@ import React, { useMemo, useState } from 'react';
 
 import { MicroserviceStore } from '../../../stores/microservice';
 
-import { AlertBox, AlertBoxErrorMessage, Button, FullPageLoadingSpinner, Graph } from '@dolittle/design-system';
+import { AlertBox, AlertBoxErrorMessage, Button, Graph } from '@dolittle/design-system';
 
 import { ContainerStatusInfo, HttpResponsePodStatus } from '../../../../apis/solutions/api';
 
diff --git a/Source/SelfService/Web/spaces/applications/applicationCreateDialog.tsx b/Source/SelfService/Web/spaces/applications/applicationCreateDialog.tsx
index 087c0b1b9..7bc237133 100644
--- a/Source/SelfService/Web/spaces/applications/applicationCreateDialog.tsx
+++ b/Source/SelfService/Web/spaces/applications/applicationCreateDialog.tsx
@@ -9,7 +9,7 @@ import { Guid } from '@dolittle/rudiments';
 
 import { Stack, Typography } from '@mui/material';
 
-import { Checkbox, DialogForm, FullPageLoadingSpinner, Input } from '@dolittle/design-system';
+import { Checkbox, DialogForm, LoadingSpinnerFullPage, Input } from '@dolittle/design-system';
 
 import { createApplication, HttpApplicationRequest } from '../../apis/solutions/application';
 
@@ -90,7 +90,7 @@ export const ApplicationCreateDialog = ({ isOpen, onClose }: ApplicationCreateDi
             onCancel={onClose}
             onConfirm={handleSpaceCreate}
         >
-            {isLoading && <FullPageLoadingSpinner />}
+            {isLoading && <LoadingSpinnerFullPage />}
 
             <Typography variant='body1' sx={{ my: 2 }}>Provide a name for your new application.</Typography>
             <Input