Implemented an option to hide system classes

src/main/MainMenu.ts

@@ -128,6 +128,15 @@ export const getDefaultMenuTemplate = (
             updateMenu();
           },
         },
+        {
+          label: `Show system classes`,
+          type: 'checkbox',
+          checked: store.shouldShowSystemClasses(),
+          click: async () => {
+            await store.toggleShowSystemClasses();
+            updateMenu();
+          },
+        },
         { type: 'separator' },
         { role: 'resetzoom' },
         { role: 'zoomin' },

src/store.ts

@@ -21,10 +21,13 @@
 
 import { ElectronStore } from './module-wrappers/electron-store';
 
+type RemovalCallback = () => void;
+
 class RealmStudioStore {
   public readonly KEY_SHOW_PARTIAL_REALMS = 'realmlist.show-partial-realms';
   public readonly KEY_SHOW_SYSTEM_REALMS = 'realmlist.show-system-realms';
   public readonly KEY_SHOW_SYSTEM_USERS = 'userlist.show-system-users';
+  public readonly KEY_SHOW_SYSTEM_CLASSES = 'browser.show-system-classes';
 
   private store = new ElectronStore();
 
@@ -43,6 +46,11 @@ class RealmStudioStore {
     this.store.set(this.KEY_SHOW_SYSTEM_USERS, !currentValue);
   }
 
+  public toggleShowSystemClasses() {
+    const currentValue = this.store.get(this.KEY_SHOW_SYSTEM_CLASSES, false);
+    this.store.set(this.KEY_SHOW_SYSTEM_CLASSES, !currentValue);
+  }
+
   public shouldShowPartialRealms(): boolean {
     return this.store.get(this.KEY_SHOW_PARTIAL_REALMS, false);
   }
@@ -55,6 +63,10 @@ class RealmStudioStore {
     return this.store.get(this.KEY_SHOW_SYSTEM_USERS, false);
   }
 
+  public shouldShowSystemClasses(): boolean {
+    return this.store.get(this.KEY_SHOW_SYSTEM_CLASSES, false);
+  }
+
   // Subclassing ElectronStore results in
   // `Class constructor ElectronStore cannot be invoked without 'new'`
   public set(key: string, value: any): void {
@@ -68,8 +80,10 @@ class RealmStudioStore {
   public onDidChange(
     key: string,
     callback: (newValue: any, oldValue: any) => void,
-  ): void {
-    this.store.onDidChange(key, callback);
+  ) {
+    const removalCallback = this.store.onDidChange(key, callback);
+    // The store actually returns a function that can be called to remove the listener
+    return (removalCallback as any) as RemovalCallback;
   }
 
   public delete(key: string) {

src/ui/RealmBrowser/AddPropertyModal/index.tsx

@@ -27,7 +27,7 @@ export interface IAddPropertyModalProps {
   isOpen: boolean;
   isPropertyNameAvailable: (name: string) => boolean;
   onAddProperty: (name: string, type: Realm.PropertyType) => void;
-  schemas: Realm.ObjectSchema[];
+  classes: Realm.ObjectSchema[];
   toggle: () => void;
 }
 
@@ -67,7 +67,7 @@ class AddPropertyModalContainer extends React.Component<
     };
   }
 
-  public componentWillReceiveProps(props: IAddPropertyModalProps) {
+  public componentWillReceiveProps() {
     this.generateTypeOptions();
   }
 
@@ -122,7 +122,7 @@ class AddPropertyModalContainer extends React.Component<
       disabled: false,
       show: true,
     }));
-    const classes = this.getClassesTypes(this.props.schemas);
+    const classes = this.getClassesTypes(this.props.classes);
     const classTypeHeader = {
       value: 'Link Types',
       disabled: true,
@@ -156,8 +156,8 @@ class AddPropertyModalContainer extends React.Component<
     return `${propertyType}${optionalMarker}${listMarker}`;
   };
 
-  private getClassesTypes = (schemas: Realm.ObjectSchema[]): string[] =>
-    schemas.map(schema => schema.name);
+  private getClassesTypes = (classes: Realm.ObjectSchema[]): string[] =>
+    classes.map(c => c.name);
 }
 
 export { AddPropertyModalContainer as AddPropertyModal };

src/ui/RealmBrowser/LeftSidebar/LeftSidebar.scss

@@ -39,11 +39,14 @@
     text-transform: uppercase;
   }
 
-  &__SchemaList {
+  &__Classes {
     flex-grow: 1;
     margin: 0 (-$spacer / 2);
     overflow-x: hidden;
     overflow-y: auto;
+  }
+
+  &__ClassList {
     padding: 0;
 
     &--empty {
@@ -53,13 +56,13 @@
 
       &::before {
         color: $elephant;
-        content: "This Realm has no schemas defined";
+        content: "This Realm has no classes defined";
         text-align: center;
       }
     }
   }
 
-  &__Schema {
+  &__Class {
     flex-direction: column;
     list-style: none;
 
@@ -126,4 +129,14 @@
       text-decoration: underline;
     }
   }
+
+  &__HiddenClassesHint {
+    color: $elephant;
+    font-size: .75rem;
+    margin: 0 ($spacer / 2);
+    overflow: hidden;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }

src/ui/RealmBrowser/LeftSidebar/LeftSidebar.tsx

@@ -0,0 +1,123 @@
+////////////////////////////////////////////////////////////////////////////
+//
+// Copyright 2018 Realm Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////
+
+import * as classNames from 'classnames';
+import * as React from 'react';
+import { Badge, Button, FormGroup, Input, Label } from 'reactstrap';
+
+import { ClassFocussedHandler } from '..';
+import { ILoadingProgress, Sidebar } from '../../reusable';
+import { Focus, IListFocus } from '../focus';
+
+import { ListFocus } from './ListFocus';
+
+import './LeftSidebar.scss';
+
+export const isSelected = (focus: Focus | null, schemaName: string) => {
+  if (focus && focus.kind === 'class') {
+    return focus.className === schemaName;
+  } else if (focus && focus.kind === 'list') {
+    return focus.parent.objectSchema().name === schemaName;
+  } else {
+    return false;
+  }
+};
+
+export interface ILeftSidebarProps {
+  classes: Realm.ObjectSchema[];
+  className?: string;
+  focus: Focus | null;
+  getSchemaLength: (className: string) => number;
+  hiddenClassCount: number;
+  isOpen: boolean;
+  onClassFocussed: ClassFocussedHandler;
+  onToggle: () => void;
+  progress: ILoadingProgress;
+  toggleAddClass: () => void;
+}
+
+export const LeftSidebar = ({
+  classes,
+  className,
+  focus,
+  getSchemaLength,
+  hiddenClassCount,
+  isOpen,
+  onClassFocussed,
+  onToggle,
+  progress,
+  toggleAddClass,
+}: ILeftSidebarProps) => (
+  <Sidebar
+    className={className}
+    contentClassName="LeftSidebar"
+    isOpen={isOpen}
+    onToggle={onToggle}
+    position="left"
+    minimumWidth={120}
+  >
+    <div className="LeftSidebar__Header">
+      <span>Classes</span>
+      <Button size="sm" onClick={toggleAddClass}>
+        <i className="fa fa-plus" />
+      </Button>
+    </div>
+    <div className="LeftSidebar__Classes">
+      {classes && classes.length > 0 ? (
+        <ul className="LeftSidebar__ClassList">
+          {classes.map(schema => {
+            const selected = isSelected(focus, schema.name);
+            const schemaClass = classNames('LeftSidebar__Class__Info', {
+              'LeftSidebar__Class__Info--selected': selected,
+            });
+            return (
+              <li
+                key={schema.name}
+                className="LeftSidebar__Class"
+                title={schema.name}
+              >
+                <div
+                  className={schemaClass}
+                  onClick={() => onClassFocussed(schema.name)}
+                >
+                  <span className="LeftSidebar__Class__Name">
+                    {schema.name}
+                  </span>
+                  <Badge color="primary">{getSchemaLength(schema.name)}</Badge>
+                </div>
+                {selected && focus && focus.kind === 'list' ? (
+                  <ListFocus
+                    focus={focus as IListFocus}
+                    onClassFocussed={onClassFocussed}
+                  />
+                ) : null}
+              </li>
+            );
+          })}
+        </ul>
+      ) : progress.status === 'done' ? (
+        <div className="LeftSidebar__ClassList--empty" />
+      ) : null}
+      {hiddenClassCount > 0 ? (
+        <p className="LeftSidebar__HiddenClassesHint">
+          Hiding {hiddenClassCount} system classes
+        </p>
+      ) : null}
+    </div>
+  </Sidebar>
+);