Migrate Copy Notebook Pane to React (#640)

Co-authored-by: Steve Faulkner <southpolesteve@gmail.com>

src/Explorer/Controls/Dialog.tsx

@@ -1,8 +1,3 @@
-import * as React from "react";
-import { Dialog as FluentDialog, DialogType, DialogFooter, IDialogProps } from "office-ui-fabric-react/lib/Dialog";
-import { IButtonProps, PrimaryButton, DefaultButton } from "office-ui-fabric-react/lib/Button";
-import { ITextFieldProps, TextField } from "office-ui-fabric-react/lib/TextField";
-import { Link } from "office-ui-fabric-react/lib/Link";
 import {
   ChoiceGroup,
   FontIcon,
@@ -10,6 +5,11 @@ import {
   IProgressIndicatorProps,
   ProgressIndicator,
 } from "office-ui-fabric-react";
+import { DefaultButton, IButtonProps, PrimaryButton } from "office-ui-fabric-react/lib/Button";
+import { Dialog as FluentDialog, DialogFooter, DialogType, IDialogProps } from "office-ui-fabric-react/lib/Dialog";
+import { Link } from "office-ui-fabric-react/lib/Link";
+import { ITextFieldProps, TextField } from "office-ui-fabric-react/lib/TextField";
+import React, { FunctionComponent } from "react";
 
 export interface TextFieldProps extends ITextFieldProps {
   label: string;
@@ -50,61 +50,69 @@ const DIALOG_TITLE_FONT_SIZE = "17px";
 const DIALOG_TITLE_FONT_WEIGHT = 400;
 const DIALOG_SUBTEXT_FONT_SIZE = "15px";
 
-export class Dialog extends React.Component<DialogProps> {
+export const Dialog: FunctionComponent<DialogProps> = ({
-  constructor(props: DialogProps) {
+  title,
-    super(props);
+  subText,
-  }
+  isModal,
-
+  visible,
-  public render(): JSX.Element {
+  choiceGroupProps,
-    const dialogProps: IDialogProps = {
+  textFieldProps,
-      hidden: !this.props.visible,
+  linkProps,
-      dialogContentProps: {
+  progressIndicatorProps,
-        type: this.props.type || DialogType.normal,
+  primaryButtonText,
-        title: this.props.title,
+  secondaryButtonText,
-        subText: this.props.subText,
+  onPrimaryButtonClick,
-        styles: {
+  onSecondaryButtonClick,
-          title: { fontSize: DIALOG_TITLE_FONT_SIZE, fontWeight: DIALOG_TITLE_FONT_WEIGHT },
+  primaryButtonDisabled,
-          subText: { fontSize: DIALOG_SUBTEXT_FONT_SIZE },
+  type,
-        },
+  showCloseButton,
-        showCloseButton: this.props.showCloseButton || false,
+  onDismiss,
-        onDismiss: this.props.onDismiss,
+}: DialogProps) => {
+  const dialogProps: IDialogProps = {
+    hidden: !visible,
+    dialogContentProps: {
+      type: type || DialogType.normal,
+      title,
+      subText,
+      styles: {
+        title: { fontSize: DIALOG_TITLE_FONT_SIZE, fontWeight: DIALOG_TITLE_FONT_WEIGHT },
+        subText: { fontSize: DIALOG_SUBTEXT_FONT_SIZE },
       },
-      modalProps: { isBlocking: this.props.isModal, isDarkOverlay: false },
+      showCloseButton: showCloseButton || false,
-      minWidth: DIALOG_MIN_WIDTH,
+      onDismiss,
-      maxWidth: DIALOG_MAX_WIDTH,
+    },
-    };
+    modalProps: { isBlocking: isModal, isDarkOverlay: false },
-    const choiceGroupProps: IChoiceGroupProps = this.props.choiceGroupProps;
+    minWidth: DIALOG_MIN_WIDTH,
-    const textFieldProps: ITextFieldProps = this.props.textFieldProps;
+    maxWidth: DIALOG_MAX_WIDTH,
-    const linkProps: LinkProps = this.props.linkProps;
+  };
-    const progressIndicatorProps: IProgressIndicatorProps = this.props.progressIndicatorProps;
-    const primaryButtonProps: IButtonProps = {
-      text: this.props.primaryButtonText,
-      disabled: this.props.primaryButtonDisabled || false,
-      onClick: this.props.onPrimaryButtonClick,
-    };
-    const secondaryButtonProps: IButtonProps =
-      this.props.secondaryButtonText && this.props.onSecondaryButtonClick
-        ? {
-            text: this.props.secondaryButtonText,
-            onClick: this.props.onSecondaryButtonClick,
-          }
-        : undefined;
 
-    return (
+  const primaryButtonProps: IButtonProps = {
-      <FluentDialog {...dialogProps}>
+    text: primaryButtonText,
-        {choiceGroupProps && <ChoiceGroup {...choiceGroupProps} />}
+    disabled: primaryButtonDisabled || false,
-        {textFieldProps && <TextField {...textFieldProps} />}
+    onClick: onPrimaryButtonClick,
-        {linkProps && (
+  };
-          <Link href={linkProps.linkUrl} target="_blank">
+  const secondaryButtonProps: IButtonProps =
-            {linkProps.linkText} <FontIcon iconName="NavigateExternalInline" />
+    secondaryButtonText && onSecondaryButtonClick
-          </Link>
+      ? {
-        )}
+          text: secondaryButtonText,
-        {progressIndicatorProps && <ProgressIndicator {...progressIndicatorProps} />}
+          onClick: onSecondaryButtonClick,
-        <DialogFooter>
+        }
-          <PrimaryButton {...primaryButtonProps} />
+      : undefined;
-          {secondaryButtonProps && <DefaultButton {...secondaryButtonProps} />}
+
-        </DialogFooter>
+  return (
-      </FluentDialog>
+    <FluentDialog {...dialogProps}>
-    );
+      {choiceGroupProps && <ChoiceGroup {...choiceGroupProps} />}
-  }
+      {textFieldProps && <TextField {...textFieldProps} />}
-}
+      {linkProps && (
+        <Link href={linkProps.linkUrl} target="_blank">
+          {linkProps.linkText} <FontIcon iconName="NavigateExternalInline" />
+        </Link>
+      )}
+      {progressIndicatorProps && <ProgressIndicator {...progressIndicatorProps} />}
+      <DialogFooter>
+        <PrimaryButton {...primaryButtonProps} />
+        {secondaryButtonProps && <DefaultButton {...secondaryButtonProps} />}
+      </DialogFooter>
+    </FluentDialog>
+  );
+};

src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap

@@ -552,7 +552,6 @@ exports[`SettingsComponent renders 1`] = `
                 "hasStorageAnalyticsAfecFeature": [Function],
                 "isAccountReady": [Function],
                 "isAutoscaleDefaultEnabled": [Function],
-                "isCopyNotebookPaneEnabled": [Function],
                 "isEnableMongoCapabilityPresent": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
                 "isGitHubPaneEnabled": [Function],
@@ -1214,7 +1213,6 @@ exports[`SettingsComponent renders 1`] = `
               "hasStorageAnalyticsAfecFeature": [Function],
               "isAccountReady": [Function],
               "isAutoscaleDefaultEnabled": [Function],
-              "isCopyNotebookPaneEnabled": [Function],
               "isEnableMongoCapabilityPresent": [Function],
               "isFixedCollectionWithSharedThroughputSupported": [Function],
               "isGitHubPaneEnabled": [Function],
@@ -1889,7 +1887,6 @@ exports[`SettingsComponent renders 1`] = `
                 "hasStorageAnalyticsAfecFeature": [Function],
                 "isAccountReady": [Function],
                 "isAutoscaleDefaultEnabled": [Function],
-                "isCopyNotebookPaneEnabled": [Function],
                 "isEnableMongoCapabilityPresent": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
                 "isGitHubPaneEnabled": [Function],
@@ -2551,7 +2548,6 @@ exports[`SettingsComponent renders 1`] = `
               "hasStorageAnalyticsAfecFeature": [Function],
               "isAccountReady": [Function],
               "isAutoscaleDefaultEnabled": [Function],
-              "isCopyNotebookPaneEnabled": [Function],
               "isEnableMongoCapabilityPresent": [Function],
               "isFixedCollectionWithSharedThroughputSupported": [Function],
               "isGitHubPaneEnabled": [Function],

src/Explorer/Explorer.tsx

@@ -186,12 +186,10 @@ export default class Explorer {
   public stringInputPane: StringInputPane;
   public gitHubReposPane: ContextualPaneBase;
   public publishNotebookPaneAdapter: ReactAdapter;
-  public copyNotebookPaneAdapter: ReactAdapter;
 
   // features
   public isGitHubPaneEnabled: ko.Observable<boolean>;
   public isPublishNotebookPaneEnabled: ko.Observable<boolean>;
-  public isCopyNotebookPaneEnabled: ko.Observable<boolean>;
   public isHostedDataExplorerEnabled: ko.Computed<boolean>;
   public isRightPanelV2Enabled: ko.Computed<boolean>;
   public isMongoIndexingEnabled: ko.Observable<boolean>;
@@ -341,7 +339,6 @@ export default class Explorer {
     this.isGitHubPaneEnabled = ko.observable<boolean>(false);
     this.isMongoIndexingEnabled = ko.observable<boolean>(false);
     this.isPublishNotebookPaneEnabled = ko.observable<boolean>(false);
-    this.isCopyNotebookPaneEnabled = ko.observable<boolean>(false);
 
     this.canExceedMaximumValue = ko.computed<boolean>(() => userContext.features.canExceedMaximumValue);
 
@@ -1457,11 +1454,7 @@ export default class Explorer {
   }
 
   public copyNotebook(name: string, content: string): void {
-    if (this.notebookManager) {
+    this.notebookManager?.openCopyNotebookPane(name, content);
-      this.notebookManager.openCopyNotebookPane(name, content);
-      this.copyNotebookPaneAdapter = this.notebookManager.copyNotebookPaneAdapter;
-      this.isCopyNotebookPaneEnabled(true);
-    }
   }
 
   public showOkModalDialog(title: string, msg: string): void {

src/Explorer/Notebook/NotebookManager.tsx

@@ -2,30 +2,31 @@
  * Contains all notebook related stuff meant to be dynamically loaded by explorer
  */
 
-import { JunoClient } from "../../Juno/JunoClient";
-import { GitHubOAuthService } from "../../GitHub/GitHubOAuthService";
-import { GitHubClient } from "../../GitHub/GitHubClient";
-import * as Logger from "../../Common/Logger";
-import { HttpStatusCodes, Areas } from "../../Common/Constants";
-import { GitHubReposPane } from "../Panes/GitHubReposPane";
-import ko from "knockout";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import { IContentProvider } from "@nteract/core";
-import { NotebookContentProvider } from "./NotebookComponent/NotebookContentProvider";
-import { GitHubContentProvider } from "../../GitHub/GitHubContentProvider";
-import { contents } from "rx-jupyter";
-import { NotebookContainerClient } from "./NotebookContainerClient";
-import { MemoryUsageInfo } from "../../Contracts/DataModels";
-import { NotebookContentClient } from "./NotebookContentClient";
-import { ResourceTreeAdapter } from "../Tree/ResourceTreeAdapter";
-import { PublishNotebookPaneAdapter } from "../Panes/PublishNotebookPaneAdapter";
-import { getFullName } from "../../Utils/UserUtils";
 import { ImmutableNotebook } from "@nteract/commutable";
+import { IContentProvider } from "@nteract/core";
+import ko from "knockout";
+import React from "react";
+import { contents } from "rx-jupyter";
+import { Areas, HttpStatusCodes } from "../../Common/Constants";
+import { getErrorMessage } from "../../Common/ErrorHandlingUtils";
+import * as Logger from "../../Common/Logger";
+import { MemoryUsageInfo } from "../../Contracts/DataModels";
+import { GitHubClient } from "../../GitHub/GitHubClient";
+import { GitHubContentProvider } from "../../GitHub/GitHubContentProvider";
+import { GitHubOAuthService } from "../../GitHub/GitHubOAuthService";
+import { JunoClient } from "../../Juno/JunoClient";
+import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { getFullName } from "../../Utils/UserUtils";
 import Explorer from "../Explorer";
 import { ContextualPaneBase } from "../Panes/ContextualPaneBase";
-import { CopyNotebookPaneAdapter } from "../Panes/CopyNotebookPane";
+import { CopyNotebookPane } from "../Panes/CopyNotebookPane/CopyNotebookPane";
-import { getErrorMessage } from "../../Common/ErrorHandlingUtils";
+import { GitHubReposPane } from "../Panes/GitHubReposPane";
+import { PublishNotebookPaneAdapter } from "../Panes/PublishNotebookPaneAdapter";
+import { ResourceTreeAdapter } from "../Tree/ResourceTreeAdapter";
+import { NotebookContentProvider } from "./NotebookComponent/NotebookContentProvider";
+import { NotebookContainerClient } from "./NotebookContainerClient";
+import { NotebookContentClient } from "./NotebookContentClient";
 
 export interface NotebookManagerOptions {
   container: Explorer;
@@ -49,7 +50,6 @@ export default class NotebookManager {
 
   public gitHubReposPane: ContextualPaneBase;
   public publishNotebookPaneAdapter: PublishNotebookPaneAdapter;
-  public copyNotebookPaneAdapter: CopyNotebookPaneAdapter;
 
   public initialize(params: NotebookManagerOptions): void {
     this.params = params;
@@ -89,12 +89,6 @@ export default class NotebookManager {
 
     this.publishNotebookPaneAdapter = new PublishNotebookPaneAdapter(this.params.container, this.junoClient);
 
-    this.copyNotebookPaneAdapter = new CopyNotebookPaneAdapter(
-      this.params.container,
-      this.junoClient,
-      this.gitHubOAuthService
-    );
-
     this.gitHubOAuthService.getTokenObservable().subscribe((token) => {
       this.gitHubClient.setToken(token?.access_token);
 
@@ -129,7 +123,18 @@ export default class NotebookManager {
   }
 
   public openCopyNotebookPane(name: string, content: string): void {
-    this.copyNotebookPaneAdapter.open(name, content);
+    const { container } = this.params;
+    container.openSidePanel(
+      "Copy Notebook",
+      <CopyNotebookPane
+        container={container}
+        closePanel={container.closeSidePanel}
+        junoClient={this.junoClient}
+        gitHubOAuthService={this.gitHubOAuthService}
+        name={name}
+        content={content}
+      />
+    );
   }
 
   // Octokit's error handler uses any

src/Explorer/Panes/CopyNotebookPane.tsx

@@ -1,197 +0,0 @@
-import ko from "knockout";
-import { IDropdownOption } from "office-ui-fabric-react";
-import * as React from "react";
-import { ReactAdapter } from "../../Bindings/ReactBindingHandler";
-import { HttpStatusCodes } from "../../Common/Constants";
-import { getErrorMessage, handleError } from "../../Common/ErrorHandlingUtils";
-import { GitHubOAuthService } from "../../GitHub/GitHubOAuthService";
-import { IPinnedRepo, JunoClient } from "../../Juno/JunoClient";
-import * as GitHubUtils from "../../Utils/GitHubUtils";
-import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
-import Explorer from "../Explorer";
-import { NotebookContentItem, NotebookContentItemType } from "../Notebook/NotebookContentItem";
-import { ResourceTreeAdapter } from "../Tree/ResourceTreeAdapter";
-import { CopyNotebookPaneComponent, CopyNotebookPaneProps } from "./CopyNotebookPaneComponent";
-import {
-  GenericRightPaneComponent,
-  GenericRightPaneProps,
-} from "./GenericRightPaneComponent/GenericRightPaneComponent";
-
-interface Location {
-  type: "MyNotebooks" | "GitHub";
-
-  // GitHub
-  owner?: string;
-  repo?: string;
-  branch?: string;
-}
-
-export class CopyNotebookPaneAdapter implements ReactAdapter {
-  private static readonly BranchNameWhiteSpace = "   ";
-
-  parameters: ko.Observable<number>;
-  private isOpened: boolean;
-  private isExecuting: boolean;
-  private formError: string;
-  private formErrorDetail: string;
-  private name: string;
-  private content: string;
-  private pinnedRepos: IPinnedRepo[];
-  private selectedLocation: Location;
-
-  constructor(
-    private container: Explorer,
-    private junoClient: JunoClient,
-    private gitHubOAuthService: GitHubOAuthService
-  ) {
-    this.parameters = ko.observable(Date.now());
-    this.reset();
-    this.triggerRender();
-  }
-
-  public renderComponent(): JSX.Element {
-    if (!this.isOpened) {
-      return undefined;
-    }
-
-    const genericPaneProps: GenericRightPaneProps = {
-      container: this.container,
-      formError: this.formError,
-      formErrorDetail: this.formErrorDetail,
-      id: "copynotebookpane",
-      isExecuting: this.isExecuting,
-      title: "Copy notebook",
-      submitButtonText: "OK",
-      onClose: () => this.close(),
-      onSubmit: () => this.submit(),
-    };
-
-    const copyNotebookPaneProps: CopyNotebookPaneProps = {
-      name: this.name,
-      pinnedRepos: this.pinnedRepos,
-      onDropDownChange: this.onDropDownChange,
-    };
-
-    return (
-      <GenericRightPaneComponent {...genericPaneProps}>
-        <CopyNotebookPaneComponent {...copyNotebookPaneProps} />
-      </GenericRightPaneComponent>
-    );
-  }
-
-  public triggerRender(): void {
-    window.requestAnimationFrame(() => this.parameters(Date.now()));
-  }
-
-  public async open(name: string, content: string): Promise<void> {
-    this.name = name;
-    this.content = content;
-
-    this.isOpened = true;
-    this.triggerRender();
-
-    if (this.gitHubOAuthService.isLoggedIn()) {
-      const response = await this.junoClient.getPinnedRepos(this.gitHubOAuthService.getTokenObservable()()?.scope);
-      if (response.status !== HttpStatusCodes.OK && response.status !== HttpStatusCodes.NoContent) {
-        handleError(`Received HTTP ${response.status} when fetching pinned repos`, "CopyNotebookPaneAdapter/submit");
-      }
-
-      if (response.data?.length > 0) {
-        this.pinnedRepos = response.data;
-        this.triggerRender();
-      }
-    }
-  }
-
-  public close(): void {
-    this.reset();
-    this.triggerRender();
-  }
-
-  public async submit(): Promise<void> {
-    let destination: string = this.selectedLocation?.type;
-    let clearMessage: () => void;
-    this.isExecuting = true;
-    this.triggerRender();
-
-    try {
-      if (!this.selectedLocation) {
-        throw new Error(`No location selected`);
-      }
-
-      if (this.selectedLocation.type === "GitHub") {
-        destination = `${destination} - ${GitHubUtils.toRepoFullName(
-          this.selectedLocation.owner,
-          this.selectedLocation.repo
-        )} - ${this.selectedLocation.branch}`;
-      }
-
-      clearMessage = NotificationConsoleUtils.logConsoleProgress(`Copying ${this.name} to ${destination}`);
-
-      const notebookContentItem = await this.copyNotebook(this.selectedLocation);
-      if (!notebookContentItem) {
-        throw new Error(`Failed to upload ${this.name}`);
-      }
-
-      NotificationConsoleUtils.logConsoleInfo(`Successfully copied ${this.name} to ${destination}`);
-    } catch (error) {
-      const errorMessage = getErrorMessage(error);
-      this.formError = `Failed to copy ${this.name} to ${destination}`;
-      this.formErrorDetail = `${errorMessage}`;
-      handleError(errorMessage, "CopyNotebookPaneAdapter/submit", this.formError);
-      return;
-    } finally {
-      clearMessage && clearMessage();
-      this.isExecuting = false;
-      this.triggerRender();
-    }
-
-    this.close();
-  }
-
-  private copyNotebook = async (location: Location): Promise<NotebookContentItem> => {
-    let parent: NotebookContentItem;
-    switch (location.type) {
-      case "MyNotebooks":
-        parent = {
-          name: ResourceTreeAdapter.MyNotebooksTitle,
-          path: this.container.getNotebookBasePath(),
-          type: NotebookContentItemType.Directory,
-        };
-        break;
-
-      case "GitHub":
-        parent = {
-          name: ResourceTreeAdapter.GitHubReposTitle,
-          path: GitHubUtils.toContentUri(
-            this.selectedLocation.owner,
-            this.selectedLocation.repo,
-            this.selectedLocation.branch,
-            ""
-          ),
-          type: NotebookContentItemType.Directory,
-        };
-        break;
-
-      default:
-        throw new Error(`Unsupported location type ${location.type}`);
-    }
-
-    return this.container.uploadFile(this.name, this.content, parent);
-  };
-
-  private onDropDownChange = (_: React.FormEvent<HTMLDivElement>, option?: IDropdownOption): void => {
-    this.selectedLocation = option?.data;
-  };
-
-  private reset = (): void => {
-    this.isOpened = false;
-    this.isExecuting = false;
-    this.formError = undefined;
-    this.formErrorDetail = undefined;
-    this.name = undefined;
-    this.content = undefined;
-    this.pinnedRepos = undefined;
-    this.selectedLocation = undefined;
-  };
-}

src/Explorer/Panes/CopyNotebookPane/CopyNotebookPane.tsx

@@ -0,0 +1,156 @@
+import { IDropdownOption } from "office-ui-fabric-react";
+import React, { FormEvent, FunctionComponent, useEffect, useState } from "react";
+import { HttpStatusCodes } from "../../../Common/Constants";
+import { getErrorMessage, handleError } from "../../../Common/ErrorHandlingUtils";
+import { GitHubOAuthService } from "../../../GitHub/GitHubOAuthService";
+import { IPinnedRepo, JunoClient } from "../../../Juno/JunoClient";
+import * as GitHubUtils from "../../../Utils/GitHubUtils";
+import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
+import Explorer from "../../Explorer";
+import { NotebookContentItem, NotebookContentItemType } from "../../Notebook/NotebookContentItem";
+import { ResourceTreeAdapter } from "../../Tree/ResourceTreeAdapter";
+import {
+  GenericRightPaneComponent,
+  GenericRightPaneProps,
+} from "../GenericRightPaneComponent/GenericRightPaneComponent";
+import { CopyNotebookPaneComponent, CopyNotebookPaneProps } from "./CopyNotebookPaneComponent";
+
+interface Location {
+  type: "MyNotebooks" | "GitHub";
+
+  // GitHub
+  owner?: string;
+  repo?: string;
+  branch?: string;
+}
+export interface CopyNotebookPanelProps {
+  name: string;
+  content: string;
+  container: Explorer;
+  junoClient: JunoClient;
+  gitHubOAuthService: GitHubOAuthService;
+  closePanel: () => void;
+}
+
+export const CopyNotebookPane: FunctionComponent<CopyNotebookPanelProps> = ({
+  name,
+  content,
+  container,
+  junoClient,
+  gitHubOAuthService,
+  closePanel,
+}: CopyNotebookPanelProps) => {
+  const [isExecuting, setIsExecuting] = useState<boolean>();
+  const [formError, setFormError] = useState<string>("");
+  const [formErrorDetail, setFormErrorDetail] = useState<string>("");
+  const [pinnedRepos, setPinnedRepos] = useState<IPinnedRepo[]>();
+  const [selectedLocation, setSelectedLocation] = useState<Location>();
+
+  useEffect(() => {
+    open();
+  }, []);
+
+  const open = async (): Promise<void> => {
+    if (gitHubOAuthService.isLoggedIn()) {
+      const response = await junoClient.getPinnedRepos(gitHubOAuthService.getTokenObservable()()?.scope);
+      if (response.status !== HttpStatusCodes.OK && response.status !== HttpStatusCodes.NoContent) {
+        handleError(`Received HTTP ${response.status} when fetching pinned repos`, "CopyNotebookPaneAdapter/submit");
+      }
+
+      if (response.data?.length > 0) {
+        setPinnedRepos(response.data);
+      }
+    }
+  };
+
+  const submit = async (): Promise<void> => {
+    let destination: string = selectedLocation?.type;
+    let clearMessage: () => void;
+    setIsExecuting(true);
+
+    try {
+      if (!selectedLocation) {
+        throw new Error(`No location selected`);
+      }
+
+      if (selectedLocation.type === "GitHub") {
+        destination = `${destination} - ${GitHubUtils.toRepoFullName(
+          selectedLocation.owner,
+          selectedLocation.repo
+        )} - ${selectedLocation.branch}`;
+      }
+
+      clearMessage = NotificationConsoleUtils.logConsoleProgress(`Copying ${name} to ${destination}`);
+
+      const notebookContentItem = await copyNotebook(selectedLocation);
+      if (!notebookContentItem) {
+        throw new Error(`Failed to upload ${name}`);
+      }
+
+      NotificationConsoleUtils.logConsoleInfo(`Successfully copied ${name} to ${destination}`);
+      closePanel();
+    } catch (error) {
+      const errorMessage = getErrorMessage(error);
+      setFormError(`Failed to copy ${name} to ${destination}`);
+      setFormErrorDetail(`${errorMessage}`);
+      handleError(errorMessage, "CopyNotebookPaneAdapter/submit", formError);
+    } finally {
+      clearMessage && clearMessage();
+      setIsExecuting(false);
+    }
+  };
+
+  const copyNotebook = async (location: Location): Promise<NotebookContentItem> => {
+    let parent: NotebookContentItem;
+    switch (location.type) {
+      case "MyNotebooks":
+        parent = {
+          name: ResourceTreeAdapter.MyNotebooksTitle,
+          path: container.getNotebookBasePath(),
+          type: NotebookContentItemType.Directory,
+        };
+        break;
+
+      case "GitHub":
+        parent = {
+          name: ResourceTreeAdapter.GitHubReposTitle,
+          path: GitHubUtils.toContentUri(selectedLocation.owner, selectedLocation.repo, selectedLocation.branch, ""),
+          type: NotebookContentItemType.Directory,
+        };
+        break;
+
+      default:
+        throw new Error(`Unsupported location type ${location.type}`);
+    }
+
+    return container.uploadFile(name, content, parent);
+  };
+
+  const onDropDownChange = (_: FormEvent<HTMLDivElement>, option?: IDropdownOption): void => {
+    setSelectedLocation(option?.data);
+  };
+
+  const genericPaneProps: GenericRightPaneProps = {
+    container,
+    formError,
+    formErrorDetail,
+    id: "copynotebookpane",
+    isExecuting: isExecuting,
+    title: "Copy notebook",
+    submitButtonText: "OK",
+    onClose: closePanel,
+    onSubmit: () => submit(),
+  };
+
+  const copyNotebookPaneProps: CopyNotebookPaneProps = {
+    name,
+    pinnedRepos,
+    onDropDownChange: onDropDownChange,
+  };
+
+  return (
+    <GenericRightPaneComponent {...genericPaneProps}>
+      <CopyNotebookPaneComponent {...copyNotebookPaneProps} />
+    </GenericRightPaneComponent>
+  );
+};

src/Explorer/Panes/CopyNotebookPane/CopyNotebookPaneComponent.tsx

@@ -1,18 +1,18 @@
-import * as GitHubUtils from "../../Utils/GitHubUtils";
-import * as React from "react";
-import { IPinnedRepo } from "../../Juno/JunoClient";
-import { ResourceTreeAdapter } from "../Tree/ResourceTreeAdapter";
 import {
-  Stack,
-  Label,
-  Text,
   Dropdown,
-  IDropdownProps,
   IDropdownOption,
-  SelectableOptionMenuItemType,
+  IDropdownProps,
   IRenderFunction,
   ISelectableOption,
+  Label,
+  SelectableOptionMenuItemType,
+  Stack,
+  Text,
 } from "office-ui-fabric-react";
+import React, { FormEvent, FunctionComponent } from "react";
+import { IPinnedRepo } from "../../../Juno/JunoClient";
+import * as GitHubUtils from "../../../Utils/GitHubUtils";
+import { ResourceTreeAdapter } from "../../Tree/ResourceTreeAdapter";
 
 interface Location {
   type: "MyNotebooks" | "GitHub";
@@ -26,46 +26,25 @@ interface Location {
 export interface CopyNotebookPaneProps {
   name: string;
   pinnedRepos: IPinnedRepo[];
-  onDropDownChange: (_: React.FormEvent<HTMLDivElement>, option?: IDropdownOption) => void;
+  onDropDownChange: (_: FormEvent<HTMLDivElement>, option?: IDropdownOption) => void;
 }
 
-export class CopyNotebookPaneComponent extends React.Component<CopyNotebookPaneProps> {
+export const CopyNotebookPaneComponent: FunctionComponent<CopyNotebookPaneProps> = ({
-  private static readonly BranchNameWhiteSpace = "   ";
+  name,
+  pinnedRepos,
+  onDropDownChange,
+}: CopyNotebookPaneProps) => {
+  const BranchNameWhiteSpace = "   ";
 
-  public render(): JSX.Element {
+  const onRenderDropDownTitle: IRenderFunction<IDropdownOption[]> = (options: IDropdownOption[]): JSX.Element => {
-    const dropDownProps: IDropdownProps = {
-      label: "Location",
-      ariaLabel: "Location",
-      placeholder: "Select an option",
-      onRenderTitle: this.onRenderDropDownTitle,
-      onRenderOption: this.onRenderDropDownOption,
-      options: this.getDropDownOptions(),
-      onChange: this.props.onDropDownChange,
-    };
-
-    return (
-      <div className="paneMainContent">
-        <Stack tokens={{ childrenGap: 10 }}>
-          <Stack.Item>
-            <Label htmlFor="notebookName">Name</Label>
-            <Text id="notebookName">{this.props.name}</Text>
-          </Stack.Item>
-
-          <Dropdown {...dropDownProps} />
-        </Stack>
-      </div>
-    );
-  }
-
-  private onRenderDropDownTitle: IRenderFunction<IDropdownOption[]> = (options: IDropdownOption[]): JSX.Element => {
     return <span>{options.length && options[0].title}</span>;
   };
 
-  private onRenderDropDownOption: IRenderFunction<ISelectableOption> = (option: ISelectableOption): JSX.Element => {
+  const onRenderDropDownOption: IRenderFunction<ISelectableOption> = (option: ISelectableOption): JSX.Element => {
     return <span style={{ whiteSpace: "pre-wrap" }}>{option.text}</span>;
   };
 
-  private getDropDownOptions = (): IDropdownOption[] => {
+  const getDropDownOptions = (): IDropdownOption[] => {
     const options: IDropdownOption[] = [];
 
     options.push({
@@ -77,7 +56,7 @@ export class CopyNotebookPaneComponent extends React.Component<CopyNotebookPaneP
       } as Location,
     });
 
-    if (this.props.pinnedRepos && this.props.pinnedRepos.length > 0) {
+    if (pinnedRepos && pinnedRepos.length > 0) {
       options.push({
         key: "GitHub-Header-Divider",
         text: undefined,
@@ -90,7 +69,7 @@ export class CopyNotebookPaneComponent extends React.Component<CopyNotebookPaneP
         itemType: SelectableOptionMenuItemType.Header,
       });
 
-      this.props.pinnedRepos.forEach((pinnedRepo) => {
+      pinnedRepos.forEach((pinnedRepo) => {
         const repoFullName = GitHubUtils.toRepoFullName(pinnedRepo.owner, pinnedRepo.name);
         options.push({
           key: `GitHub-Repo-${repoFullName}`,
@@ -101,7 +80,7 @@ export class CopyNotebookPaneComponent extends React.Component<CopyNotebookPaneP
         pinnedRepo.branches.forEach((branch) =>
           options.push({
             key: `GitHub-Repo-${repoFullName}-${branch.name}`,
-            text: `${CopyNotebookPaneComponent.BranchNameWhiteSpace}${branch.name}`,
+            text: `${BranchNameWhiteSpace}${branch.name}`,
             title: `${repoFullName} - ${branch.name}`,
             data: {
               type: "GitHub",
@@ -116,4 +95,26 @@ export class CopyNotebookPaneComponent extends React.Component<CopyNotebookPaneP
 
     return options;
   };
-}
+  const dropDownProps: IDropdownProps = {
+    label: "Location",
+    ariaLabel: "Location",
+    placeholder: "Select an option",
+    onRenderTitle: onRenderDropDownTitle,
+    onRenderOption: onRenderDropDownOption,
+    options: getDropDownOptions(),
+    onChange: onDropDownChange,
+  };
+
+  return (
+    <div className="paneMainContent">
+      <Stack tokens={{ childrenGap: 10 }}>
+        <Stack.Item>
+          <Label htmlFor="notebookName">Name</Label>
+          <Text id="notebookName">{name}</Text>
+        </Stack.Item>
+
+        <Dropdown {...dropDownProps} />
+      </Stack>
+    </div>
+  );
+};

src/Explorer/Panes/SettingsPane/__snapshots__/SettingsPane.test.tsx.snap

@@ -528,7 +528,6 @@ exports[`Settings Pane should render Default properly 1`] = `
       "hasStorageAnalyticsAfecFeature": [Function],
       "isAccountReady": [Function],
       "isAutoscaleDefaultEnabled": [Function],
-      "isCopyNotebookPaneEnabled": [Function],
       "isEnableMongoCapabilityPresent": [Function],
       "isFixedCollectionWithSharedThroughputSupported": [Function],
       "isGitHubPaneEnabled": [Function],
@@ -1313,7 +1312,6 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
       "hasStorageAnalyticsAfecFeature": [Function],
       "isAccountReady": [Function],
       "isAutoscaleDefaultEnabled": [Function],
-      "isCopyNotebookPaneEnabled": [Function],
       "isEnableMongoCapabilityPresent": [Function],
       "isFixedCollectionWithSharedThroughputSupported": [Function],
       "isGitHubPaneEnabled": [Function],

src/Explorer/Panes/UploadItemsPane/__snapshots__/UploadItemsPane.test.tsx.snap

@@ -528,7 +528,6 @@ exports[`Upload Items Pane should render Default properly 1`] = `
       "hasStorageAnalyticsAfecFeature": [Function],
       "isAccountReady": [Function],
       "isAutoscaleDefaultEnabled": [Function],
-      "isCopyNotebookPaneEnabled": [Function],
       "isEnableMongoCapabilityPresent": [Function],
       "isFixedCollectionWithSharedThroughputSupported": [Function],
       "isGitHubPaneEnabled": [Function],

src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap

@@ -529,7 +529,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
       "hasStorageAnalyticsAfecFeature": [Function],
       "isAccountReady": [Function],
       "isAutoscaleDefaultEnabled": [Function],
-      "isCopyNotebookPaneEnabled": [Function],
       "isEnableMongoCapabilityPresent": [Function],
       "isFixedCollectionWithSharedThroughputSupported": [Function],
       "isGitHubPaneEnabled": [Function],

src/Main.tsx

@@ -243,9 +243,6 @@ const App: React.FunctionComponent = () => {
       <KOCommentIfStart if="isPublishNotebookPaneEnabled" />
       <div data-bind="react: publishNotebookPaneAdapter" />
       <KOCommentEnd />
-      <KOCommentIfStart if="isCopyNotebookPaneEnabled" />
-      <div data-bind="react: copyNotebookPaneAdapter" />
-      <KOCommentEnd />
       {showDialog && <Dialog {...dialogProps} />}
     </div>
   );