Integrate container creation screen to copy job flow (#2265)

src/Explorer/ContainerCopy/Actions/CopyJobActions.tsx

@@ -1,3 +1,4 @@
+import Explorer from "Explorer/Explorer";
 import React from "react";
 import { userContext } from "UserContext";
 import { logError } from "../../../Common/Logger";
@@ -29,12 +30,12 @@ import CopyJobDetails from "../MonitorCopyJobs/Components/CopyJobDetails";
 import { MonitorCopyJobsRefState } from "../MonitorCopyJobs/MonitorCopyJobRefState";
 import { CopyJobContextState, CopyJobError, CopyJobErrorType, CopyJobType } from "../Types/CopyJobTypes";
 
-export const openCreateCopyJobPanel = () => {
+export const openCreateCopyJobPanel = (explorer: Explorer) => {
   const sidePanelState = useSidePanel.getState();
   sidePanelState.setPanelHasConsole(false);
   sidePanelState.openSidePanel(
     ContainerCopyMessages.createCopyJobPanelTitle,
-    <CreateCopyJobScreensProvider />,
+    <CreateCopyJobScreensProvider explorer={explorer} />,
     "650px",
   );
 };

src/Explorer/ContainerCopy/CommandBar/CopyJobCommandBar.tsx

@@ -13,8 +13,8 @@ const rootStyle = {
   },
 };
 
-const CopyJobCommandBar: React.FC<ContainerCopyProps> = ({ container }) => {
+const CopyJobCommandBar: React.FC<ContainerCopyProps> = ({ explorer }) => {
-  const commandBarItems: CommandButtonComponentProps[] = getCommandBarButtons(container);
+  const commandBarItems: CommandButtonComponentProps[] = getCommandBarButtons(explorer);
   const controlButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(commandBarItems, backgroundColor);
 
   return (

src/Explorer/ContainerCopy/CommandBar/Utils.ts

@@ -9,7 +9,7 @@ import ContainerCopyMessages from "../ContainerCopyMessages";
 import { MonitorCopyJobsRefState } from "../MonitorCopyJobs/MonitorCopyJobRefState";
 import { CopyJobCommandBarBtnType } from "../Types/CopyJobTypes";
 
-function getCopyJobBtns(container: Explorer): CopyJobCommandBarBtnType[] {
+function getCopyJobBtns(explorer: Explorer): CopyJobCommandBarBtnType[] {
   const monitorCopyJobsRef = MonitorCopyJobsRefState((state) => state.ref);
   const buttons: CopyJobCommandBarBtnType[] = [
     {
@@ -17,7 +17,7 @@ function getCopyJobBtns(container: Explorer): CopyJobCommandBarBtnType[] {
       iconSrc: AddIcon,
       label: ContainerCopyMessages.createCopyJobButtonLabel,
       ariaLabel: ContainerCopyMessages.createCopyJobButtonAriaLabel,
-      onClick: Actions.openCreateCopyJobPanel,
+      onClick: Actions.openCreateCopyJobPanel.bind(null, explorer),
     },
     {
       key: "refresh",
@@ -34,7 +34,7 @@ function getCopyJobBtns(container: Explorer): CopyJobCommandBarBtnType[] {
       label: ContainerCopyMessages.feedbackButtonLabel,
       ariaLabel: ContainerCopyMessages.feedbackButtonAriaLabel,
       onClick: () => {
-        container.openContainerCopyFeedbackBlade();
+        explorer.openContainerCopyFeedbackBlade();
       },
     });
   }
@@ -54,6 +54,6 @@ function btnMapper(config: CopyJobCommandBarBtnType): CommandButtonComponentProp
   };
 }
 
-export function getCommandBarButtons(container: Explorer): CommandButtonComponentProps[] {
+export function getCommandBarButtons(explorer: Explorer): CommandButtonComponentProps[] {
-  return getCopyJobBtns(container).map(btnMapper);
+  return getCopyJobBtns(explorer).map(btnMapper);
 }

src/Explorer/ContainerCopy/ContainerCopyMessages.ts

@@ -36,6 +36,9 @@ export default {
   databaseDropdownPlaceholder: "Select a database",
   containerDropdownLabel: "Container",
   containerDropdownPlaceholder: "Select a container",
+  createNewContainerSubHeading: "Select the properties for your container.",
+  createContainerButtonLabel: "Create a new container",
+  createContainerHeading: "Create new container",
 
   // Preview and Create Screen
   jobNameLabel: "Job name",

src/Explorer/ContainerCopy/ContainerCopyPanel.tsx

@@ -5,7 +5,7 @@ import { MonitorCopyJobsRefState } from "./MonitorCopyJobs/MonitorCopyJobRefStat
 import MonitorCopyJobs, { MonitorCopyJobsRef } from "./MonitorCopyJobs/MonitorCopyJobs";
 import { ContainerCopyProps } from "./Types/CopyJobTypes";
 
-const ContainerCopyPanel: React.FC<ContainerCopyProps> = ({ container }) => {
+const ContainerCopyPanel: React.FC<ContainerCopyProps> = ({ explorer }) => {
   const monitorCopyJobsRef = React.useRef<MonitorCopyJobsRef>();
   useEffect(() => {
     if (monitorCopyJobsRef.current) {
@@ -14,8 +14,8 @@ const ContainerCopyPanel: React.FC<ContainerCopyProps> = ({ container }) => {
   }, [monitorCopyJobsRef.current]);
   return (
     <div id="containerCopyWrapper" className="flexContainer hideOverflows">
-      <CopyJobCommandBar container={container} />
+      <CopyJobCommandBar explorer={explorer} />
-      <MonitorCopyJobs ref={monitorCopyJobsRef} />
+      <MonitorCopyJobs ref={monitorCopyJobsRef} explorer={explorer} />
     </div>
   );
 };

src/Explorer/ContainerCopy/Context/CopyJobContext.tsx

@@ -1,3 +1,4 @@
+import Explorer from "Explorer/Explorer";
 import { Subscription } from "Contracts/DataModels";
 import React from "react";
 import { userContext } from "UserContext";
@@ -15,6 +16,7 @@ export const useCopyJobContext = (): CopyJobContextProviderType => {
 
 interface CopyJobContextProviderProps {
   children: React.ReactNode;
+  explorer: Explorer;
 }
 
 const getInitialCopyJobState = (): CopyJobContextState => {
@@ -56,6 +58,7 @@ const CopyJobContextProvider: React.FC<CopyJobContextProviderProps> = (props) =>
     flow,
     setFlow,
     resetCopyJobState,
+    explorer: props.explorer,
   };
 
   return <CopyJobContext.Provider value={contextValue}>{props.children}</CopyJobContext.Provider>;

src/Explorer/ContainerCopy/CreateCopyJob/Screens/CreateContainer/AddCollectionPanelWrapper.tsx

@@ -0,0 +1,53 @@
+import { Stack, Text } from "@fluentui/react";
+import Explorer from "Explorer/Explorer";
+import { useSidePanel } from "hooks/useSidePanel";
+import { produce } from "immer";
+import React, { useCallback, useEffect } from "react";
+import { AddCollectionPanel } from "../../../../Panes/AddCollectionPanel/AddCollectionPanel";
+import ContainerCopyMessages from "../../../ContainerCopyMessages";
+import { useCopyJobContext } from "../../../Context/CopyJobContext";
+
+type AddCollectionPanelWrapperProps = {
+  explorer?: Explorer;
+  goBack?: () => void;
+};
+
+const AddCollectionPanelWrapper: React.FunctionComponent<AddCollectionPanelWrapperProps> = ({ explorer, goBack }) => {
+  const { setCopyJobState } = useCopyJobContext();
+
+  useEffect(() => {
+    const sidePanelStore = useSidePanel.getState();
+    if (sidePanelStore.headerText !== ContainerCopyMessages.createContainerHeading) {
+      sidePanelStore.setHeaderText(ContainerCopyMessages.createContainerHeading);
+    }
+    return () => {
+      sidePanelStore.setHeaderText(ContainerCopyMessages.createCopyJobPanelTitle);
+    };
+  }, []);
+
+  const handleAddCollectionSuccess = useCallback(
+    (collectionData: { databaseId: string; collectionId: string }) => {
+      setCopyJobState(
+        produce((state) => {
+          state.target.databaseId = collectionData.databaseId;
+          state.target.containerId = collectionData.collectionId;
+        }),
+      );
+      goBack?.();
+    },
+    [goBack],
+  );
+
+  return (
+    <Stack className="addCollectionPanelWrapper">
+      <Stack.Item className="addCollectionPanelHeader">
+        <Text>{ContainerCopyMessages.createNewContainerSubHeading}</Text>
+      </Stack.Item>
+      <Stack.Item className="addCollectionPanelBody">
+        <AddCollectionPanel explorer={explorer} isCopyJobFlow={true} onSubmitSuccess={handleAddCollectionSuccess} />
+      </Stack.Item>
+    </Stack>
+  );
+};
+
+export default AddCollectionPanelWrapper;

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

@@ -13,6 +13,7 @@ const CreateCopyJobScreens: React.FC = () => {
     handlePrevious,
     handleCancel,
     primaryBtnText,
+    showAddCollectionPanel,
   } = useCopyJobNavigation();
   const { contextError, setContextError } = useCopyJobContext();
 
@@ -32,7 +33,7 @@ const CreateCopyJobScreens: React.FC = () => {
             {contextError}
           </MessageBar>
         )}
-        {currentScreen?.component}
+        {React.cloneElement(currentScreen?.component as React.ReactElement, { showAddCollectionPanel })}
       </Stack.Item>
       <Stack.Item className="createCopyJobScreensFooter">
         <NavigationControls

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

@@ -1,10 +1,11 @@
+import Explorer from "Explorer/Explorer";
 import React from "react";
 import CopyJobContextProvider from "../../Context/CopyJobContext";
 import CreateCopyJobScreens from "./CreateCopyJobScreens";
 
-const CreateCopyJobScreensProvider = () => {
+const CreateCopyJobScreensProvider = ({ explorer }: { explorer: Explorer }) => {
   return (
-    <CopyJobContextProvider>
+    <CopyJobContextProvider explorer={explorer}>
       <CreateCopyJobScreens />
     </CopyJobContextProvider>
   );

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

@@ -9,7 +9,11 @@ import { DatabaseContainerSection } from "./components/DatabaseContainerSection"
 import { dropDownChangeHandler } from "./Events/DropDownChangeHandler";
 import { useMemoizedSourceAndTargetData } from "./memoizedData";
 
-const SelectSourceAndTargetContainers = () => {
+type SelectSourceAndTargetContainers = {
+  showAddCollectionPanel?: () => void;
+};
+
+const SelectSourceAndTargetContainers = ({ showAddCollectionPanel }: SelectSourceAndTargetContainers) => {
   const { copyJobState, setCopyJobState } = useCopyJobContext();
   const { source, target, sourceDbParams, sourceContainerParams, targetDbParams, targetContainerParams } =
     useMemoizedSourceAndTargetData(copyJobState);
@@ -62,6 +66,7 @@ const SelectSourceAndTargetContainers = () => {
         selectedContainer={target?.containerId}
         containerDisabled={!target?.databaseId}
         containerOnChange={onDropdownChange("targetContainer")}
+        handleOnDemandCreateContainer={showAddCollectionPanel}
       />
     </Stack>
   );

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectSourceAndTargetContainers/components/DatabaseContainerSection.tsx

@@ -1,4 +1,4 @@
-import { Dropdown, Stack } from "@fluentui/react";
+import { ActionButton, Dropdown, Stack } from "@fluentui/react";
 import React from "react";
 import ContainerCopyMessages from "../../../../ContainerCopyMessages";
 import { DatabaseContainerSectionProps } from "../../../../Types/CopyJobTypes";
@@ -14,6 +14,7 @@ export const DatabaseContainerSection = ({
   selectedContainer,
   containerDisabled,
   containerOnChange,
+  handleOnDemandCreateContainer,
 }: DatabaseContainerSectionProps) => (
   <Stack tokens={{ childrenGap: 15 }} className="databaseContainerSection">
     <label className="subHeading">{heading}</label>
@@ -29,15 +30,22 @@ export const DatabaseContainerSection = ({
       />
     </FieldRow>
     <FieldRow label={ContainerCopyMessages.containerDropdownLabel}>
-      <Dropdown
+      <Stack>
-        placeholder={ContainerCopyMessages.containerDropdownPlaceholder}
+        <Dropdown
-        ariaLabel={ContainerCopyMessages.containerDropdownLabel}
+          placeholder={ContainerCopyMessages.containerDropdownPlaceholder}
-        options={containerOptions}
+          ariaLabel={ContainerCopyMessages.containerDropdownLabel}
-        required
+          options={containerOptions}
-        disabled={!!containerDisabled}
+          required
-        selectedKey={selectedContainer}
+          disabled={!!containerDisabled}
-        onChange={containerOnChange}
+          selectedKey={selectedContainer}
-      />
+          onChange={containerOnChange}
+        />
+        {handleOnDemandCreateContainer && (
+          <ActionButton className="create-container-link-btn" onClick={() => handleOnDemandCreateContainer()}>
+            {ContainerCopyMessages.createContainerButtonLabel}
+          </ActionButton>
+        )}
+      </Stack>
     </FieldRow>
   </Stack>
 );

src/Explorer/ContainerCopy/CreateCopyJob/Utils/useCopyJobNavigation.ts

@@ -35,10 +35,14 @@ function navigationReducer(state: NavigationState, action: Action): NavigationSt
 export function useCopyJobNavigation() {
   const [isLoading, setIsLoading] = useState(false);
   const { copyJobState, resetCopyJobState, setContextError } = useCopyJobContext();
-  const screens = useCreateCopyJobScreensList();
   const { validationCache: cache } = useCopyJobPrerequisitesCache();
   const [state, dispatch] = useReducer(navigationReducer, { screenHistory: [SCREEN_KEYS.SelectAccount] });
 
+  const handlePrevious = useCallback(() => {
+    dispatch({ type: "PREVIOUS" });
+  }, [dispatch]);
+
+  const screens = useCreateCopyJobScreensList(handlePrevious);
   const currentScreenKey = state.screenHistory[state.screenHistory.length - 1];
   const currentScreen = screens.find((screen) => screen.key === currentScreenKey);
 
@@ -51,7 +55,9 @@ export function useCopyJobNavigation() {
   }, [currentScreen.key, copyJobState, cache, isLoading]);
 
   const primaryBtnText = useMemo(() => {
-    if (currentScreenKey === SCREEN_KEYS.PreviewCopyJob) {
+    if (currentScreenKey === SCREEN_KEYS.CreateCollection) {
+      return "Create";
+    } else if (currentScreenKey === SCREEN_KEYS.PreviewCopyJob) {
       return "Copy";
     }
     return "Next";
@@ -107,7 +113,26 @@ export function useCopyJobNavigation() {
     }
   };
 
+  const handleAddCollectionPanelSubmit = () => {
+    const form = document.getElementById("panelContainer") as HTMLFormElement;
+    if (form) {
+      const submitEvent = new Event("submit", {
+        bubbles: true,
+        cancelable: true,
+      });
+      form.dispatchEvent(submitEvent);
+    }
+  };
+
+  const showAddCollectionPanel = useCallback(() => {
+    dispatch({ type: "NEXT", nextScreen: SCREEN_KEYS.CreateCollection });
+  }, [dispatch]);
+
   const handlePrimary = useCallback(() => {
+    if (currentScreenKey === SCREEN_KEYS.CreateCollection) {
+      handleAddCollectionPanelSubmit();
+      return;
+    }
     if (currentScreenKey === SCREEN_KEYS.SelectSourceAndTargetContainers && areContainersIdentical()) {
       setContextError(
         "Source and destination containers cannot be the same. Please select different containers to proceed.",
@@ -132,10 +157,6 @@ export function useCopyJobNavigation() {
     }
   }, [currentScreenKey, copyJobState, areContainersIdentical, handleCopyJobSubmission]);
 
-  const handlePrevious = useCallback(() => {
-    dispatch({ type: "PREVIOUS" });
-  }, []);
-
   return {
     currentScreen,
     isPrimaryDisabled,
@@ -143,6 +164,7 @@ export function useCopyJobNavigation() {
     handlePrimary,
     handlePrevious,
     handleCancel,
+    showAddCollectionPanel,
     primaryBtnText,
   };
 }

src/Explorer/ContainerCopy/CreateCopyJob/Utils/useCreateCopyJobScreensList.tsx

@@ -1,11 +1,14 @@
 import React from "react";
+import { useCopyJobContext } from "../../Context/CopyJobContext";
 import { CopyJobContextState } from "../../Types/CopyJobTypes";
 import AssignPermissions from "../Screens/AssignPermissions/AssignPermissions";
+import AddCollectionPanelWrapper from "../Screens/CreateContainer/AddCollectionPanelWrapper";
 import PreviewCopyJob from "../Screens/PreviewCopyJob/PreviewCopyJob";
 import SelectAccount from "../Screens/SelectAccount/SelectAccount";
 import SelectSourceAndTargetContainers from "../Screens/SelectSourceAndTargetContainers/SelectSourceAndTargetContainers";
 
 const SCREEN_KEYS = {
+  CreateCollection: "CreateCollection",
   SelectAccount: "SelectAccount",
   SelectSourceAndTargetContainers: "SelectSourceAndTargetContainers",
   PreviewCopyJob: "PreviewCopyJob",
@@ -23,7 +26,9 @@ type Screen = {
   validations: Validation[];
 };
 
-function useCreateCopyJobScreensList() {
+function useCreateCopyJobScreensList(goBack: () => void): Screen[] {
+  const { explorer } = useCopyJobContext();
+
   return React.useMemo<Screen[]>(
     () => [
       {
@@ -50,6 +55,11 @@ function useCreateCopyJobScreensList() {
           },
         ],
       },
+      {
+        key: SCREEN_KEYS.CreateCollection,
+        component: <AddCollectionPanelWrapper explorer={explorer} goBack={goBack} />,
+        validations: [],
+      },
       {
         key: SCREEN_KEYS.PreviewCopyJob,
         component: <PreviewCopyJob />,
@@ -80,7 +90,7 @@ function useCreateCopyJobScreensList() {
         ],
       },
     ],
-    [],
+    [explorer],
   );
 }
 

src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobs.NotFound.tsx

@@ -1,18 +1,24 @@
 import { ActionButton, Image } from "@fluentui/react";
-import React, { useCallback } from "react";
+import Explorer from "Explorer/Explorer";
+import React from "react";
 import CopyJobIcon from "../../../../../images/ContainerCopy/copy-jobs.svg";
 import * as Actions from "../../Actions/CopyJobActions";
 import ContainerCopyMessages from "../../ContainerCopyMessages";
 
-interface CopyJobsNotFoundProps {}
+interface CopyJobsNotFoundProps {
+  explorer: Explorer;
+}
 
-const CopyJobsNotFound: React.FC<CopyJobsNotFoundProps> = () => {
+const CopyJobsNotFound: React.FC<CopyJobsNotFoundProps> = ({ explorer }) => {
-  const handleCreateCopyJob = useCallback(Actions.openCreateCopyJobPanel, []);
   return (
     <div className="notFoundContainer flexContainer centerContent">
       <Image src={CopyJobIcon} alt={ContainerCopyMessages.noCopyJobsTitle} width={100} height={100} />
       <h4 className="noCopyJobsMessage">{ContainerCopyMessages.noCopyJobsTitle}</h4>
-      <ActionButton allowDisabledFocus className="createCopyJobButton" onClick={handleCreateCopyJob}>
+      <ActionButton
+        allowDisabledFocus
+        className="createCopyJobButton"
+        onClick={Actions.openCreateCopyJobPanel.bind(null, explorer)}
+      >
         {ContainerCopyMessages.createCopyJobButtonText}
       </ActionButton>
     </div>

src/Explorer/ContainerCopy/MonitorCopyJobs/MonitorCopyJobs.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/display-name */
 import { MessageBar, MessageBarType, Stack } from "@fluentui/react";
 import ShimmerTree, { IndentLevel } from "Common/ShimmerTree/ShimmerTree";
+import Explorer from "Explorer/Explorer";
 import React, { forwardRef, useEffect, useImperativeHandle } from "react";
 import { getCopyJobs, updateCopyJobStatus } from "../Actions/CopyJobActions";
 import { convertToCamelCase } from "../CopyJobUtils";
@@ -11,13 +12,15 @@ import CopyJobsList from "./Components/CopyJobsList";
 
 const FETCH_INTERVAL_MS = 30 * 1000;
 
-interface MonitorCopyJobsProps {}
+interface MonitorCopyJobsProps {
+  explorer: Explorer;
+}
 
 export interface MonitorCopyJobsRef {
   refreshJobList: () => void;
 }
 
-const MonitorCopyJobs = forwardRef<MonitorCopyJobsRef, MonitorCopyJobsProps>((_props, ref) => {
+const MonitorCopyJobs = forwardRef<MonitorCopyJobsRef, MonitorCopyJobsProps>(({ explorer }, ref) => {
   const [loading, setLoading] = React.useState(true);
   const [error, setError] = React.useState<string | null>(null);
   const [jobs, setJobs] = React.useState<CopyJobType[]>([]);
@@ -96,15 +99,15 @@ const MonitorCopyJobs = forwardRef<MonitorCopyJobsRef, MonitorCopyJobsProps>((_p
     [],
   );
 
-  const memoizedJobsList = React.useMemo(() => {
+  const renderJobsList = () => {
     if (loading) {
       return null;
     }
     if (jobs.length > 0) {
       return <CopyJobsList jobs={jobs} handleActionClick={handleActionClick} />;
     }
-    return <CopyJobsNotFound />;
+    return <CopyJobsNotFound explorer={explorer} />;
-  }, [jobs, loading, handleActionClick]);
+  };
 
   return (
     <Stack className="monitorCopyJobs flexContainer">
@@ -114,7 +117,7 @@ const MonitorCopyJobs = forwardRef<MonitorCopyJobsRef, MonitorCopyJobsProps>((_p
           {error}
         </MessageBar>
       )}
-      {memoizedJobsList}
+      {renderJobsList()}
     </Stack>
   );
 });

src/Explorer/ContainerCopy/Types/CopyJobTypes.ts

@@ -6,7 +6,7 @@ import Explorer from "../../Explorer";
 import { CopyJobMigrationType, CopyJobStatusType } from "../Enums/CopyJobEnums";
 
 export interface ContainerCopyProps {
-  container: Explorer;
+  explorer: Explorer;
 }
 
 export type CopyJobCommandBarBtnType = {
@@ -48,6 +48,7 @@ export interface DatabaseContainerSectionProps {
   selectedContainer: string;
   containerDisabled?: boolean;
   containerOnChange: (ev: React.FormEvent<HTMLDivElement>, option: DropdownOptionType) => void;
+  handleOnDemandCreateContainer?: () => void;
 }
 
 export interface CopyJobContextState {
@@ -80,6 +81,7 @@ export interface CopyJobContextProviderType {
   copyJobState: CopyJobContextState | null;
   setCopyJobState: React.Dispatch<React.SetStateAction<CopyJobContextState>>;
   resetCopyJobState: () => void;
+  explorer?: Explorer;
 }
 
 export type CopyJobType = {

src/Explorer/ContainerCopy/containerCopyStyles.less

@@ -75,6 +75,20 @@
   .createCopyJobErrorMessageBar {
     margin-bottom: 2em;
   }
+  .create-container-link-btn {
+    padding: 0;
+    height: 25px;
+    color: @LinkColor;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  /* Create collection panel */
+  .panelFormWrapper .panelMainContent {
+    padding: 0;
+  }
 }
 
 .monitorCopyJobs {

src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx

@@ -65,6 +65,8 @@ export interface AddCollectionPanelProps {
   explorer: Explorer;
   databaseId?: string;
   isQuickstart?: boolean;
+  isCopyJobFlow?: boolean;
+  onSubmitSuccess?: (collectionData: { databaseId: string; collectionId: string }) => void;
 }
 
 export const DefaultVectorEmbeddingPolicy: DataModels.VectorEmbeddingPolicy = {
@@ -975,7 +977,9 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
           )}
         </div>
 
-        <PanelFooterComponent buttonLabel="OK" isButtonDisabled={this.state.isThroughputCapExceeded} />
+        {!this.props.isCopyJobFlow && (
+          <PanelFooterComponent buttonLabel="OK" isButtonDisabled={this.state.isThroughputCapExceeded} />
+        )}
 
         {this.state.isExecuting && (
           <div>
@@ -1415,8 +1419,13 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
         }
       }
       this.setState({ isExecuting: false });
-      TelemetryProcessor.traceSuccess(Action.CreateCollection, telemetryData, startKey);
+
-      useSidePanel.getState().closeSidePanel();
+      if (this.props.isCopyJobFlow && this.props.onSubmitSuccess) {
+        this.props.onSubmitSuccess({ databaseId, collectionId });
+      } else {
+        TelemetryProcessor.traceSuccess(Action.CreateCollection, telemetryData, startKey);
+        useSidePanel.getState().closeSidePanel();
+      }
     } catch (error) {
       const errorMessage: string = getErrorMessage(error);
       this.setState({ isExecuting: false, errorMessage, showErrorDetails: true });

src/Main.tsx

@@ -87,7 +87,7 @@ const App: React.FunctionComponent = () => {
     <KeyboardShortcutRoot>
       <div className="flexContainer" aria-hidden="false" data-test="DataExplorerRoot">
         {userContext.features.enableContainerCopy && userContext.apiType === "SQL" ? (
-          <ContainerCopyPanel container={explorer} />
+          <ContainerCopyPanel explorer={explorer} />
         ) : (
           <DivExplorer explorer={explorer} />
         )}

src/hooks/useSidePanel.ts

@@ -6,6 +6,7 @@ export interface SidePanelState {
   hasConsole: boolean;
   panelContent?: JSX.Element;
   headerText?: string;
+  setHeaderText: (headerText: string) => void;
   openSidePanel: (headerText: string, panelContent: JSX.Element, panelWidth?: string, onClose?: () => void) => void;
   closeSidePanel: () => void;
   setPanelHasConsole: (hasConsole: boolean) => void;
@@ -15,6 +16,7 @@ export const useSidePanel: UseStore<SidePanelState> = create((set) => ({
   isOpen: false,
   panelWidth: "440px",
   hasConsole: true,
+  setHeaderText: (headerText: string) => set((state) => ({ ...state, headerText })),
   setPanelHasConsole: (hasConsole: boolean) => set((state) => ({ ...state, hasConsole })),
   openSidePanel: (headerText, panelContent, panelWidth = "440px") =>
     set((state) => ({ ...state, headerText, panelContent, panelWidth, isOpen: true })),