Merge pull request desktop#1362 from desktop/tabula-rasa

Tabula rasa

app/src/lib/app-state.ts

@@ -47,7 +47,6 @@ export interface IAppState {
    */
   readonly windowState: WindowState
   readonly showWelcomeFlow: boolean
-  readonly loading: boolean
   readonly currentPopup: Popup | null
   readonly currentFoldout: Foldout | null
 

app/src/lib/dispatcher/app-store.ts

@@ -351,7 +351,6 @@ export class AppStore {
       currentPopup: this.currentPopup,
       currentFoldout: this.currentFoldout,
       errors: this.errors,
-      loading: this.loading,
       showWelcomeFlow: this.showWelcomeFlow,
       emoji: this.emojiStore.emoji,
       sidebarWidth: this.sidebarWidth,

app/src/ui/app.tsx

@@ -41,6 +41,7 @@ import { getVersion, getName } from './lib/app-proxy'
 import { Publish } from './publish-repository'
 import { Acknowledgements } from './acknowledgements'
 import { UntrustedCertificate } from './untrusted-certificate'
+import { BlankSlateView } from './blank-slate'
 
 /** The interval at which we should check for updates. */
 const UpdateCheckInterval = 1000 * 60 * 60 * 4
@@ -262,7 +263,7 @@ export class App extends React.Component<IAppProps, IAppState> {
       case 'create-branch': return this.showCreateBranch()
       case 'show-branches': return this.showBranches()
       case 'remove-repository': return this.removeRepository()
-      case 'create-repository': return this.createRepository()
+      case 'create-repository': return this.showCreateRepository()
       case 'rename-branch': return this.renameBranch()
       case 'delete-branch': return this.deleteBranch()
       case 'check-for-updates': return this.checkForUpdates()
@@ -382,13 +383,13 @@ export class App extends React.Component<IAppProps, IAppState> {
     return this.props.dispatcher.showPopup({ type: PopupType.AddRepository })
   }
 
-  private createRepository() {
+  private showCreateRepository = () => {
     this.props.dispatcher.showPopup({
       type: PopupType.CreateRepository,
     })
   }
 
-  private showCloneRepo() {
+  private showCloneRepo = () => {
     return this.props.dispatcher.showPopup({
       type: PopupType.CloneRepository,
       initialURL: null,
@@ -922,8 +923,7 @@ export class App extends React.Component<IAppProps, IAppState> {
       onSelectionChanged={this.onSelectionChanged}
       dispatcher={this.props.dispatcher}
       repositories={this.state.repositories}
-      loading={this.state.loading}
-      />
+    />
   }
 
   private onRepositoryDropdownStateChanged = (newState: DropdownState) => {
@@ -1067,7 +1067,16 @@ export class App extends React.Component<IAppProps, IAppState> {
   }
 
   private renderRepository() {
-    const selectedState = this.state.selectedState
+    const state = this.state
+    if (state.repositories.length < 1) {
+      return <BlankSlateView
+        onCreate={this.showCreateRepository}
+        onClone={this.showCloneRepo}
+        onAdd={this.showAddLocalRepo}
+      />
+    }
+
+    const selectedState = state.selectedState
     if (!selectedState) {
       return <NoRepositorySelected/>
     }

app/src/ui/blank-slate/blank-slate.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react'
+import { UiView } from '../ui-view'
+import { Button } from '../lib/button'
+import { Octicon, OcticonSymbol } from '../octicons'
+
+interface IBlankSlateProps {
+  /** A function to call when the user chooses to create a repository. */
+  readonly onCreate: () => void
+
+  /** A function to call when the user chooses to clone a repository. */
+  readonly onClone: () => void
+
+  /** A function to call when the user chooses to add a local repository. */
+  readonly onAdd: () => void
+}
+
+/**
+ * The blank slate view. This is shown when the user hasn't added any
+ * repositories to the app.
+ */
+export class BlankSlateView extends React.Component<IBlankSlateProps, void> {
+  public render() {
+    return (
+      <UiView id='blank-slate'>
+        <div className='header'>
+          <div className='title'>{__DARWIN__ ? 'No Repositories Found' : 'No repositories found'}</div>
+          <div>
+            Add or create a repository so that you can start committing code and publish it to GitHub.
+          </div>
+        </div>
+
+        <div className='content'>
+          <div className='callout'>
+            <Octicon symbol={OcticonSymbol.plus}/>
+            <div>Create a new project and publish it to GitHub</div>
+            <Button onClick={this.props.onCreate}>
+              {__DARWIN__ ? 'Create New Repository' : 'Create new repository'}
+            </Button>
+          </div>
+
+          <div className='callout'>
+            <Octicon symbol={OcticonSymbol.repoClone}/>
+            <div>Clone an existing project from GitHub to your computer</div>
+            <Button onClick={this.props.onClone}>
+              {__DARWIN__ ? 'Clone a Repository' : 'Clone a repository'}
+            </Button>
+          </div>
+
+          <div className='callout'>
+            <Octicon symbol={OcticonSymbol.deviceDesktop}/>
+            <div>Add an existing project on your computer and publish it to GitHub</div>
+            <Button onClick={this.props.onAdd}>
+              {__DARWIN__ ? 'Add a Local Repository' : 'Add a local repository'}
+            </Button>
+          </div>
+        </div>
+      </UiView>
+    )
+  }
+}

app/src/ui/blank-slate/index.ts

@@ -0,0 +1 @@
+export { BlankSlateView } from './blank-slate'

app/src/ui/repositories-list/index.tsx

@@ -17,7 +17,6 @@ interface IRepositoriesListProps {
   readonly selectedRepository: Repositoryish | null
   readonly onSelectionChanged: (repository: Repositoryish) => void
   readonly dispatcher: Dispatcher
-  readonly loading: boolean
   readonly repositories: ReadonlyArray<Repositoryish>
 }
 
@@ -65,10 +64,6 @@ export class RepositoriesList extends React.Component<IRepositoriesListProps, vo
   }
 
   public render() {
-    if (this.props.loading) {
-      return this.loading()
-    }
-
     if (this.props.repositories.length < 1) {
       return this.noRepositories()
     }
@@ -111,13 +106,4 @@ export class RepositoriesList extends React.Component<IRepositoriesListProps, vo
         </div>
       </div>)
   }
-
-  private loading() {
-    return (
-      <div className='repository-list'>
-        <div className='filter-list'>
-          <div className='sidebar-message'>Loading…</div>
-        </div>
-      </div>)
-  }
 }

app/styles/_ui.scss

@@ -50,3 +50,4 @@
 @import "ui/acknowledgements";
 @import "ui/update-notification";
 @import "ui/vertical-segmented-control";
+@import "ui/blank-slate";

app/styles/ui/_blank-slate.scss

@@ -0,0 +1,54 @@
+#blank-slate {
+  display: flex;
+  justify-content: center;
+
+  .header {
+    max-width: 490px;
+    align-self: center;
+
+    text-align: center;
+    padding-bottom: var(--spacing-double);
+
+    .title {
+      font-size: var(--font-size-lg);
+      font-weight: var(--font-weight-semibold);
+    }
+  }
+
+  .content {
+    display: flex;
+    flex-direction: row;
+
+    align-self: center;
+  }
+
+  .callout {
+    display: flex;
+    flex-direction: column;
+
+    max-width: 370px;
+    align-items: center;
+
+    text-align: center;
+
+    padding: 0 60px;
+
+    div {
+      margin: var(--spacing);
+      font-size: var(--font-size-md);
+    }
+
+    .octicon {
+      width: 32px;
+      height: 32px;
+    }
+
+    button {
+      flex-grow: 0;
+    }
+  }
+
+  .callout:not(:last-child) {
+    border-right: var(--base-border);
+  }
+}