Copy To functionality for notebooks (#141)

* Add Copy To functionality for notebooks

* Fix formatting

* Fix linting errors

* Fixes

* Fix build failure

* Rebase and address feedback

* Increase test coverage

src/Explorer/Panes/CopyNotebookPane.tsx

@@ -0,0 +1,283 @@
+import ko from "knockout";
+import * as React from "react";
+import { ReactAdapter } from "../../Bindings/ReactBindingHandler";
+import * as Logger from "../../Common/Logger";
+import { JunoClient, IPinnedRepo } from "../../Juno/JunoClient";
+import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
+import Explorer from "../Explorer";
+import { GenericRightPaneComponent, GenericRightPaneProps } from "./GenericRightPaneComponent";
+import {
+  Stack,
+  Label,
+  Text,
+  Dropdown,
+  IDropdownProps,
+  IDropdownOption,
+  SelectableOptionMenuItemType,
+  IRenderFunction,
+  ISelectableOption
+} from "office-ui-fabric-react";
+import { GitHubOAuthService } from "../../GitHub/GitHubOAuthService";
+import { HttpStatusCodes } from "../../Common/Constants";
+import * as GitHubUtils from "../../Utils/GitHubUtils";
+import { NotebookContentItemType, NotebookContentItem } from "../Notebook/NotebookContentItem";
+import { ResourceTreeAdapter } from "../Tree/ResourceTreeAdapter";
+
+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 props: GenericRightPaneProps = {
+      container: this.container,
+      content: this.createContent(),
+      formError: this.formError,
+      formErrorDetail: this.formErrorDetail,
+      id: "copynotebookpane",
+      isExecuting: this.isExecuting,
+      title: "Copy notebook",
+      submitButtonText: "OK",
+      onClose: () => this.close(),
+      onSubmit: () => this.submit()
+    };
+
+    return <GenericRightPaneComponent {...props} />;
+  }
+
+  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) {
+        const message = `Received HTTP ${response.status} when fetching pinned repos`;
+        Logger.logError(message, "CopyNotebookPaneAdapter/submit");
+        NotificationConsoleUtils.logConsoleError(message);
+      }
+
+      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) {
+      this.formError = `Failed to copy ${this.name} to ${destination}`;
+      this.formErrorDetail = `${error}`;
+
+      const message = `${this.formError}: ${this.formErrorDetail}`;
+      Logger.logError(message, "CopyNotebookPaneAdapter/submit");
+      NotificationConsoleUtils.logConsoleError(message);
+      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 createContent = (): JSX.Element => {
+    const dropDownProps: IDropdownProps = {
+      label: "Location",
+      ariaLabel: "Location",
+      placeholder: "Select an option",
+      onRenderTitle: this.onRenderDropDownTitle,
+      onRenderOption: this.onRenderDropDownOption,
+      options: this.getDropDownOptions(),
+      onChange: this.onDropDownChange
+    };
+
+    return (
+      <div className="paneMainContent">
+        <Stack tokens={{ childrenGap: 10 }}>
+          <Stack.Item>
+            <Label htmlFor="notebookName">Name</Label>
+            <Text id="notebookName">{this.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 => {
+    return <span style={{ whiteSpace: "pre-wrap" }}>{option.text}</span>;
+  };
+
+  private getDropDownOptions = (): IDropdownOption[] => {
+    const options: IDropdownOption[] = [];
+
+    options.push({
+      key: "MyNotebooks-Item",
+      text: ResourceTreeAdapter.MyNotebooksTitle,
+      title: ResourceTreeAdapter.MyNotebooksTitle,
+      data: {
+        type: "MyNotebooks"
+      } as Location
+    });
+
+    if (this.pinnedRepos && this.pinnedRepos.length > 0) {
+      options.push({
+        key: "GitHub-Header-Divider",
+        text: undefined,
+        itemType: SelectableOptionMenuItemType.Divider
+      });
+
+      options.push({
+        key: "GitHub-Header",
+        text: ResourceTreeAdapter.GitHubReposTitle,
+        itemType: SelectableOptionMenuItemType.Header
+      });
+
+      this.pinnedRepos.forEach(pinnedRepo => {
+        const repoFullName = GitHubUtils.toRepoFullName(pinnedRepo.owner, pinnedRepo.name);
+        options.push({
+          key: `GitHub-Repo-${repoFullName}`,
+          text: repoFullName,
+          disabled: true
+        });
+
+        pinnedRepo.branches.forEach(branch =>
+          options.push({
+            key: `GitHub-Repo-${repoFullName}-${branch.name}`,
+            text: `${CopyNotebookPaneAdapter.BranchNameWhiteSpace}${branch.name}`,
+            title: `${repoFullName} - ${branch.name}`,
+            data: {
+              type: "GitHub",
+              owner: pinnedRepo.owner,
+              repo: pinnedRepo.name,
+              branch: branch.name
+            } as Location
+          })
+        );
+      });
+    }
+
+    return options;
+  };
+
+  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/PublishNotebookPaneAdapter.tsx

@@ -175,6 +175,7 @@ export class PublishNotebookPaneAdapter implements ReactAdapter {
       notebookCreatedDate: new Date().toISOString(),
       notebookObject: this.notebookObject,
       notebookParentDomElement: this.parentDomElement,
+      onChangeName: (newValue: string) => (this.name = newValue),
       onChangeDescription: (newValue: string) => (this.description = newValue),
       onChangeTags: (newValue: string) => (this.tags = newValue),
       onChangeImageSrc: (newValue: string) => (this.imageSrc = newValue),

src/Explorer/Panes/PublishNotebookPaneComponent.test.tsx

@@ -12,6 +12,7 @@ describe("PublishNotebookPaneComponent", () => {
       notebookCreatedDate: "2020-07-17T00:00:00Z",
       notebookObject: undefined,
       notebookParentDomElement: undefined,
+      onChangeName: undefined,
       onChangeDescription: undefined,
       onChangeTags: undefined,
       onChangeImageSrc: undefined,

src/Explorer/Panes/PublishNotebookPaneComponent.tsx

@@ -15,6 +15,7 @@ export interface PublishNotebookPaneProps {
   notebookCreatedDate: string;
   notebookObject: ImmutableNotebook;
   notebookParentDomElement: HTMLElement;
+  onChangeName: (newValue: string) => void;
   onChangeDescription: (newValue: string) => void;
   onChangeTags: (newValue: string) => void;
   onChangeImageSrc: (newValue: string) => void;
@@ -24,6 +25,7 @@ export interface PublishNotebookPaneProps {
 
 interface PublishNotebookPaneState {
   type: string;
+  notebookName: string;
   notebookDescription: string;
   notebookTags: string;
   imageSrc: string;
@@ -40,6 +42,7 @@ export class PublishNotebookPaneComponent extends React.Component<PublishNoteboo
   private static readonly maxImageSizeInMib = 1.5;
   private descriptionPara1: string;
   private descriptionPara2: string;
+  private nameProps: ITextFieldProps;
   private descriptionProps: ITextFieldProps;
   private tagsProps: ITextFieldProps;
   private thumbnailUrlProps: ITextFieldProps;
@@ -52,6 +55,7 @@ export class PublishNotebookPaneComponent extends React.Component<PublishNoteboo
 
     this.state = {
       type: ImageTypes.Url,
+      notebookName: props.notebookName,
       notebookDescription: "",
       notebookTags: "",
       imageSrc: undefined
@@ -165,6 +169,17 @@ export class PublishNotebookPaneComponent extends React.Component<PublishNoteboo
       }
     };
 
+    this.nameProps = {
+      label: "Name",
+      ariaLabel: "Name",
+      defaultValue: this.props.notebookName,
+      required: true,
+      onChange: (event, newValue) => {
+        this.props.onChangeName(newValue);
+        this.setState({ notebookName: newValue });
+      }
+    };
+
     this.descriptionProps = {
       label: "Description",
       ariaLabel: "Description",
@@ -245,6 +260,10 @@ export class PublishNotebookPaneComponent extends React.Component<PublishNoteboo
             <Text>{this.descriptionPara2}</Text>
           </Stack.Item>
 
+          <Stack.Item>
+            <TextField {...this.nameProps} />
+          </Stack.Item>
+
           <Stack.Item>
             <TextField {...this.descriptionProps} />
           </Stack.Item>

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

@@ -22,6 +22,15 @@ exports[`PublishNotebookPaneComponent renders 1`] = `
         Would you like to publish and share "SampleNotebook" to the gallery?
       </Text>
     </StackItem>
+    <StackItem>
+      <StyledTextFieldBase
+        ariaLabel="Name"
+        defaultValue="SampleNotebook.ipynb"
+        label="Name"
+        onChange={[Function]}
+        required={true}
+      />
+    </StackItem>
     <StackItem>
       <StyledTextFieldBase
         ariaLabel="Description"