Fix GitHub repos panel issues (#875)

Co-authored-by: Steve Faulkner <southpolesteve@gmail.com>
Co-authored-by: Tanuj Mittal <tamitta@microsoft.com>

src/Explorer/Controls/GitHub/GitHubReposComponent.tsx

@@ -56,7 +56,7 @@ export class GitHubReposComponent extends React.Component<GitHubReposComponentPr
 
     return (
       <>
-        <div className={"paneMainContent"}>{content}</div>
+        <div>{content}</div>
         {!this.props.showAuthorizeAccess && (
           <>
             <div className={"paneFooter"} style={ContentFooterStyle}>

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

@@ -42,6 +42,15 @@ exports[`SettingsComponent renders 1`] = `
                 "resourceTree": ResourceTreeAdapter {
                   "container": [Circular],
                   "copyNotebook": [Function],
+                  "gitHubOAuthService": GitHubOAuthService {
+                    "junoClient": JunoClient {
+                      "cachedPinnedRepos": [Function],
+                    },
+                    "token": [Function],
+                  },
+                  "junoClient": JunoClient {
+                    "cachedPinnedRepos": [Function],
+                  },
                   "parameters": [Function],
                 },
                 "resourceTreeForResourceToken": ResourceTreeAdapterForResourceToken {
@@ -113,6 +122,15 @@ exports[`SettingsComponent renders 1`] = `
                 "resourceTree": ResourceTreeAdapter {
                   "container": [Circular],
                   "copyNotebook": [Function],
+                  "gitHubOAuthService": GitHubOAuthService {
+                    "junoClient": JunoClient {
+                      "cachedPinnedRepos": [Function],
+                    },
+                    "token": [Function],
+                  },
+                  "junoClient": JunoClient {
+                    "cachedPinnedRepos": [Function],
+                  },
                   "parameters": [Function],
                 },
                 "resourceTreeForResourceToken": ResourceTreeAdapterForResourceToken {

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -22,6 +22,7 @@ import * as Constants from "../../../Common/Constants";
 import { configContext, Platform } from "../../../ConfigContext";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import { useSidePanel } from "../../../hooks/useSidePanel";
+import { JunoClient } from "../../../Juno/JunoClient";
 import { userContext } from "../../../UserContext";
 import { getCollectionName, getDatabaseName } from "../../../Utils/APITypeUtils";
 import { isServerlessAccount } from "../../../Utils/CapabilityUtils";
@@ -560,6 +561,7 @@ function createNotebookWorkspaceResetButton(container: Explorer): CommandButtonC
 function createManageGitHubAccountButton(container: Explorer): CommandButtonComponentProps {
   const connectedToGitHub: boolean = container.notebookManager?.gitHubOAuthService.isLoggedIn();
   const label = connectedToGitHub ? "Manage GitHub settings" : "Connect to GitHub";
+  const junoClient = new JunoClient();
   return {
     iconSrc: GitHubIcon,
     iconAlt: label,
@@ -568,7 +570,11 @@ function createManageGitHubAccountButton(container: Explorer): CommandButtonComp
         .getState()
         .openSidePanel(
           label,
-          <GitHubReposPanel explorer={container} gitHubClientProp={container.notebookManager.gitHubClient} />
+          <GitHubReposPanel
+            explorer={container}
+            gitHubClientProp={container.notebookManager.gitHubClient}
+            junoClientProp={junoClient}
+          />
         ),
     commandButtonLabel: label,
     hasPopup: false,

src/Explorer/Notebook/NotebookManager.tsx

@@ -89,16 +89,18 @@ export default class NotebookManager {
       this.gitHubClient.setToken(token?.access_token);
       if (this?.gitHubOAuthService.isLoggedIn()) {
         useSidePanel.getState().closeSidePanel();
-        useSidePanel
+        setTimeout(() => {
-          .getState()
+          useSidePanel
-          .openSidePanel(
+            .getState()
-            "Manage GitHub settings",
+            .openSidePanel(
-            <GitHubReposPanel
+              "Manage GitHub settings",
-              explorer={this.params.container}
+              <GitHubReposPanel
-              gitHubClientProp={this.params.container.notebookManager.gitHubClient}
+                explorer={this.params.container}
-              junoClientProp={this.junoClient}
+                gitHubClientProp={this.params.container.notebookManager.gitHubClient}
-            />
+                junoClientProp={this.junoClient}
-          );
+              />
+            );
+        }, 200);
       }
 
       this.params.refreshCommandBarButtons();
@@ -179,6 +181,7 @@ export default class NotebookManager {
               <GitHubReposPanel
                 explorer={this.params.container}
                 gitHubClientProp={this.params.container.notebookManager.gitHubClient}
+                junoClientProp={this.junoClient}
               />
             ),
         "Cancel",

src/Explorer/Panes/GitHubReposPanel/GitHubReposPanel.tsx

@@ -23,7 +23,7 @@ import { PanelLoadingScreen } from "../PanelLoadingScreen";
 interface IGitHubReposPanelProps {
   explorer: Explorer;
   gitHubClientProp: GitHubClient;
-  junoClientProp?: JunoClient;
+  junoClientProp: JunoClient;
 }
 
 interface IGitHubReposPanelState {
@@ -120,6 +120,7 @@ export class GitHubReposPanel extends React.Component<IGitHubReposPanelProps, IG
         handleError(error, "GitHubReposPane/submit", "Failed to save pinned repos");
       }
     }
+    useSidePanel.getState().closeSidePanel();
   }
 
   public resetData(): void {
@@ -144,11 +145,18 @@ export class GitHubReposPanel extends React.Component<IGitHubReposPanelProps, IG
 
   private setup(forceShowConnectToGitHub = false): void {
     forceShowConnectToGitHub || !this.props.explorer.notebookManager?.gitHubOAuthService.isLoggedIn()
-      ? this.setupForConnectToGitHub()
+      ? this.setupForConnectToGitHub(forceShowConnectToGitHub)
       : this.setupForManageRepos();
   }
 
-  private setupForConnectToGitHub(): void {
+  private setupForConnectToGitHub(forceShowConnectToGitHub: boolean): void {
+    if (forceShowConnectToGitHub) {
+      const newState = { ...this.state.gitHubReposState };
+      newState.showAuthorizeAccess = forceShowConnectToGitHub;
+      this.setState({
+        gitHubReposState: newState,
+      });
+    }
     this.setState({
       isExecuting: false,
     });
@@ -368,46 +376,28 @@ export class GitHubReposPanel extends React.Component<IGitHubReposPanelProps, IG
           isLoading: true,
           loadMore: (): Promise<void> => this.loadMoreBranches(item.repo),
         };
-        this.setState({
-          gitHubReposState: {
-            ...this.state.gitHubReposState,
-            reposListProps: {
-              ...this.state.gitHubReposState.reposListProps,
-              branchesProps: {
-                ...this.state.gitHubReposState.reposListProps.branchesProps,
-                [GitHubUtils.toRepoFullName(item.repo.owner, item.repo.name)]: this.branchesProps[item.key],
-              },
-              pinnedReposProps: {
-                repos: this.pinnedReposProps.repos,
-              },
-              unpinnedReposProps: {
-                ...this.state.gitHubReposState.reposListProps.unpinnedReposProps,
-                repos: this.unpinnedReposProps.repos,
-              },
-            },
-          },
-        });
         this.loadMoreBranches(item.repo);
-      } else {
-        if (this.isAddedRepo === false) {
-          this.setState({
-            gitHubReposState: {
-              ...this.state.gitHubReposState,
-              reposListProps: {
-                ...this.state.gitHubReposState.reposListProps,
-                pinnedReposProps: {
-                  repos: this.pinnedReposProps.repos,
-                },
-                unpinnedReposProps: {
-                  ...this.state.gitHubReposState.reposListProps.unpinnedReposProps,
-                  repos: this.unpinnedReposProps.repos,
-                },
-              },
-            },
-          });
-        }
       }
     });
+
+    this.setState({
+      gitHubReposState: {
+        ...this.state.gitHubReposState,
+        reposListProps: {
+          ...this.state.gitHubReposState.reposListProps,
+          branchesProps: {
+            ...this.branchesProps,
+          },
+          pinnedReposProps: {
+            repos: this.pinnedReposProps.repos,
+          },
+          unpinnedReposProps: {
+            ...this.state.gitHubReposState.reposListProps.unpinnedReposProps,
+            repos: this.unpinnedReposProps.repos,
+          },
+        },
+      },
+    });
     this.isAddedRepo = false;
   }
 

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

@@ -31,6 +31,15 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
             "resourceTree": ResourceTreeAdapter {
               "container": [Circular],
               "copyNotebook": [Function],
+              "gitHubOAuthService": GitHubOAuthService {
+                "junoClient": JunoClient {
+                  "cachedPinnedRepos": [Function],
+                },
+                "token": [Function],
+              },
+              "junoClient": JunoClient {
+                "cachedPinnedRepos": [Function],
+              },
               "parameters": [Function],
             },
             "resourceTreeForResourceToken": ResourceTreeAdapterForResourceToken {

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

@@ -21,6 +21,15 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
       "resourceTree": ResourceTreeAdapter {
         "container": [Circular],
         "copyNotebook": [Function],
+        "gitHubOAuthService": GitHubOAuthService {
+          "junoClient": JunoClient {
+            "cachedPinnedRepos": [Function],
+          },
+          "token": [Function],
+        },
+        "junoClient": JunoClient {
+          "cachedPinnedRepos": [Function],
+        },
         "parameters": [Function],
       },
       "resourceTreeForResourceToken": ResourceTreeAdapterForResourceToken {

src/Explorer/Tree/ResourceTreeAdapter.tsx

@@ -16,9 +16,10 @@ import { Areas } from "../../Common/Constants";
 import { isPublicInternetAccessAllowed } from "../../Common/DatabaseAccountUtility";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
+import { GitHubOAuthService } from "../../GitHub/GitHubOAuthService";
 import { useSidePanel } from "../../hooks/useSidePanel";
 import { useTabs } from "../../hooks/useTabs";
-import { IPinnedRepo } from "../../Juno/JunoClient";
+import { IPinnedRepo, JunoClient } from "../../Juno/JunoClient";
 import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
 import { Action, ActionModifiers, Source } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
@@ -55,6 +56,8 @@ export class ResourceTreeAdapter implements ReactAdapter {
   public galleryContentRoot: NotebookContentItem;
   public myNotebooksContentRoot: NotebookContentItem;
   public gitHubNotebooksContentRoot: NotebookContentItem;
+  public junoClient: JunoClient;
+  public gitHubOAuthService: GitHubOAuthService;
 
   public constructor(private container: Explorer) {
     this.parameters = ko.observable(Date.now());
@@ -71,6 +74,8 @@ export class ResourceTreeAdapter implements ReactAdapter {
 
     useDatabases.subscribe(() => this.triggerRender());
     this.triggerRender();
+    this.junoClient = new JunoClient();
+    this.gitHubOAuthService = new GitHubOAuthService(this.junoClient);
   }
 
   private traceMyNotebookTreeInfo() {
@@ -634,6 +639,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
               <GitHubReposPanel
                 explorer={this.container}
                 gitHubClientProp={this.container.notebookManager.gitHubClient}
+                junoClientProp={this.junoClient}
               />
             ),
       },