Onboarding improvements: No local changes blank slate

app/src/lib/feature-flag.ts

@@ -55,3 +55,12 @@ export function enableGitProtocolVersionTwo(): boolean {
 export function enableReadmeOverwriteWarning(): boolean {
   return enableBetaFeatures()
 }
+
+/**
+ * Whether or not to activate the new, improved, blank slate
+ * shown when the user doesn't have any local changes in their
+ * repository.
+ */
+export function enableNewNoChangesBlankslate(): boolean {
+  return enableBetaFeatures()
+}

app/src/lib/menu-item.ts

@@ -19,3 +19,44 @@ export interface IMenuItem {
    */
   readonly role?: string
 }
+
+/**
+ * Converts Electron accelerator modifiers to their platform specific
+ * name or symbol.
+ *
+ * Example: CommandOrControl becomes either '⌘' or 'Ctrl' depending on platform.
+ *
+ * See https://github.com/electron/electron/blob/fb74f55/docs/api/accelerator.md
+ */
+export function getPlatformSpecificNameOrSymbolForModifier(
+  modifier: string
+): string {
+  switch (modifier.toLowerCase()) {
+    case 'cmdorctrl':
+    case 'commandorcontrol':
+      return __DARWIN__ ? '⌘' : 'Ctrl'
+
+    case 'ctrl':
+    case 'control':
+      return __DARWIN__ ? '⌃' : 'Ctrl'
+
+    case 'shift':
+      return __DARWIN__ ? '⇧' : 'Shift'
+    case 'alt':
+      return __DARWIN__ ? '⌥' : 'Alt'
+
+    // Mac only
+    case 'cmd':
+    case 'command':
+      return '⌘'
+    case 'option':
+      return '⌥'
+
+    // Special case space because no one would be able to see it
+    case ' ':
+      return 'Space'
+  }
+
+  // Not a known modifier, likely a normal key
+  return modifier
+}

app/src/ui/app-menu/menu-list-item.tsx

@@ -4,6 +4,7 @@ import * as classNames from 'classnames'
 import { Octicon, OcticonSymbol } from '../octicons'
 import { MenuItem } from '../../models/app-menu'
 import { AccessText } from '../lib/access-text'
+import { getPlatformSpecificNameOrSymbolForModifier } from '../../lib/menu-item'
 
 interface IMenuListItemProps {
   readonly item: MenuItem
@@ -34,45 +35,6 @@ interface IMenuListItemProps {
   readonly renderSubMenuArrow?: boolean
 }
 
-/**
- * Converts Electron accelerator modifiers to their platform specific
- * name or symbol.
- *
- * Example: CommandOrControl becomes either '⌘' or 'Ctrl' depending on platform.
- *
- * See https://github.com/electron/electron/blob/fb74f55/docs/api/accelerator.md
- */
-function getPlatformSpecificNameOrSymbolForModifier(modifier: string): string {
-  switch (modifier.toLowerCase()) {
-    case 'cmdorctrl':
-    case 'commandorcontrol':
-      return __DARWIN__ ? '⌘' : 'Ctrl'
-
-    case 'ctrl':
-    case 'control':
-      return __DARWIN__ ? '⌃' : 'Ctrl'
-
-    case 'shift':
-      return __DARWIN__ ? '⇧' : 'Shift'
-    case 'alt':
-      return __DARWIN__ ? '⌥' : 'Alt'
-
-    // Mac only
-    case 'cmd':
-    case 'command':
-      return '⌘'
-    case 'option':
-      return '⌥'
-
-    // Special case space because no one would be able to see it
-    case ' ':
-      return 'Space'
-  }
-
-  // Not a known modifier, likely a normal key
-  return modifier
-}
-
 /**
  * Returns a platform specific human readable version of an Electron
  * accelerator string. See getPlatformSpecificNameOrSymbolForModifier

app/src/ui/app.tsx

@@ -2015,6 +2015,7 @@ export class App extends React.Component<IAppProps, IAppState> {
           accounts={state.accounts}
           externalEditorLabel={externalEditorLabel}
           onOpenInExternalEditor={this.openFileInExternalEditor}
+          appMenu={this.state.appMenuState[0]}
         />
       )
     } else if (selectedState.type === SelectionType.CloningRepository) {

app/src/ui/changes/blankslate-action.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react'
+import * as classNames from 'classnames'
+import { Button } from '../lib/button'
+
+interface IBlankSlateActionProps {
+  /**
+   * The title, or "header" text for a blank slate
+   * action.
+   */
+  readonly title: string
+
+  /**
+   * An optional description to be rendered directly
+   * underneath the title.
+   */
+  readonly description?: string | JSX.Element
+
+  /**
+   * A text or set of elements used to present information
+   * to the user about how and where to access the action
+   * outside of the blank slate action.
+   */
+  readonly discoverabilityContent: string | JSX.Element
+
+  /**
+   * The text, or "label", for the action button.
+   */
+  readonly buttonText: string | JSX.Element
+
+  /**
+   * A callback which is invoked when the user clicks
+   * or activates the action using their keyboard.
+   */
+  readonly onClick: () => void
+
+  /**
+   * The type of action, currently supported actions are
+   * normal, and primary. Primary actions are visually
+   * distinct from normal actions in order to stand out
+   * as a highly probable next step action.
+   */
+  readonly type?: 'normal' | 'primary'
+
+  /**
+   * Whether or not the action should be disabled. Disabling
+   * the action means that the button will no longer be
+   * clickable.
+   */
+  readonly disabled?: boolean
+}
+
+/**
+ * A small container component for rendering an "action" in a blank
+ * slate view. An action is usally contained within an action group
+ * which visually connects one or more actions. An action component
+ * has a title, a description, and a button label.
+ */
+export class BlankslateAction extends React.Component<
+  IBlankSlateActionProps,
+  {}
+> {
+  public render() {
+    const primary = this.props.type === 'primary'
+    const cn = classNames('blankslate-action', { primary })
+    const description =
+      this.props.description === undefined ? (
+        undefined
+      ) : (
+        <p className="description">{this.props.description}</p>
+      )
+    return (
+      <div className={cn}>
+        <div className="text-wrapper">
+          <h2>{this.props.title}</h2>
+          {description}
+          <p className="discoverability">{this.props.discoverabilityContent}</p>
+        </div>
+        <Button
+          type={primary ? 'submit' : undefined}
+          onClick={this.props.onClick}
+          disabled={this.props.disabled}
+        >
+          {this.props.buttonText}
+        </Button>
+      </div>
+    )
+  }
+}

app/src/ui/changes/menu-backed-blankslate-action.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react'
+import { BlankslateAction } from './blankslate-action'
+import { MenuIDs } from '../../main-process/menu'
+import { executeMenuItemById } from '../main-process-proxy'
+
+interface IMenuBackedBlankSlateActionProps {
+  /**
+   * The id of the menu item backing this action.
+   * When the action is invoked the menu item specified
+   * by this id will be executed.
+   */
+  readonly menuItemId: MenuIDs
+
+  /**
+   * The title, or "header" text for a blank slate
+   * action.
+   */
+  readonly title: string
+
+  /**
+   * An optional description to be rendered directly
+   * underneath the title.
+   */
+  readonly description?: string | JSX.Element
+
+  /**
+   * A text or set of elements used to present information
+   * to the user about how and where to access the action
+   * outside of the blank slate action.
+   */
+  readonly discoverabilityContent: string | JSX.Element
+
+  /**
+   * The text, or "label", for the action button.
+   */
+  readonly buttonText: string | JSX.Element
+
+  /**
+   * The type of action, currently supported actions are
+   * normal, and primary. Primary actions are visually
+   * distinct from normal actions in order to stand out
+   * as a highly probable next step action.
+   */
+  readonly type?: 'normal' | 'primary'
+
+  /**
+   * Whether or not the action should be disabled. Disabling
+   * the action means that the button will no longer be
+   * clickable.
+   */
+  readonly disabled?: boolean
+}
+
+/**
+ * A small container component for rendering an "action" in a blank
+ * slate view. An action is usally contained within an action group
+ * which visually connects one or more actions. An action component
+ * has a title, a description, and a button label.
+ *
+ * A menu backed blankslate action differs from a normal blankslate
+ * action in that it's directly linked to a menu item in the
+ * application menu and invoking a menu backed action will execute
+ * the menu item backing it without a need for consumers to specify
+ * an onClick callback.
+ */
+export class MenuBackedBlankslateAction extends React.Component<
+  IMenuBackedBlankSlateActionProps,
+  {}
+> {
+  public render() {
+    return (
+      <BlankslateAction
+        title={this.props.title}
+        description={this.props.description}
+        discoverabilityContent={this.props.discoverabilityContent}
+        buttonText={this.props.buttonText}
+        onClick={this.onClick}
+        type={this.props.type}
+        disabled={this.props.disabled}
+      />
+    )
+  }
+
+  private onClick = () => {
+    executeMenuItemById(this.props.menuItemId)
+  }
+}