Add a button in the toolbar to reset the editor

ui/frontend/AdvancedResetMenu.tsx

@@ -0,0 +1,36 @@
+import React, { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+
+import ButtonMenuItem from './ButtonMenuItem';
+import MenuGroup from './MenuGroup';
+
+import * as actions from './actions';
+
+interface AdvancedResetMenuProps {
+  close: () => void;
+}
+
+const AdvancedResetMenu: React.SFC<AdvancedResetMenuProps> = props => {
+  const dispatch = useDispatch();
+  const resetToMinimal = useCallback(() => {
+    dispatch(actions.resetEditorToMinimal());
+    props.close();
+  }, [dispatch, props]);
+  const resetToHello = useCallback(() => {
+    dispatch(actions.resetEditorToHello());
+    props.close();
+  }, [dispatch, props]);
+
+  return (
+    <MenuGroup title="Reset Editor">
+      <ButtonMenuItem name="Reset to a minimal executable code" onClick={resetToMinimal}>
+        <div>Reset the editor content with just an empty main function.</div>
+      </ButtonMenuItem>
+      <ButtonMenuItem name='Reset to an "Hello World"' onClick={resetToHello}>
+        <div>Reset the editor content with an &quot;Hello World&quot; executable.</div>
+      </ButtonMenuItem>
+    </MenuGroup>
+  );
+};
+
+export default AdvancedResetMenu;

ui/frontend/Header.tsx

@@ -11,6 +11,7 @@ import ModeMenu from './ModeMenu';
 import PopButton from './PopButton';
 import { SegmentedButton, SegmentedButtonSet, SegmentedLink } from './SegmentedButton';
 import ToolsMenu from './ToolsMenu';
+import AdvancedResetMenu from './AdvancedResetMenu';
 
 import * as actions from './actions';
 import * as selectors from './selectors';
@@ -32,6 +33,12 @@ const Header: React.SFC = () => (
         <AdvancedOptionsMenuButton />
       </SegmentedButtonSet>
     </HeaderSet>
+    <HeaderSet id="reset">
+      <SegmentedButtonSet>
+        <ResetButton />
+        <AdvancedResetMenuButton />
+      </SegmentedButtonSet>
+    </HeaderSet>
     <HeaderSet id="share">
       <SegmentedButtonSet>
         <ShareButton />
@@ -128,6 +135,28 @@ const AdvancedOptionsMenuButton: React.SFC = () => {
   return <PopButton Button={Button} Menu={AdvancedOptionsMenu} />;
 }
 
+const ResetButton: React.SFC = () => {
+  const dispatch = useDispatch();
+  const resetAction = useCallback(() => dispatch(actions.resetEditorToEmpty()), [dispatch]);
+
+  return (
+    <SegmentedButton title="Reset the editor" onClick={resetAction}>
+      <HeaderButton>Reset</HeaderButton>
+    </SegmentedButton>
+  );
+};
+
+const AdvancedResetMenuButton: React.SFC = () => {
+  const Button = React.forwardRef<HTMLButtonElement, { toggle: () => void }>(({ toggle }, ref) => (
+    <SegmentedButton title="Reset the editor with some default content" ref={ref} onClick={toggle}>
+      <HeaderButton icon={<MoreOptionsIcon />} />
+    </SegmentedButton>
+  ));
+  Button.displayName = 'AdvancedResetMenuButton.Button';
+
+  return <PopButton Button={Button} Menu={AdvancedResetMenu} />;
+}
+
 const ShareButton: React.SFC = () => {
   const dispatch = useDispatch();
   const gistSave = useCallback(() => dispatch(actions.performGistSave()), [dispatch]);

ui/frontend/actions.ts

@@ -122,6 +122,9 @@ export enum ActionType {
   RequestVersionsLoad = 'REQUEST_VERSIONS_LOAD',
   VersionsLoadSucceeded = 'VERSIONS_LOAD_SUCCEEDED',
   NotificationSeen = 'NOTIFICATION_SEEN',
+  ResetEditorToEmpty = 'RESET_EDITOR_TO_EMPTY',
+  ResetEditorToMinimal = 'RESET_EDITOR_TO_MINIMAL',
+  ResetEditorToHelloWorld = 'RESET_EDITOR_TO_HELLOWORLD',
   BrowserWidthChanged = 'BROWSER_WIDTH_CHANGED',
   SplitRatioChanged = 'SPLIT_RATIO_CHANGED',
 }
@@ -457,6 +460,15 @@ export const performCompileToNightlyHir =
 export const performCompileToNightlyWasm =
   performAndSwitchPrimaryAction(performCompileToNightlyWasmOnly, PrimaryActionCore.Wasm);
 
+export const resetEditorToEmpty = () =>
+  createAction(ActionType.ResetEditorToEmpty);
+
+export const resetEditorToMinimal = () =>
+  createAction(ActionType.ResetEditorToMinimal);
+
+export const resetEditorToHello = () =>
+  createAction(ActionType.ResetEditorToHelloWorld);
+
 export const editCode = (code: string) =>
   createAction(ActionType.EditCode, { code });
 
@@ -870,6 +882,9 @@ export type Action =
   | ReturnType<typeof requestVersionsLoad>
   | ReturnType<typeof receiveVersionsLoadSuccess>
   | ReturnType<typeof notificationSeen>
+  | ReturnType<typeof resetEditorToEmpty>
+  | ReturnType<typeof resetEditorToMinimal>
+  | ReturnType<typeof resetEditorToHello>
   | ReturnType<typeof browserWidthChanged>
   | ReturnType<typeof splitRatioChanged>
   ;