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/Main.tsx

@@ -20,9 +20,12 @@ import "../externals/jquery.typeahead.min.css";
 import "../externals/jquery.typeahead.min.js";
 // Image Dependencies
 import { Platform } from "ConfigContext";
+import ContainerCopyPanel from "Explorer/ContainerCopy/ContainerCopyPanel";
+import Explorer from "Explorer/Explorer";
 import { QueryCopilotCarousel } from "Explorer/QueryCopilot/CopilotCarousel";
 import { SidebarContainer } from "Explorer/Sidebar";
 import { KeyboardShortcutRoot } from "KeyboardShortcuts";
+import { userContext } from "UserContext";
 import "allotment/dist/style.css";
 import "../images/CosmosDB_rgb_ui_lighttheme.ico";
 import hdeConnectImage from "../images/HdeConnectCosmosDB.svg";
@@ -83,22 +86,12 @@ const App: React.FunctionComponent = () => {
   return (
     <KeyboardShortcutRoot>
       <div className="flexContainer" aria-hidden="false" data-test="DataExplorerRoot">
-        <div id="divExplorer" className="flexContainer hideOverflows">
-          <div id="freeTierTeachingBubble"> </div>
-          {/* Main Command Bar - Start */}
-          <CommandBar container={explorer} />
-          {/* Collections Tree and Tabs - Begin */}
-          <SidebarContainer explorer={explorer} />
-          {/* Collections Tree and Tabs - End */}
-          <div
-            className="dataExplorerErrorConsoleContainer"
-            role="contentinfo"
-            aria-label="Notification console"
-            id="explorerNotificationConsole"
-          >
-            <NotificationConsole />
-          </div>
-        </div>
+        {userContext.features.enableContainerCopy && userContext.apiType === "SQL" ? (
+          <ContainerCopyPanel container={explorer} />
+        ) : (
+          <DivExplorer explorer={explorer} />
+        )}
+
         <SidePanel />
         <Dialog />
         {<QuickstartCarousel isOpen={isCarouselOpen} />}
@@ -113,6 +106,27 @@ const App: React.FunctionComponent = () => {
 const mainElement = document.getElementById("Main");
 ReactDOM.render(<App />, mainElement);
 
+function DivExplorer({ explorer }: { explorer: Explorer }): JSX.Element {
+  return (
+    <div id="divExplorer" className="flexContainer hideOverflows">
+      <div id="freeTierTeachingBubble"> </div>
+      {/* Main Command Bar - Start */}
+      <CommandBar container={explorer} />
+      {/* Collections Tree and Tabs - Begin */}
+      <SidebarContainer explorer={explorer} />
+      {/* Collections Tree and Tabs - End */}
+      <div
+        className="dataExplorerErrorConsoleContainer"
+        role="contentinfo"
+        aria-label="Notification console"
+        id="explorerNotificationConsole"
+      >
+        <NotificationConsole />
+      </div>
+    </div>
+  );
+}
+
 function LoadingExplorer(): JSX.Element {
   return (
     <div className="splashLoaderContainer">