Container Copy Job implementation for SQL accounts (#2241)

* Initial dev for container copy

* remove padding from label

* Added Copy Job prerequisites screen

* Added hooks to evaluate reader role access

* added copyjob pre-requsite screen along with it's validations

* Added monitor copy job list screen

* added copy job list refresh and reset functionality

* remove arm token dependency

* fetch account details from account id instead of context

* Fix lint & typescript checks

* show copyjob screen from portal navigation

* adding copy job details screen

* remove duplicate code & show sql accounts only

* ui fixes for list job page

* pending icon

* copy job details screen ui

* reset .vscode/settings.json

* Fixed existing UTs

* disabling action buttons until it's in progress

* fixed formatting

* Adding loader on submit button and show job creation errors in the panel itself

* updating disabling action menu item logic

* added custom pager

* fix lint and ts errors

* updating file names and removing comments

* remove comments

* modularize the arom common code

* Adding content and removing tooltip

* updating job details screen

* updating online copy enabled screen

* Adding below changes
- Don't show permission screen for same account in offline mode
- Don't show identity permissions for same account in online mode
- Show error message if selected containers are identical
- Update abort signal messages

* added feedback code from explorer

* Add tooltips and long polling
- Added tooltips to permission sections
- Implemented long polling for PITR and online copy enabled sections
- Long polling automatically stops after 15 minutes
- After polling ends, a refresh button will be displayed

---------

Co-authored-by: nishthaAhujaa <nishtha17354@iiittd.ac.in>

src/Explorer/ContainerCopy/CreateCopyJob/Screens/PreviewCopyJob/PreviewCopyJob.tsx

@@ -0,0 +1,52 @@
+import { DetailsList, DetailsListLayoutMode, Stack, Text, TextField } from "@fluentui/react";
+import FieldRow from "Explorer/ContainerCopy/CreateCopyJob/Screens/Components/FieldRow";
+import React from "react";
+import ContainerCopyMessages from "../../../ContainerCopyMessages";
+import { useCopyJobContext } from "../../../Context/CopyJobContext";
+import { getPreviewCopyJobDetailsListColumns } from "./Utils/PreviewCopyJobUtils";
+
+const PreviewCopyJob: React.FC = () => {
+  const { copyJobState, setCopyJobState } = useCopyJobContext();
+
+  const selectedDatabaseAndContainers = [
+    {
+      sourceDatabaseName: copyJobState.source?.databaseId,
+      sourceContainerName: copyJobState.source?.containerId,
+      targetDatabaseName: copyJobState.target?.databaseId,
+      targetContainerName: copyJobState.target?.containerId,
+    },
+  ];
+  const jobName = copyJobState.jobName;
+
+  const onJobNameChange = (_ev?: React.FormEvent, newValue?: string) => {
+    setCopyJobState((prevState) => ({
+      ...prevState,
+      jobName: newValue || "",
+    }));
+  };
+  return (
+    <Stack tokens={{ childrenGap: 20 }} className="previewCopyJobContainer">
+      <FieldRow label={ContainerCopyMessages.jobNameLabel}>
+        <TextField value={jobName} onChange={onJobNameChange} />
+      </FieldRow>
+      <Stack>
+        <Text className="bold">{ContainerCopyMessages.sourceSubscriptionLabel}</Text>
+        <Text>{copyJobState.source?.subscription?.displayName}</Text>
+      </Stack>
+      <Stack>
+        <Text className="bold">{ContainerCopyMessages.sourceAccountLabel}</Text>
+        <Text>{copyJobState.source?.account?.name}</Text>
+      </Stack>
+      <Stack>
+        <DetailsList
+          items={selectedDatabaseAndContainers}
+          layoutMode={DetailsListLayoutMode.justified}
+          checkboxVisibility={2}
+          columns={getPreviewCopyJobDetailsListColumns()}
+        />
+      </Stack>
+    </Stack>
+  );
+};
+
+export default PreviewCopyJob;

src/Explorer/ContainerCopy/CreateCopyJob/Screens/PreviewCopyJob/Utils/PreviewCopyJobUtils.ts

@@ -0,0 +1,43 @@
+import { IColumn } from "@fluentui/react";
+import ContainerCopyMessages from "../../../../ContainerCopyMessages";
+
+const commonProps = {
+  minWidth: 130,
+  maxWidth: 140,
+  styles: {
+    root: {
+      whiteSpace: "normal",
+      lineHeight: "1.2",
+      wordBreak: "break-word",
+    },
+  },
+};
+
+export const getPreviewCopyJobDetailsListColumns = (): IColumn[] => {
+  return [
+    {
+      key: "sourcedbname",
+      name: ContainerCopyMessages.sourceDatabaseLabel,
+      fieldName: "sourceDatabaseName",
+      ...commonProps,
+    },
+    {
+      key: "sourcecolname",
+      name: ContainerCopyMessages.sourceContainerLabel,
+      fieldName: "sourceContainerName",
+      ...commonProps,
+    },
+    {
+      key: "targetdbname",
+      name: ContainerCopyMessages.targetDatabaseLabel,
+      fieldName: "targetDatabaseName",
+      ...commonProps,
+    },
+    {
+      key: "targetcolname",
+      name: ContainerCopyMessages.targetContainerLabel,
+      fieldName: "targetContainerName",
+      ...commonProps,
+    },
+  ];
+};