Show message if there are no available contexts to share/merge.

src/App.css

@@ -47,6 +47,11 @@
   color: red;
 }
 
+.App .warning {
+  color: red;
+  font-style: italic;
+}
+
 input {
   height: 16px;
   border: 1px solid var(--teal);

src/constants.ts

@@ -40,3 +40,6 @@ 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 NO_TABLES_TO_MERGE = "You don't have any tables to merge. Create a new one or import a table to continue.";
+export const NO_TABLES_TO_SHARE = "You don't have any tables to share. Create a new one or import a table to continue.";

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { BEGIN_COLLABORATION, BACK, PROVIDE_NAME_OR_LABEL,
-  ENTER_CODE_OF_GROUP, SELECT_TABLE_TO_MERGE} from "../constants";
+  ENTER_CODE_OF_GROUP, SELECT_TABLE_TO_MERGE,
+  NO_TABLES_TO_MERGE} from "../constants";
 import { IState } from "../types";
 
 interface JoinAndMergeTableProps {
@@ -24,9 +25,14 @@ export const JoinAndMergeTable = (props: JoinAndMergeTableProps) => {
     <div className="form-container">
       <div className="select-stack">
         <div>{SELECT_TABLE_TO_MERGE}</div>
-        <select value={selectedContextOption} onChange={handleDataContextChange}>
-          {availableContextOptions}
-        </select>
+        {availableContextOptions.length > 0
+            ? <select value={selectedContextOption} onChange={handleDataContextChange}>
+                {availableContextOptions}
+              </select>
+            : <div className="warning">
+                {NO_TABLES_TO_MERGE}
+              </div>
+          }
       </div>
       <div className="input-stack">
         <div>{PROVIDE_NAME_OR_LABEL}</div>

src/ui-pages/share-existing-table.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { BEGIN_COLLABORATION, BACK, PROVIDE_NAME_OR_LABEL, SELECT_TABLE_TO_SHARE } from "../constants";
+import { BEGIN_COLLABORATION, BACK, PROVIDE_NAME_OR_LABEL, SELECT_TABLE_TO_SHARE,
+  NO_TABLES_TO_SHARE } from "../constants";
 import { IState } from "../types";
 
 interface ShareExistingTableProps {
@@ -21,9 +22,14 @@ export const ShareExistingTable = (props: ShareExistingTableProps) => {
     <div className="form-container">
       <div className="select-stack">
         <div>{SELECT_TABLE_TO_SHARE}</div>
-        <select value={selectedContextOption} onChange={handleDataContextChange}>
-          {availableContextOptions}
-        </select>
+          {availableContextOptions.length > 0
+            ? <select value={selectedContextOption} onChange={handleDataContextChange}>
+                {availableContextOptions}
+              </select>
+            : <div className="warning">
+                {NO_TABLES_TO_SHARE}
+              </div>
+          }
       </div>
       <div className="input-stack">
         <div>{PROVIDE_NAME_OR_LABEL}</div>