Add new sub-pages + update text.

src/App.css

@@ -12,6 +12,7 @@
 
 .App {
   color: var(--charcoal);
+  font-weight: 500;
 }
 
 .App div {
@@ -144,6 +145,7 @@ button {
   padding: 5px 10px;
   font-family: 'Montserrat', sans-serif;
   font-size: 12px;
+  font-weight: 500;
 }
 
 button:hover {

src/App.tsx

@@ -11,10 +11,12 @@ import { kInitialDimensions, kPluginName, kSharedDimensions, kVersion, kNewDataC
   kNewSharedTable, kShareIdLength } from "./constants";
 import { IState } from "./types";
 import { FirstPage } from "./ui-pages/first-page";
-import { JoinOtherTablePage } from "./ui-pages/join-other-table";
+import { JoinAndMergeTableForm } from "./ui-pages/join-and-merge-table";
 import { AllowOthersToJoinPage } from "./ui-pages/allow-others-to-join-page";
-import { MergeTablePage } from "./ui-pages/merge-table-page";
+import { ShareExistingTablePage } from "./ui-pages/share-existing-table";
 import { CreateNewTablePage } from "./ui-pages/create-new-table-page"
+import { JoinOtherTableOptionsPage } from "./ui-pages/join-other-table-options-page";
+import { JoinWithoutMerging } from "./ui-pages/join-without-merging";
 
 let database: DB;
 
@@ -82,23 +84,25 @@ export default class App extends Component {
 
   renderFormPage() {
     const { availableDataContexts, selectedDataContext, lastSelectedDataContext, allowOthersToJoin,
-      joinOtherTable, mergeTable, createNewTable } = this.state;
-    const showFirstStep = !allowOthersToJoin && !joinOtherTable && !mergeTable && !createNewTable;
-    const showFirstAllowOthersToJoinOptions = allowOthersToJoin && !joinOtherTable && !mergeTable && !createNewTable;
+      joinOtherTable, shareExistingTable, joinAndMergeTable, createNewTable,
+      joinWithoutMerging } = this.state;
+    const showFirstStep = !allowOthersToJoin && !joinOtherTable;
+    const noSelectedSubOptions = !shareExistingTable && !createNewTable && !joinAndMergeTable && !joinWithoutMerging;
+    const showFirstAllowOthersToJoinOptions = allowOthersToJoin && !joinOtherTable && noSelectedSubOptions;
+    const showFirstJoinOtherTableOptions = !allowOthersToJoin && joinOtherTable && noSelectedSubOptions;
+
+    const availableContextOptions = availableDataContexts.map((dc: DataContext) =>
+      <option key={dc.name} value={dc.name}>{dc.title}</option>
+    );
+    const selectedContextOption = selectedDataContext || lastSelectedDataContext || kNewSharedTable;
 
     if (showFirstStep) {
       return (
         <FirstPage updateState={this.setState} />
       )
-    } else if (joinOtherTable) {
+    } else if (showFirstJoinOtherTableOptions) {
       return (
-        <JoinOtherTablePage
-          joinShareId={this.state.joinShareId}
-          personalDataLabel={this.state.personalDataLabel}
-          lastPersonalDataLabel={this.state.lastPersonalDataLabel}
-          handleJoinShareIdChange={this.handleJoinShareIdChange}
-          handleDataLabelChange={this.handleDataLabelChange}
-          joinShare={this.joinShare}
+        <JoinOtherTableOptionsPage
           updateState={this.setState}
         />
       )
@@ -108,25 +112,46 @@ export default class App extends Component {
           updateState={this.setState}
         />
       )
-    } else if (mergeTable) {
-      const availableContextOptions = availableDataContexts.map((dc: DataContext) =>
-        <option key={dc.name} value={dc.name}>{dc.title}</option>
-      );
-      const selectedContextOption = selectedDataContext || lastSelectedDataContext || kNewSharedTable;
-      return (
-        <MergeTablePage
-          selectedContextOption={selectedContextOption}
-          availableContextOptions={availableContextOptions}
-          joinShareId={this.state.joinShareId}
-          personalDataLabel={this.state.personalDataLabel}
-          lastPersonalDataLabel={this.state.lastPersonalDataLabel}
-          handleDataContextChange={this.handleDataContextChange}
-          handleJoinShareIdChange={this.handleJoinShareIdChange}
-          handleDataLabelChange={this.handleDataLabelChange}
-          initiateShare={this.initiateShare}
-          updateState={this.setState}
-        />
-      )
+    } else if (joinAndMergeTable) {
+        return (
+          <JoinAndMergeTableForm
+            joinShareId={this.state.joinShareId}
+            personalDataLabel={this.state.personalDataLabel}
+            lastPersonalDataLabel={this.state.lastPersonalDataLabel}
+            handleJoinShareIdChange={this.handleJoinShareIdChange}
+            handleDataLabelChange={this.handleDataLabelChange}
+            handleDataContextChange={this.handleDataContextChange}
+            joinShare={this.joinShare}
+            updateState={this.setState}
+            selectedContextOption={selectedContextOption}
+            availableContextOptions={availableContextOptions}
+           />
+       )
+      } else if (joinWithoutMerging) {
+        return (
+          <JoinWithoutMerging
+            joinShareId={this.state.joinShareId}
+            personalDataLabel={this.state.personalDataLabel}
+            lastPersonalDataLabel={this.state.lastPersonalDataLabel}
+            handleJoinShareIdChange={this.handleJoinShareIdChange}
+            handleDataLabelChange={this.handleDataLabelChange}
+            joinShare={this.joinShare}
+            updateState={this.setState}
+          />
+        )
+      } else if (shareExistingTable) {
+        return (
+          <ShareExistingTablePage
+            selectedContextOption={selectedContextOption}
+            availableContextOptions={availableContextOptions}
+            personalDataLabel={this.state.personalDataLabel}
+            lastPersonalDataLabel={this.state.lastPersonalDataLabel}
+            handleDataContextChange={this.handleDataContextChange}
+            handleDataLabelChange={this.handleDataLabelChange}
+            initiateShare={this.initiateShare}
+            updateState={this.setState}
+          />
+        )
     } else if (createNewTable) {
       return (
         <CreateNewTablePage

src/constants.ts

@@ -19,15 +19,24 @@ export const kNewSharedTable = "new-table";
 export const kNewDataContextTitle = "Collaborative Table";
 
 
-export const ALLOW_OTHERS_TO_JOIN = "Allow others to join your table";
-export const JOIN_SOMEONE_ELSES_TABLE = "Join someone else's table";
-export const ENTER_CODE_TO_JOIN_GROUP = "Enter the code to join another group:";
-export const PROVIDE_NAME_OR_LABEL = "Provide a name or label for your data:";
-export const MERGE_TABLES = "Merge one of your tables with the table being joined";
-export const CREATE_NEW_TABLE = "Create new table";
 export const OR = "or";
-export const CANCEL = "cancel";
-export const SELECT_TABLE_TO_MERGE = "Select a table to merge with the shared group:";
+export const BACK = "back";
+
+export const BEGIN_SHARING_TABLE = "Begin sharing a table";
+export const JOIN_SOMEONE_ELSES_TABLE = "Join someone else's table";
+
+export const SHARE_EXISTING_TABLE = "Share an existing table";
+export const CREATE_NEW_TABLE = "Create a new table to share";
+
+export const SELECT_TABLE_TO_SHARE = "Select a table to share:";
+export const ENTER_NAME_FOR_TABLE = "Enter a name for the table:";
+
+export const JOIN_AND_MERGE = "Join and merge an existing table";
+export const JOIN_WITHOUT_MERGING = "Join without merging an existing table";
+
+export const SELECT_TABLE_TO_MERGE = "Select a table to merge:";
 export const ENTER_CODE_OF_GROUP = "Enter the code of the group to join:";
+
+export const PROVIDE_NAME_OR_LABEL = "Provide a name or label for your data:";
+
 export const BEGIN_COLLABORATION = "Begin Collaboration";
-export const ENTER_NAME_FOR_TABLE = "Enter a name for the table:";

src/types.ts

@@ -13,7 +13,9 @@ export interface IState extends ISaveState {
   showJoinShareError: boolean;
   allowOthersToJoin?: boolean;
   joinOtherTable?: boolean;
-  mergeTable?: boolean;
+  shareExistingTable?: boolean;
   createNewTable?: boolean;
+  joinAndMergeTable?: boolean;
+  joinWithoutMerging?: boolean;
   newTableName?: string;
 }

src/ui-pages/allow-others-to-join-page.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { CANCEL, CREATE_NEW_TABLE, MERGE_TABLES, OR } from "../constants";
+import { BACK, CREATE_NEW_TABLE, SHARE_EXISTING_TABLE, OR } from "../constants";
 import { IState } from "../types";
 
 interface AllowOthersToJoinPageProps {
@@ -10,8 +10,8 @@ export const AllowOthersToJoinPage = ({updateState}: AllowOthersToJoinPageProps)
   return (
     <div className="form-container button-stack">
       <div className="option-1">
-        <button onClick={() => updateState({ mergeTable: true })}>
-          {MERGE_TABLES}
+        <button onClick={() => updateState({ shareExistingTable: true })}>
+          {SHARE_EXISTING_TABLE}
         </button>
       </div>
       <div className="separator">
@@ -27,8 +27,8 @@ export const AllowOthersToJoinPage = ({updateState}: AllowOthersToJoinPageProps)
       <div className="button-row">
         <button
           className="cancel-button"
-          onClick={() => updateState({ allowOthersToJoin: false })}>
-          {CANCEL}
+          onClick={() => updateState({ allowOthersToJoin: false, shareExistingTable: false, createNewTable: false })}>
+          {BACK}
         </button>
       </div>
     </div>

src/ui-pages/create-new-table-page.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { BEGIN_COLLABORATION, CANCEL, ENTER_NAME_FOR_TABLE, PROVIDE_NAME_OR_LABEL } from "../constants";
+import { BEGIN_COLLABORATION, BACK, ENTER_NAME_FOR_TABLE, PROVIDE_NAME_OR_LABEL } from "../constants";
 import { IState } from "../types";
 
 interface CreateNewTablePageProps {
@@ -32,7 +32,7 @@ export const CreateNewTablePage = (props: CreateNewTablePageProps) => {
         <button
           className="cancel-button"
           onClick={() => updateState({ createNewTable: false })}>
-          {CANCEL}
+          {BACK}
         </button>
         <button disabled={!personalDataLabel || !newTableName} onClick={initiateShare}>{BEGIN_COLLABORATION}</button>
       </div>

src/ui-pages/first-page.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IState } from '../types';
-import { ALLOW_OTHERS_TO_JOIN, JOIN_SOMEONE_ELSES_TABLE, OR } from '../constants';
+import { BEGIN_SHARING_TABLE, JOIN_SOMEONE_ELSES_TABLE, OR } from '../constants';
 
 interface FirstPageProps {
   updateState: (state: Partial<IState>) => void;
@@ -11,7 +11,7 @@ export const FirstPage = ({updateState}: FirstPageProps) => {
     <div className="form-container button-stack">
       <div className="option-1">
         <button className="option-1" onClick={() => updateState({ allowOthersToJoin: true })}>
-          {ALLOW_OTHERS_TO_JOIN}
+          {BEGIN_SHARING_TABLE}
         </button>
       </div>
       <div className="separator">

src/ui-pages/merge-table-page.tsx → src/ui-pages/join-and-merge-table.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { BEGIN_COLLABORATION, CANCEL, ENTER_CODE_OF_GROUP, PROVIDE_NAME_OR_LABEL,
-  SELECT_TABLE_TO_MERGE } from "../constants";
+import { BEGIN_COLLABORATION, BACK, PROVIDE_NAME_OR_LABEL,
+  ENTER_CODE_OF_GROUP, SELECT_TABLE_TO_MERGE} from "../constants";
 import { IState } from "../types";
 
 interface MergeTablePageProps {
@@ -12,14 +12,14 @@ interface MergeTablePageProps {
   handleDataContextChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
   handleJoinShareIdChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   handleDataLabelChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  initiateShare: () => void;
+  joinShare: () => void;
   updateState: (state: Partial<IState>) => void;
 }
 
-export const MergeTablePage = (props: MergeTablePageProps) => {
-  const { selectedContextOption, availableContextOptions, joinShareId, personalDataLabel,
-    lastPersonalDataLabel, handleDataContextChange, handleJoinShareIdChange, handleDataLabelChange,
-    initiateShare, updateState } = props;
+export const JoinAndMergeTableForm = (props: MergeTablePageProps) => {
+  const { selectedContextOption, availableContextOptions, personalDataLabel,
+    lastPersonalDataLabel, handleDataContextChange, handleDataLabelChange,
+    joinShare, joinShareId, updateState, handleJoinShareIdChange } = props;
   return (
     <div className="form-container">
       <div className="select-stack">
@@ -28,24 +28,24 @@ export const MergeTablePage = (props: MergeTablePageProps) => {
           {availableContextOptions}
         </select>
       </div>
-      <div className="input-stack">
-        <div>{ENTER_CODE_OF_GROUP}</div>
-        <input type="text" value={joinShareId} onChange={handleJoinShareIdChange} />
-      </div>
       <div className="input-stack">
         <div>{PROVIDE_NAME_OR_LABEL}</div>
         <input type="text" value={personalDataLabel} placeholder={lastPersonalDataLabel}
           onChange={handleDataLabelChange} />
       </div>
+      <div className="input-stack">
+        <div>{ENTER_CODE_OF_GROUP}</div>
+        <input type="text" value={joinShareId} onChange={handleJoinShareIdChange} />
+      </div>
       <div className="button-row">
         <button
           className="cancel-button"
-          onClick={() => updateState({ mergeTable: false })}>
-          {CANCEL}
+          onClick={() => updateState({ joinAndMergeTable: false })}>
+          {BACK}
         </button>
         <button
-          disabled={!selectedContextOption || !personalDataLabel || !joinShareId}
-          onClick={initiateShare}>{BEGIN_COLLABORATION}
+          disabled={!selectedContextOption || !personalDataLabel}
+          onClick={joinShare}>{BEGIN_COLLABORATION}
         </button>
       </div>
     </div>

src/ui-pages/join-other-table-options-page.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { BACK, JOIN_AND_MERGE, OR, JOIN_WITHOUT_MERGING } from "../constants";
+import { IState } from "../types";
+
+interface AllowOthersToJoinPageProps {
+  updateState: (state: Partial<IState>) => void;
+}
+
+export const JoinOtherTableOptionsPage = ({updateState}: AllowOthersToJoinPageProps) => {
+  return (
+    <div className="form-container button-stack">
+      <div className="option-1">
+        <button onClick={() => updateState({ joinAndMergeTable: true })}>
+          {JOIN_AND_MERGE}
+        </button>
+      </div>
+      <div className="separator">
+        <div className="separator-line" />
+        <div>{OR}</div>
+        <div className="separator-line" />
+      </div>
+      <div className="option-2">
+        <button onClick={() => updateState({ joinWithoutMerging: true })}>
+          {JOIN_WITHOUT_MERGING}
+        </button>
+      </div>
+      <div className="button-row">
+        <button
+          className="cancel-button"
+          onClick={() => updateState({ joinOtherTable: false, joinAndMergeTable: false, joinWithoutMerging: false })}>
+          {BACK}
+        </button>
+      </div>
+    </div>
+  )
+};

src/ui-pages/join-other-table.tsx → src/ui-pages/join-without-merging.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { IState } from "../types";
-import { CANCEL, PROVIDE_NAME_OR_LABEL, BEGIN_COLLABORATION, ENTER_CODE_TO_JOIN_GROUP } from "../constants";
+import { BACK, PROVIDE_NAME_OR_LABEL, BEGIN_COLLABORATION, ENTER_CODE_OF_GROUP } from "../constants";
 
-interface JoinOtherTableProps {
+interface JoinWithoutMergingProps {
   joinShareId: string;
   personalDataLabel: string;
   lastPersonalDataLabel: string;
@@ -12,25 +12,25 @@ interface JoinOtherTableProps {
   updateState: (state: Partial<IState>) => void;
 }
 
-export const JoinOtherTablePage = (props: JoinOtherTableProps) => {
+export const JoinWithoutMerging = (props: JoinWithoutMergingProps) => {
   const { joinShareId, personalDataLabel, lastPersonalDataLabel, handleJoinShareIdChange,
     handleDataLabelChange, joinShare, updateState } = props;
   return (
     <div className="form-container">
-      <div className="input-stack">
-        <div>{ENTER_CODE_TO_JOIN_GROUP}</div>
-        <input type="text" value={joinShareId} onChange={handleJoinShareIdChange} />
-      </div>
       <div className="input-stack">
         <div>{PROVIDE_NAME_OR_LABEL}</div>
         <input type="text" value={personalDataLabel} placeholder={lastPersonalDataLabel}
           onChange={handleDataLabelChange} />
       </div>
+      <div className="input-stack">
+        <div>{ENTER_CODE_OF_GROUP}</div>
+        <input type="text" value={joinShareId} onChange={handleJoinShareIdChange} />
+      </div>
       <div className="button-row">
         <button
           className="cancel-button"
-          onClick={() => updateState({ joinOtherTable: false })}>
-            {CANCEL}
+          onClick={() => updateState({ joinWithoutMerging: false })}>
+            {BACK}
         </button>
         <button disabled={!joinShareId || !personalDataLabel} onClick={joinShare}>{BEGIN_COLLABORATION}</button>
       </div>