UX improvements (#97)

* Making the greeting panel links visible This fixes #86 * Ensuring that a realm wont be opened twice * Default server url and username * Making links open in the external browser * Fixing the sidebar width This fixes #96
realm · Sep 13, 2017 · e019e41 · e019e41
1 parent c07143d
commit e019e41
Show file tree

Hide file tree

Showing 11 changed files with 65 additions and 26 deletions.
diff --git a/src/actions.ts b/src/actions.ts
@@ -28,8 +28,15 @@ export const showOpenLocalRealm = (options?: void) => {
   ipcRenderer.sendSync(Actions.ShowOpenLocalRealm, options);
 };
 
-export const showRealmBrowser = (options: IRealmBrowserOptions) => {
-  ipcRenderer.sendSync(Actions.ShowRealmBrowser, options);
+export const showRealmBrowser = async (options: IRealmBrowserOptions) => {
+  return new Promise((resolve, reject) => {
+    const success = ipcRenderer.sendSync(Actions.ShowRealmBrowser, options);
+    if (success) {
+      resolve();
+    } else {
+      reject();
+    }
+  });
 };
 
 export const showServerAdministration = (options: IServerAdministrationOptions) => {

diff --git a/src/main/application.ts b/src/main/application.ts
@@ -31,8 +31,8 @@ export default class Application {
       this.showOpenLocalRealm();
       event.returnValue = true;
     },
-    [Actions.ShowRealmBrowser]: (event, ...args) => {
-      this.showRealmBrowser(args[0] as IRealmBrowserOptions);
+    [Actions.ShowRealmBrowser]: async (event, ...args) => {
+      await this.showRealmBrowser(args[0] as IRealmBrowserOptions);
       event.returnValue = true;
     },
     [Actions.ShowServerAdministration]: (event, ...args) => {
@@ -92,10 +92,13 @@ export default class Application {
     });
   }
 
-  public showRealmBrowser(options: IRealmBrowserOptions) {
-    const window = this.windowManager.createWindow(WindowType.RealmBrowser, options);
-    window.once("ready-to-show", () => {
-      window.show();
+  public async showRealmBrowser(options: IRealmBrowserOptions) {
+    return new Promise((resolve) => {
+      const window = this.windowManager.createWindow(WindowType.RealmBrowser, options);
+      window.once("ready-to-show", () => {
+        window.show();
+        resolve();
+      });
     });
   }
 

diff --git a/src/main/window-manager.ts b/src/main/window-manager.ts
@@ -1,4 +1,4 @@
-import { BrowserWindow, screen } from "electron";
+import { BrowserWindow, screen, shell } from "electron";
 import * as path from "path";
 import * as url from "url";
 
@@ -58,6 +58,12 @@ export default class WindowManager {
       event.preventDefault();
     });
 
+    // Open all links in the external browser
+    window.webContents.on("new-window", (event, openedUrl: string) => {
+      event.preventDefault();
+      shell.openExternal(openedUrl);
+    });
+
     window.on("closed", () => {
       const index = this.windows.indexOf(window);
       if (index > -1) {

diff --git a/src/ui/connect-to-server/ConnectToServer.tsx b/src/ui/connect-to-server/ConnectToServer.tsx
@@ -43,7 +43,7 @@ export const ConnectToServer = ({
       <div className="ConnectToServer__ServerUrl">
         <FormGroup className="ConnectToServer__ServerUrlGroup">
           <Label for="serverUrl">URL</Label>
-          <Input type="url" name="serverUrl" id="serverUrl" placeholder="https://…" required
+          <Input type="url" name="serverUrl" id="serverUrl" placeholder="http://localhost:9080"
             value={url} onChange={onUrlChanged} />
         </FormGroup>
       </div>

diff --git a/src/ui/connect-to-server/ConnectToServerContainer.tsx b/src/ui/connect-to-server/ConnectToServerContainer.tsx
@@ -41,6 +41,7 @@ export class ConnectToServerContainer extends React.Component<{}, {
     const { url, username, password, token } = this.state;
 
     const preparedUrl = this.prepareUrl(url);
+    const preparedUsername = this.prepareUsername(username);
 
     this.setState({
       isConnecting: true,
@@ -54,7 +55,7 @@ export class ConnectToServerContainer extends React.Component<{}, {
         },
       });
     } else {
-      Realm.Sync.User.login(preparedUrl, username, password, (err, user) => {
+      Realm.Sync.User.login(preparedUrl, preparedUsername, password, (err, user) => {
         this.setState({
           isConnecting: false,
         });
@@ -68,7 +69,7 @@ export class ConnectToServerContainer extends React.Component<{}, {
           showServerAdministration({
             url: user.server,
             credentials: {
-              username,
+              username: preparedUsername,
               password,
             },
           });
@@ -110,10 +111,20 @@ export class ConnectToServerContainer extends React.Component<{}, {
   }
 
   private prepareUrl(url: string) {
-    if (url.indexOf("http") !== 0) {
+    if (url === "") {
+      return "http://localhost:9080";
+    } else if (url.indexOf("http") !== 0) {
       return `http://${url}`;
     } else {
       return url;
     }
   }
+
+  private prepareUsername(username: string) {
+    if (username === "") {
+      return "realm-admin";
+    } else {
+      return username;
+    }
+  }
 }
diff --git a/src/ui/connect-to-server/UsernamePasswordForm.tsx b/src/ui/connect-to-server/UsernamePasswordForm.tsx
@@ -18,7 +18,7 @@ export const UsernamePasswordForm = ({
 }) => (
   <div>
     <CredentialsFormGroup label="Username" labelFor="username">
-      <Input type="text" name="username" id="username" size="sm" required={isRequired}
+      <Input type="text" name="username" id="username" size="sm" placeholder="realm-admin"
         value={username} onChange={onUsernameChanged} />
     </CredentialsFormGroup>
     <CredentialsFormGroup label="Password" labelFor="password">

diff --git a/src/ui/greeting/Greeting.scss b/src/ui/greeting/Greeting.scss
@@ -79,6 +79,10 @@ $history-panel-icon-size: 20px;
       justify-content: center;
       padding: $spacer / 2;
       user-select: none;
+
+      a {
+        text-decoration: underline;
+      }
     }
   }
 

diff --git a/src/ui/greeting/HistoryPanel.tsx b/src/ui/greeting/HistoryPanel.tsx
@@ -56,9 +56,8 @@ export const HistoryPanel = ({
       <div className="Greeting__HistoryPanel__Empty">
         <p>Welcome to Realm Studio!</p>
         <p>
-          Download and start the&nbsp;
-          <a href="https://realm.io/docs/realm-object-server/" target="browser">
-            Realm Object Server
+          <a href="https://realm.io/docs/realm-object-server/" target="_blank">
+            Download and start the Realm Object Server
           </a>, if you have not already done that.
         </p>
       </div>

diff --git a/src/ui/realm-browser/RealmBrowser.scss b/src/ui/realm-browser/RealmBrowser.scss
@@ -9,8 +9,8 @@ $realm-browser-header-handle-width: 8px;
 
   &__Sidebar {
     background: $window-background;
+    flex: 0 2 200px;
     padding: $spacer / 2;
-    width: 30%;
 
     &__Header {
       border-bottom: 1px solid $color-dove;
@@ -58,7 +58,7 @@ $realm-browser-header-handle-width: 8px;
   }
 
   &__Content {
-    width: 70%;
+    flex: 1 1 0;
 
     &__HeaderCell,
     &__Cell {

diff --git a/src/ui/server-administration/ServerAdministration.tsx b/src/ui/server-administration/ServerAdministration.tsx
@@ -21,11 +21,13 @@ export enum Tab {
 
 export const ServerAdministration = ({
   activeTab,
+  isRealmOpening,
   onRealmOpened,
   onTabChanged,
   user,
 }: {
   activeTab: Tab,
+  isRealmOpening: boolean,
   onRealmOpened: (path: string) => void,
   onTabChanged: (tab: Tab) => void,
   user: Realm.Sync.User | null,
@@ -79,7 +81,7 @@ export const ServerAdministration = ({
       <div className="ServerAdministration__content">
         {content}
       </div>
-      <LoadingOverlay loading={!user} fade={false} />
+      <LoadingOverlay loading={!user || isRealmOpening} fade={false} />
     </div>
   );
 };
diff --git a/src/ui/server-administration/ServerAdministrationContainer.tsx b/src/ui/server-administration/ServerAdministrationContainer.tsx
@@ -16,13 +16,15 @@ import { ServerAdministration, Tab } from "./ServerAdministration";
 
 export class ServerAdministrationContainer extends React.Component<IServerAdministrationOptions, {
   activeTab: Tab,
+  isRealmOpening: boolean,
   user: Realm.Sync.User | null,
 }> {
 
   constructor() {
     super();
     this.state = {
       activeTab: Tab.Realms,
+      isRealmOpening: false,
       user: null,
     };
   }
@@ -52,12 +54,17 @@ export class ServerAdministrationContainer extends React.Component<IServerAdmini
 
   // TODO: Once the user serializes better, this method should be moved to the ./realms/RealmsTableContainer.tsx
   public onRealmOpened = (path: string) => {
-    showRealmBrowser({
-      mode: RealmBrowserMode.Synced,
-      serverUrl: this.props.url,
-      path,
-      credentials: this.props.credentials,
-    } as ISyncedRealmBrowserOptions);
+    if (!this.state.isRealmOpening) {
+      this.setState({ isRealmOpening: true });
+      // Let the UI update before sync waiting on the window to appear
+      showRealmBrowser({
+        mode: RealmBrowserMode.Synced,
+        serverUrl: this.props.url,
+        path,
+        credentials: this.props.credentials,
+      } as ISyncedRealmBrowserOptions);
+      this.setState({ isRealmOpening: false });
+    }
   }
 
   public onTabChanged = (tab: Tab) => {