Refactor Components

src/HostedExplorer.tsx

@@ -5,17 +5,17 @@ import { render } from "react-dom";
 import ChevronRight from "../images/chevron-right.svg";
 import "../less/hostedexplorer.less";
 import { AuthType } from "./AuthType";
-import { ConnectExplorer } from "./ConnectExplorer";
+import { ConnectExplorer } from "./Platform/Hosted/Components/ConnectExplorer";
 import { DatabaseAccount } from "./Contracts/DataModels";
-import { DirectoryPickerPanel } from "./DirectoryPickerPanel";
-import { AccountSwitchComponent } from "./Explorer/Controls/AccountSwitch/AccountSwitchComponent";
+import { DirectoryPickerPanel } from "./Platform/Hosted/Components/DirectoryPickerPanel";
+import { AccountSwitcher } from "./Platform/Hosted/Components/AccountSwitcher";
 import "./Explorer/Menus/NavBar/MeControlComponent.less";
 import { FeedbackCommandButton } from "./FeedbackCommandButton";
 import { usePortalAccessToken } from "./hooks/usePortalAccessToken";
-import { MeControl } from "./MeControl";
+import { MeControl } from "./Platform/Hosted/Components/MeControl";
 import "./Platform/Hosted/ConnectScreen.less";
 import "./Shared/appInsights";
-import { SignInButton } from "./SignInButton";
+import { SignInButton } from "./Platform/Hosted/Components/SignInButton";
 import { useAADAuth } from "./hooks/useAADAuth";
 
 initializeIcons();
@@ -76,7 +76,7 @@ const App: React.FunctionComponent = () => {
             )}
             {isLoggedIn && (
               <span className="accountSwitchComponentContainer">
-                <AccountSwitchComponent armToken={armToken} setDatabaseAccount={setDatabaseAccount} />
+                <AccountSwitcher armToken={armToken} setDatabaseAccount={setDatabaseAccount} />
               </span>
             )}
             {!isLoggedIn && encryptedTokenMetadata?.accountName && (

src/Platform/Hosted/Components/AccountSwitcher.tsx

@@ -41,10 +41,12 @@ const buttonStyles: IButtonStyles = {
 const cachedSubscriptionId = localStorage.getItem("cachedSubscriptionId");
 const cachedDatabaseAccountName = localStorage.getItem("cachedDatabaseAccountName");
 
-export const AccountSwitchComponent: React.FunctionComponent<{
+interface Props {
   armToken: string;
   setDatabaseAccount: (account: DatabaseAccount) => void;
-}> = ({ armToken, setDatabaseAccount }) => {
+}
+
+export const AccountSwitcher: React.FunctionComponent<Props> = ({ armToken, setDatabaseAccount }: Props) => {
   const subscriptions = useSubscriptions(armToken);
   const [selectedSubscriptionId, setSelectedSubscriptionId] = React.useState<string>(cachedSubscriptionId);
   const accounts = useDatabaseAccounts(selectedSubscriptionId, armToken);
@@ -52,7 +54,7 @@ export const AccountSwitchComponent: React.FunctionComponent<{
 
   React.useEffect(() => {
     if (accounts && selectedAccountName) {
-      const account = accounts.find(account => account.name == selectedAccountName);
+      const account = accounts.find(account => account.name === selectedAccountName);
       // Only set a new account if one is found
       if (account) {
         setDatabaseAccount(account);

src/Platform/Hosted/Components/ConnectExplorer.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { useBoolean } from "@uifabric/react-hooks";
-import { HttpHeaders } from "./Common/Constants";
-import { GenerateTokenResponse } from "./Contracts/DataModels";
-import { configContext } from "./ConfigContext";
+import { HttpHeaders } from "../../../Common/Constants";
+import { GenerateTokenResponse } from "../../../Contracts/DataModels";
+import { configContext } from "../../../ConfigContext";
 
 interface Props {
   login: () => void;

src/Platform/Hosted/Components/DirectoryPickerPanel.tsx

@@ -1,6 +1,6 @@
 import { Panel, PanelType, ChoiceGroup } from "office-ui-fabric-react";
 import * as React from "react";
-import { useDirectories } from "./hooks/useDirectories";
+import { useDirectories } from "../../../hooks/useDirectories";
 
 interface Props {
   isOpen: boolean;

src/Platform/Hosted/Components/FeedbackCommandButton.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { CommandButtonComponent } from "./Explorer/Controls/CommandButton/CommandButtonComponent";
+import { CommandButtonComponent } from "../../../Explorer/Controls/CommandButton/CommandButtonComponent";
 import FeedbackIcon from "../images/Feedback.svg";
 
 export const FeedbackCommandButton: React.FunctionComponent = () => {

src/Platform/Hosted/Components/MeControl.tsx

@@ -8,7 +8,7 @@ import {
 } from "office-ui-fabric-react";
 import * as React from "react";
 import { Account } from "msal";
-import { useGraphPhoto } from "./hooks/useGraphPhoto";
+import { useGraphPhoto } from "../../../hooks/useGraphPhoto";
 
 interface Props {
   graphToken: string;