diff --git a/src/Common/LoadingOverlay.tsx b/src/Common/LoadingOverlay.tsx new file mode 100644 index 000000000..320576533 --- /dev/null +++ b/src/Common/LoadingOverlay.tsx @@ -0,0 +1,31 @@ +import { Overlay, Spinner, SpinnerSize } from "@fluentui/react"; +import React from "react"; + +interface LoadingOverlayProps { + isLoading: boolean; + label: string; +} + +const LoadingOverlay: React.FC = ({ isLoading, label }) => { + if (!isLoading) { + return null; + } + + return ( + + + + ); +}; + +export default LoadingOverlay; diff --git a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/OnlineCopyEnabled.tsx b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/OnlineCopyEnabled.tsx index 9d9279e1a..1c1d6bfd5 100644 --- a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/OnlineCopyEnabled.tsx +++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/OnlineCopyEnabled.tsx @@ -1,8 +1,9 @@ import { Link, PrimaryButton, Stack } from "@fluentui/react"; -import { CapabilityNames } from "Common/Constants"; import { DatabaseAccount } from "Contracts/DataModels"; import React from "react"; import { fetchDatabaseAccount } from "Utils/arm/databaseAccountUtils"; +import { CapabilityNames } from "../../../../../Common/Constants"; +import LoadingOverlay from "../../../../../Common/LoadingOverlay"; import { logError } from "../../../../../Common/Logger"; import { update as updateDatabaseAccount } from "../../../../../Utils/arm/generatedClients/cosmos/databaseAccounts"; import ContainerCopyMessages from "../../../ContainerCopyMessages"; @@ -119,6 +120,7 @@ const OnlineCopyEnabled: React.FC = () => { return ( + {ContainerCopyMessages.onlineCopyEnabled.description(source?.account?.name || "")}  diff --git a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/PointInTimeRestore.tsx b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/PointInTimeRestore.tsx index 30c104ec2..d1697c14b 100644 --- a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/PointInTimeRestore.tsx +++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/PointInTimeRestore.tsx @@ -2,6 +2,7 @@ import { Link, PrimaryButton, Stack, Text } from "@fluentui/react"; import { DatabaseAccount } from "Contracts/DataModels"; import React, { useEffect, useRef, useState } from "react"; import { fetchDatabaseAccount } from "Utils/arm/databaseAccountUtils"; +import LoadingOverlay from "../../../../../Common/LoadingOverlay"; import { logError } from "../../../../../Common/Logger"; import ContainerCopyMessages from "../../../ContainerCopyMessages"; import { useCopyJobContext } from "../../../Context/CopyJobContext"; @@ -108,6 +109,7 @@ const PointInTimeRestore: React.FC = () => { return ( + {ContainerCopyMessages.pointInTimeRestore.description(source.account?.name ?? "")} {tooltipContent && ( diff --git a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/Components/PopoverContainer.tsx b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/Components/PopoverContainer.tsx index b8706ecf1..5a76d66eb 100644 --- a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/Components/PopoverContainer.tsx +++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/Components/PopoverContainer.tsx @@ -1,8 +1,9 @@ /* eslint-disable react/prop-types */ /* eslint-disable react/display-name */ -import { DefaultButton, Overlay, PrimaryButton, Spinner, SpinnerSize, Stack, Text } from "@fluentui/react"; -import ContainerCopyMessages from "Explorer/ContainerCopy/ContainerCopyMessages"; +import { DefaultButton, PrimaryButton, Stack, Text } from "@fluentui/react"; import React from "react"; +import LoadingOverlay from "../../../../../Common/LoadingOverlay"; +import ContainerCopyMessages from "../../../ContainerCopyMessages"; interface PopoverContainerProps { isLoading?: boolean; @@ -20,25 +21,7 @@ const PopoverContainer: React.FC = React.memo( tokens={{ childrenGap: 20 }} style={{ maxWidth: 450 }} > - {isLoading && ( - - - - )} + {title} diff --git a/src/Explorer/ContainerCopy/containerCopyStyles.less b/src/Explorer/ContainerCopy/containerCopyStyles.less index c28d4cbec..9b995b3ad 100644 --- a/src/Explorer/ContainerCopy/containerCopyStyles.less +++ b/src/Explorer/ContainerCopy/containerCopyStyles.less @@ -19,6 +19,10 @@ .createCopyJobScreensContainer { height: 100%; padding: 1em 1.5em; + + .pointInTimeRestoreContainer, .onlineCopyContainer { + position: relative; + } label { padding: 0;