Improving syntax selection UI

tools/webide/packages/client/examples/cameligo/arithmetic-contract.ligo

@@ -1,5 +1,5 @@
 (*_*
-  name: Cameligo Contract
+  name: CameLIGO Contract
   language: cameligo
   compile:
     entrypoint: main

tools/webide/packages/client/examples/pascaligo/arithmetic-contract.ligo

@@ -1,5 +1,5 @@
 (*_*
-  name: Pascaligo Contract
+  name: PascaLIGO Contract
   language: pascaligo
   compile:
     entrypoint: main

tools/webide/packages/client/examples/reasonligo/arithmetic-contract.ligo

@@ -1,5 +1,5 @@
 (*_*
-  name: Reasonligo Contract
+  name: ReasonLIGO Contract
   language: reasonligo
   compile:
     entrypoint: main

tools/webide/packages/client/ligo_run.svg

@@ -1,84 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   sodipodi:docname="ligo_run.svg"
-   id="svg4550"
-   version="1.1"
-   viewBox="0 0 193.35434 193.35434"
-   height="193.35434"
-   width="193.35434"
-   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
-   style="fill:none">
-  <metadata
-     id="metadata4554">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="2560"
-     inkscape:window-height="1400"
-     id="namedview4552"
-     showgrid="false"
-     inkscape:zoom="1.9624573"
-     inkscape:cx="24.54412"
-     inkscape:cy="104.17717"
-     inkscape:window-x="-12"
-     inkscape:window-y="-12"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg4550"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0" />
-  <circle
-     cx="96.67717"
-     cy="96.67717"
-     r="74"
-     id="circle4541"
-     style="stroke:url(#paint0_linear);stroke-width:45.35433197;stroke-miterlimit:4;stroke-dasharray:none" />
-  <defs
-     id="defs4548">
-    <linearGradient
-       id="paint0_linear"
-       x1="100"
-       y1="54"
-       x2="100"
-       y2="254"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-3.322834,-57.322834)">
-      <stop
-         stop-color="#3AA0FF"
-         id="stop4543" />
-      <stop
-         offset="1"
-         stop-color="#0072DC"
-         id="stop4545" />
-    </linearGradient>
-  </defs>
-  <path
-     d="M 137.61977,80.627036 58.899178,68.296666 88.24752,141.00143 137.6208,80.624736 Z"
-     id="path4537"
-     inkscape:connector-curvature="0"
-     style="fill:#fc683a;stroke-width:2.53620434" />
-</svg>

tools/webide/packages/client/src/components/editable-title.tsx

@@ -0,0 +1,121 @@
+import { faPencilAlt } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React, { useEffect, useRef, useState } from 'react';
+import styled, { css } from 'styled-components';
+
+import { Tooltip } from './tooltip';
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const Input = styled.input<{ visible?: boolean }>`
+  position: absolute;
+  border-radius: var(--border_radius);
+  opacity: 0;
+  height: 2em;
+  width: 0;
+  border: none;
+  font-size: 1em;
+
+  outline: none;
+  z-index: 1;
+
+  ${props =>
+    props.visible &&
+    css`
+      padding-left: 0.5em;
+      opacity: 1;
+      width: 15em;
+    `}
+`;
+
+const Label = styled.div<{ visible?: boolean }>`
+  color: var(--blue);
+  opacity: 0;
+
+  ${props =>
+    props.visible &&
+    css`
+      opacity: 1;
+    `}
+`;
+
+const PencilIcon = ({ ...props }) => (
+  <FontAwesomeIcon {...props} icon={faPencilAlt} size="sm"></FontAwesomeIcon>
+);
+
+const Pencil = styled(PencilIcon)<{ visible: boolean }>`
+  margin-left: 10px;
+  cursor: pointer;
+  color: var(--label_foreground);
+  opacity: 0;
+
+  :hover {
+    opacity: 1;
+  }
+
+  ${props =>
+    props.visible &&
+    css`
+      opacity: 0.5;
+    `}
+`;
+
+export const EditableTitleComponent = (props: {
+  id?: string;
+  title: string;
+  onChanged?: (value: string) => void;
+  className?: string;
+}) => {
+  const [newTitle, setNewTitle] = useState(props.title);
+  const [showInput, setShowInput] = useState(false);
+  const inputEl = useRef<HTMLInputElement>(null);
+
+  const notifyChanged = () => {
+    if (props.onChanged && props.title !== newTitle) {
+      props.onChanged(newTitle);
+    }
+
+    setShowInput(false);
+  };
+
+  useEffect(() => {
+    setNewTitle(props.title);
+  }, [props.title]);
+
+  return (
+    <Container id={props.id} className={props.className}>
+      <Input
+        ref={inputEl}
+        visible={showInput}
+        value={newTitle}
+        onChange={event => setNewTitle(event.target.value)}
+        onBlur={_ => notifyChanged()}
+        onKeyDown={event => {
+          if (event.key === 'Enter') {
+            notifyChanged();
+          } else if (event.key === 'Escape') {
+            setNewTitle(props.title);
+            setShowInput(false);
+          }
+        }}
+      ></Input>
+      <Label visible={!showInput}>{newTitle ? newTitle : 'Untitled'}</Label>
+      <div>
+        <Pencil
+          visible={!showInput}
+          onClick={() => {
+            if (inputEl.current) {
+              inputEl.current.select();
+              inputEl.current.setSelectionRange(0, 99999);
+              setShowInput(true);
+            }
+          }}
+        ></Pencil>
+        <Tooltip>Rename</Tooltip>
+      </div>
+    </Container>
+  );
+};

tools/webide/packages/client/src/components/editor.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
 
+import { AppState } from '../redux/app';
+import { ChangeTitleAction } from '../redux/editor';
+import { EditableTitleComponent } from './editable-title';
 import { MonacoComponent } from './monaco';
 import { ShareComponent } from './share';
 import { SyntaxSelectComponent } from './syntax-select';
@@ -12,20 +16,44 @@ const Container = styled.div`
 const Header = styled.div`
   flex: 1;
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
   align-items: center;
 
   min-height: 2.5em;
   border-bottom: 5px solid var(--blue_trans1);
 `;
 
+const Subheader = styled.div`
+  flex: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  background: var(--blue_trans1);
+  border: 5px solid rgba(0, 0, 0, 0);
+  border-top: none;
+  padding: 0 10px;
+`;
+
 export const EditorComponent = () => {
+  const dispatch = useDispatch();
+  const title = useSelector<AppState, string>(state => state.editor.title);
+
   return (
     <Container>
       <Header>
-        <SyntaxSelectComponent></SyntaxSelectComponent>
         <ShareComponent></ShareComponent>
       </Header>
+      <Subheader>
+        <EditableTitleComponent
+          id="editor-title"
+          title={title}
+          onChanged={value => {
+            dispatch({ ...new ChangeTitleAction(value) });
+          }}
+        ></EditableTitleComponent>
+        <SyntaxSelectComponent></SyntaxSelectComponent>
+      </Subheader>
       <MonacoComponent></MonacoComponent>
     </Container>
   );

tools/webide/packages/client/src/components/examples.tsx

@@ -3,12 +3,13 @@ import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
 
 import { AppState } from '../redux/app';
+import { ChangeDirtyAction, EditorState } from '../redux/editor';
 import { ChangeSelectedAction, ExamplesState } from '../redux/examples';
 import { getExample } from '../services/api';
 
 const bgColor = 'transparent';
 const borderSize = '5px';
-const verticalPadding = '0.8em';
+const verticalPadding = '0.6em';
 
 const Container = styled.div`
   flex: 0.5;
@@ -16,7 +17,7 @@ const Container = styled.div`
   flex-direction: column;
 `;
 
-const MenuItem = styled.div<{ selected: boolean }>`
+const MenuItem = styled.div<{ selected?: boolean }>`
   padding: ${verticalPadding} 0 ${verticalPadding} 1em;
   height: 1.5em;
   display: flex;
@@ -27,25 +28,12 @@ const MenuItem = styled.div<{ selected: boolean }>`
   border-left: ${`${borderSize} solid ${bgColor}`};
   border-left-color: ${props => (props.selected ? 'var(--blue)' : bgColor)};
 
-  :first-child {
-    margin-top: ${props => (props.selected ? '0' : `-${borderSize}`)};
-  }
-
   :hover {
     background-color: ${props =>
       props.selected ? 'var(--blue_trans1)' : 'var(--blue_trans2)'};
     border-left: ${`${borderSize} solid ${bgColor}`};
     border-left-color: ${props =>
       props.selected ? 'var(--blue)' : 'transparent'};
-    :first-child {
-      margin-top: ${props => (props.selected ? '0' : `-${borderSize}`)};
-      padding-top: ${props =>
-        props.selected
-          ? `${verticalPadding}`
-          : `calc(${verticalPadding} - ${borderSize})`};
-      border-top: ${props =>
-        props.selected ? '' : `${borderSize} solid var(--blue_opaque1)`};
-    }
   }
 `;
 
@@ -57,44 +45,45 @@ const MenuContainer = styled.div`
   box-sizing: border-box;
 `;
 
-const Header = styled.div<{ firstChildSelected: boolean }>`
+const Header = styled.div`
-  border-bottom: ${props =>
-    props.firstChildSelected ? '' : '5px solid var(--blue_trans1)'};
   min-height: 2.5em;
   padding: 0 10px;
   display: flex;
   align-items: center;
+  font-weight: 600;
 `;
 
 export const Examples = () => {
   const examples = useSelector<AppState, ExamplesState['list']>(
     (state: AppState) => state.examples.list
   );
-  const selectedExample = useSelector<AppState, ExamplesState['selected']>(
+  const editorDirty = useSelector<AppState, EditorState['dirty']>(
-    (state: AppState) => state.examples.selected
+    (state: AppState) => state.editor.dirty
   );
+
   const dispatch = useDispatch();
 
   return (
     <Container>
-      <Header
+      <Header>Examples</Header>
-        firstChildSelected={
-          !!selectedExample && examples[0].id === selectedExample.id
-        }
-      >
-        <span>Examples</span>
-      </Header>
       <MenuContainer>
         {examples.map(example => {
           return (
             <MenuItem
               id={example.id}
               key={example.id}
-              selected={!!selectedExample && example.id === selectedExample.id}
               onClick={async () => {
                 const response = await getExample(example.id);
 
+                if (
+                  !editorDirty ||
+                  window.confirm(
+                    'Are you sure you want to navigate away? Data you have entered will be lost.\n\nPress OK to continue or Cancel to stay on the current page.\n\n'
+                  )
+                ) {
                   dispatch({ ...new ChangeSelectedAction(response) });
+                  dispatch({ ...new ChangeDirtyAction(false) });
+                }
               }}
             >
               {example.name}

tools/webide/packages/client/src/components/header.tsx

@@ -6,9 +6,9 @@ const Container = styled.div`
   justify-content: space-between;
   align-items: center;
 
-  padding: 0.5em 1em;
+  padding: 0.2em 1em;
   font-family: 'DM Sans', 'Open Sans', sans-serif;
-  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.3);
+  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
 `;
 
 const Group = styled.div`

tools/webide/packages/client/src/components/inputs.tsx

@@ -12,12 +12,12 @@ export const HGroup = styled.div`
 
 export const Label = styled.label`
   font-size: 1em;
-  color: rgba(153, 153, 153, 1);
+  color: var(--label_foreground);
 `;
 
 export const Input = styled.input`
   margin: 0.3em 0 0.7em 0;
-  background-color: #eff7ff;
+  background-color: var(--input_background);
   border-style: none;
   border-bottom: 5px solid #e1f1ff;
   padding: 0.5em;
@@ -33,7 +33,7 @@ export const Input = styled.input`
 export const Textarea = styled.textarea`
   resize: vertical;
   margin: 0.3em 0 0.7em 0;
-  background-color: #eff7ff;
+  background-color: var(--input_background);
   border-style: none;
   border-bottom: 5px solid #e1f1ff;
   padding: 0.5em;

tools/webide/packages/client/src/components/monaco.tsx

@@ -4,7 +4,8 @@ import { useDispatch, useStore } from 'react-redux';
 import styled from 'styled-components';
 
 import { AppState } from '../redux/app';
-import { ChangeCodeAction } from '../redux/editor';
+import { ChangeCodeAction, ChangeDirtyAction } from '../redux/editor';
+import { ClearSelectedAction } from '../redux/examples';
 
 const Container = styled.div`
   height: var(--content_height);
@@ -53,8 +54,14 @@ export const MonacoComponent = () => {
       }
     });
 
+    let shouldDispatchCodeChangedAction = true;
+
     const { dispose } = editor.onDidChangeModelContent(() => {
+      if (shouldDispatchCodeChangedAction) {
         dispatch({ ...new ChangeCodeAction(editor.getValue()) });
+        dispatch({ ...new ChangeDirtyAction(true) });
+        dispatch({ ...new ClearSelectedAction() });
+      }
     });
 
     cleanupFunc.push(dispose);
@@ -64,7 +71,9 @@ export const MonacoComponent = () => {
         const { editor: editorState }: AppState = store.getState();
 
         if (editorState.code !== editor.getValue()) {
+          shouldDispatchCodeChangedAction = false;
           editor.setValue(editorState.code);
+          shouldDispatchCodeChangedAction = true;
         }
 
         if (editorState.language !== model.getModeId()) {

tools/webide/packages/client/src/components/share.tsx

@@ -12,7 +12,7 @@ import { Tooltip } from './tooltip';
 
 const Container = styled.div`
   display: flex;
-  justify-content: flex-end;
+  justify-content: flex-start;
   align-items: center;
 `;
 
@@ -81,9 +81,9 @@ const Input = styled.input<{ visible?: boolean }>`
   opacity: 0;
   height: 2em;
   width: 2em;
-  transform: translateX(-0.3em);
+  transform: translateX(0.3em);
   border: none;
-  padding: 0 1em;
+  padding-left: 2em;
   font-size: 1em;
   color: white;
 

tools/webide/packages/client/src/components/syntax-select.tsx

@@ -8,6 +8,7 @@ import styled, { css } from 'styled-components';
 import { AppState } from '../redux/app';
 import { ChangeLanguageAction, EditorState } from '../redux/editor';
 import { Language } from '../redux/types';
+import { Tooltip } from './tooltip';
 
 const Container = styled.div`
   display: flex;
@@ -22,14 +23,19 @@ const Header = styled.div`
 
   flex: 1;
   display: flex;
-  align-items: center;
-  justify-content: space-between;
   height: 2em;
   padding: 0 0.5em;
 
   border: 1px solid var(--blue_trans1);
 `;
 
+const Label = styled.div`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
 const ArrowIcon = ({ rotate, ...props }: { rotate: boolean }) => (
   <FontAwesomeIcon {...props} icon={faCaretDown} size="lg"></FontAwesomeIcon>
 );
@@ -140,8 +146,11 @@ export const SyntaxSelectComponent = () => {
         </List>
       </OutsideClickHandler>
       <Header id="syntax-select" onClick={() => open(true)}>
-        <span>{OPTIONS[language]}</span>
+        <Label>
+          {OPTIONS[language]}
           <Arrow rotate={opened}></Arrow>
+        </Label>
+        <Tooltip>Select syntax</Tooltip>
       </Header>
     </Container>
   );

tools/webide/packages/client/src/components/tooltip.tsx

@@ -1,4 +1,4 @@
-import React, { createElement, useEffect, useRef, useState } from 'react';
+import React, { createElement, useCallback, useEffect, useRef, useState } from 'react';
 import { render } from 'react-dom';
 import styled from 'styled-components';
 
@@ -64,7 +64,8 @@ export const Tooltip = (props: { position?: Position; children: any }) => {
   const ref = useRef<HTMLDivElement>(null);
   const [isTooltipVisible, setTooltipVisible] = useState(false);
 
-  const renderTooltip = (visible: boolean, triggerRect: ClientRect) => {
+  const renderTooltip = useCallback(
+    (visible: boolean, triggerRect: ClientRect) => {
       const tooltip = createElement(
         StyledTooltip,
         {
@@ -76,7 +77,9 @@ export const Tooltip = (props: { position?: Position; children: any }) => {
       );
 
       render(tooltip, document.getElementById(TOOLTIP_CONTAINER_ID));
-  };
+    },
+    [props.position, props.children]
+  );
 
   useEffect(() => {
     if (ref.current) {
@@ -98,7 +101,7 @@ export const Tooltip = (props: { position?: Position; children: any }) => {
         };
       }
     }
-  });
+  }, [isTooltipVisible, renderTooltip]);
 
   return <div ref={ref}></div>;
 };

tools/webide/packages/client/src/index.css

@@ -10,6 +10,8 @@
   --blue_opaque1: #dbeaff;
   --blue_trans2: rgba(14, 116, 255, 0.08); /* #eff7ff; */
 
+  --input_background: #eff7ff;
+
   --grey: #888;
 
   --box-shadow: 1px 3px 10px 0px rgba(153, 153, 153, 0.4); /* or #999999 */
@@ -46,7 +48,7 @@
   --font_ghost_weight: 700;
   --font_ghost_color: rgba(153, 153, 153, 0.5); /* or #CFCFCF */
 
-  --content_height: 85vh;
+  --content_height: 80vh;
 
   --tooltip_foreground: white;
   --tooltip_background: rgba(0, 0, 0, 0.75) /*#404040*/;

tools/webide/packages/client/src/redux/editor.ts

@@ -3,12 +3,16 @@ import { Language } from './types';
 
 export enum ActionType {
   ChangeLanguage = 'editor-change-language',
-  ChangeCode = 'editor-change-code'
+  ChangeCode = 'editor-change-code',
+  ChangeDirty = 'editor-change-dirty',
+  ChangeTitle = 'editor-change-title'
 }
 
 export interface EditorState {
   language: Language;
   code: string;
+  title: string;
+  dirty: boolean;
 }
 
 export class ChangeLanguageAction {
@@ -21,14 +25,28 @@ export class ChangeCodeAction {
   constructor(public payload: EditorState['code']) {}
 }
 
+export class ChangeDirtyAction {
+  public readonly type = ActionType.ChangeDirty;
+  constructor(public payload: EditorState['dirty']) {}
+}
+
+export class ChangeTitleAction {
+  public readonly type = ActionType.ChangeTitle;
+  constructor(public payload: EditorState['title']) {}
+}
+
 type Action =
   | ChangeCodeAction
   | ChangeLanguageAction
+  | ChangeDirtyAction
+  | ChangeTitleAction
   | ChangeSelectedExampleAction;
 
 const DEFAULT_STATE: EditorState = {
   language: Language.CameLigo,
-  code: ''
+  code: '',
+  title: '',
+  dirty: false
 };
 
 export default (state = DEFAULT_STATE, action: Action): EditorState => {
@@ -36,7 +54,9 @@ export default (state = DEFAULT_STATE, action: Action): EditorState => {
     case ExamplesActionType.ChangeSelected:
       return {
         ...state,
-        ...(!action.payload ? DEFAULT_STATE : action.payload.editor)
+        ...(!action.payload
+          ? DEFAULT_STATE
+          : { ...action.payload.editor, title: action.payload.name })
       };
     case ActionType.ChangeLanguage:
       return {
@@ -48,6 +68,17 @@ export default (state = DEFAULT_STATE, action: Action): EditorState => {
         ...state,
         code: action.payload
       };
-  }
+    case ActionType.ChangeDirty:
-  return state;
+      return {
+        ...state,
+        dirty: action.payload
+      };
+    case ActionType.ChangeTitle:
+      return {
+        ...state,
+        title: action.payload
+      };
+    default:
+      return state;
+  }
 };

tools/webide/packages/client/src/redux/examples.ts

@@ -1,7 +1,8 @@
 import { ExampleState } from './example';
 
 export enum ActionType {
-  ChangeSelected = 'examples-change-selected'
+  ChangeSelected = 'examples-change-selected',
+  ClearSelected = 'examples-clear-selected'
 }
 
 export interface ExampleItem {
@@ -19,13 +20,25 @@ export class ChangeSelectedAction {
   constructor(public payload: ExamplesState['selected']) {}
 }
 
-type Action = ChangeSelectedAction;
+export class ClearSelectedAction {
+  public readonly type = ActionType.ClearSelected;
+}
+
+type Action = ChangeSelectedAction | ClearSelectedAction;
 
 export const DEFAULT_STATE: ExamplesState = {
   selected: null,
   list: []
 };
 
+if (process.env.NODE_ENV === 'development') {
+  DEFAULT_STATE.list = [
+    { id: 'MzkMQ1oiVHJqbcfUuVFKTw', name: 'CameLIGO Contract' },
+    { id: 'FEb62HL7onjg1424eUsGSg', name: 'PascaLIGO Contract' },
+    { id: 'JPhSOehj_2MFwRIlml0ymQ', name: 'ReasonLIGO Contract' }
+  ];
+}
+
 export default (state = DEFAULT_STATE, action: Action): ExamplesState => {
   switch (action.type) {
     case ActionType.ChangeSelected:
@@ -33,6 +46,12 @@ export default (state = DEFAULT_STATE, action: Action): ExamplesState => {
         ...state,
         selected: action.payload
       };
-  }
+    case ActionType.ClearSelected:
-  return state;
+      return {
+        ...state,
+        selected: null
+      };
+    default:
+      return state;
+  }
 };

tools/webide/packages/client/src/redux/share.ts

@@ -15,7 +15,7 @@ import {
   ChangeParametersAction as ChangeDryRunParametersAction,
   ChangeStorageAction as ChangeDryRunStorageAction,
 } from './dry-run';
-import { ActionType as EditorActionType, ChangeCodeAction, ChangeLanguageAction } from './editor';
+import { ActionType as EditorActionType, ChangeCodeAction, ChangeLanguageAction, ChangeTitleAction } from './editor';
 import {
   ActionType as EvaluateFunctionActionType,
   ChangeEntrypointAction as ChangeEvaluateFunctionEntrypointAction,
@@ -25,6 +25,7 @@ import {
   ActionType as EvaluateValueActionType,
   ChangeEntrypointAction as ChangeEvaluateValueEntrypointAction,
 } from './evaluate-value';
+import { ActionType as ExamplesActionType, ChangeSelectedAction as ChangeSelectedExampleAction } from './examples';
 
 export enum ActionType {
   ChangeShareLink = 'share-change-link'
@@ -41,6 +42,7 @@ export class ChangeShareLinkAction {
 
 type Action =
   | ChangeShareLinkAction
+  | ChangeTitleAction
   | ChangeCodeAction
   | ChangeLanguageAction
   | ChangeCompileEntrypointAction
@@ -53,7 +55,8 @@ type Action =
   | ChangeDryRunStorageAction
   | ChangeEvaluateFunctionEntrypointAction
   | ChangeEvaluateFunctionParametersAction
-  | ChangeEvaluateValueEntrypointAction;
+  | ChangeEvaluateValueEntrypointAction
+  | ChangeSelectedExampleAction;
 
 const DEFAULT_STATE: ShareState = {
   link: ''
@@ -61,6 +64,8 @@ const DEFAULT_STATE: ShareState = {
 
 export default (state = DEFAULT_STATE, action: Action): ShareState => {
   switch (action.type) {
+    case EditorActionType.ChangeTitle:
+    case ExamplesActionType.ChangeSelected:
     case EditorActionType.ChangeCode:
     case EditorActionType.ChangeLanguage:
     case CompileActionType.ChangeEntrypoint:

tools/webide/packages/client/src/setupProxy.js

@@ -8,4 +8,12 @@ module.exports = function(app) {
       changeOrigin: true
     })
   );
+
+  app.use(
+    '/static/examples',
+    proxy({
+      target: 'http://localhost:8080',
+      changeOrigin: true
+    })
+  );
 };

tools/webide/packages/e2e/test/share.spec.js

@@ -24,7 +24,7 @@ describe('Share', () => {
     await responseCallback;
 
     const actualShareLink = await page.evaluate(getInputValue, 'share-link');
-    const expectedShareLink = `${API_HOST}/p/sIpy-2D9ExpCojwuBNw_-g`;
+    const expectedShareLink = `${API_HOST}/p/WxKPBq9-mkZ_kq4cMHXfCQ`;
 
     expect(actualShareLink).toEqual(expectedShareLink);
     done();

tools/webide/packages/server/src/handlers/share.ts

@@ -10,6 +10,8 @@ interface ShareBody {
   editor: {
     language: string;
     code: string;
+    dirty: boolean;
+    title: string;
   };
   compile: {
     entrypoint: string;
@@ -39,7 +41,9 @@ const validateRequest = (body: any): { value: ShareBody; error: any } => {
       editor: joi
         .object({
           language: joi.string().required(),
-          code: joi.string().required()
+          code: joi.string().required(),
+          dirty: joi.boolean().optional(),
+          title: joi.string().allow('')
         })
         .required(),
       compile: joi.object({

tools/webide/packages/server/src/load-state.ts

@@ -24,7 +24,9 @@ export async function loadDefaultState(appBundleDirectory: string) {
     deploy: {},
     evaluateValue: {},
     evaluateFunction: {},
-    editor: {},
+    editor: {
+      title: ''
+    },
     examples: {
       selected: null,
       list: examplesList
@@ -59,9 +61,9 @@ export async function loadDefaultState(appBundleDirectory: string) {
     };
     defaultState.editor = {
       ...defaultState.editor,
-      ...defaultExample.editor
+      ...defaultExample.editor,
+      title: defaultExample.name
     };
-    defaultState.examples.selected = defaultExample;
   }
 
   return defaultState;

tools/webide/packages/server/src/schemas/share-latest.ts

@@ -1,3 +1,3 @@
-import { SchemaMigrationV1 } from './share-v1';
+import { SchemaMigrationV2 } from './share-v2';
 
-export default new SchemaMigrationV1();
+export default new SchemaMigrationV2();

tools/webide/packages/server/src/schemas/share-v2.ts

@@ -0,0 +1,96 @@
+import joi from '@hapi/joi';
+
+import { Migration } from './migration';
+import { SchemaMigrationV1, SchemaV1 } from './share-v1';
+
+export type Version = 'v2';
+
+export interface SchemaV2 {
+  version: Version;
+  state: {
+    editor: {
+      language: string;
+      code: string;
+      dirty: boolean;
+      title: string;
+    };
+    compile: {
+      entrypoint: string;
+    };
+    dryRun: {
+      entrypoint: string;
+      parameters: string;
+      storage: string;
+    };
+    deploy: {
+      entrypoint: string;
+      storage: string;
+      useTezBridge?: boolean;
+    };
+    evaluateValue: {
+      entrypoint: string;
+    };
+    evaluateFunction: {
+      entrypoint: string;
+      parameters: string;
+    };
+  };
+}
+
+export class SchemaMigrationV2 extends Migration {
+  readonly VERSION: Version = 'v2';
+
+  protected readonly schema = joi.object({
+    version: joi
+      .string()
+      .required()
+      .allow(this.VERSION),
+    state: joi.object({
+      editor: joi
+        .object({
+          language: joi.string().required(),
+          code: joi.string().required(),
+          dirty: joi.boolean().optional(),
+          title: joi.string().allow('')
+        })
+        .required(),
+      compile: joi.object({
+        entrypoint: joi.string().allow('')
+      }),
+      dryRun: joi.object({
+        entrypoint: joi.string().allow(''),
+        parameters: joi.any().allow(''),
+        storage: joi.any().allow('')
+      }),
+      deploy: joi.object({
+        entrypoint: joi.string().allow(''),
+        storage: joi.any().allow(''),
+        useTezBridge: joi.boolean().optional()
+      }),
+      evaluateValue: joi.object({
+        entrypoint: joi.string().allow('')
+      }),
+      evaluateFunction: joi.object({
+        entrypoint: joi.string().allow(''),
+        parameters: joi.any().allow('')
+      })
+    })
+  });
+
+  protected readonly previous = new SchemaMigrationV1();
+
+  protected migrate(data: SchemaV1): SchemaV2 {
+    return {
+      ...data,
+      version: this.VERSION,
+      state: {
+        ...data.state,
+        editor: {
+          ...data.state.editor,
+          dirty: false,
+          title: ''
+        }
+      }
+    };
+  }
+}