Remote cell - help box (#359)

livebook-dev · Oct 13, 2023 · baefc08 · baefc08
1 parent e9f64e4
commit baefc08
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 1 deletion.
diff --git a/lib/assets/remote_execution_cell/main.css b/lib/assets/remote_execution_cell/main.css
@@ -67,7 +67,7 @@ button {
 
 .input--xs {
   width: auto;
-  max-width: 100px;
+  max-width: 110px;
 }
 
 .input--text {
@@ -202,3 +202,71 @@ select.input {
 .hidden-checkbox:hover {
   cursor: pointer;
 }
+
+.icon-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+  color: var(--gray-500);
+  line-height: 1;
+}
+
+.icon-button:hover {
+  color: var(--gray-900);
+}
+
+.icon-button:focus {
+  outline: none;
+}
+
+.icon-button:disabled {
+  color: var(--gray-300);
+  cursor: default;
+}
+
+a.icon-button {
+  text-decoration: none;
+}
+
+a.icon-button img {
+  height: 1.3rem;
+}
+
+.ri {
+  font-size: 1.25rem;
+  vertical-align: middle;
+  line-height: 1;
+}
+
+.help-section {
+  padding: 16px;
+  font-size: 0.875rem;
+  line-height: 1.5em;
+  color: var(--gray-700);
+  border: solid 1px var(--gray-300);
+  background-color: rgba(248, 250, 252, 0.3);
+}
+
+.help-section > *:not(:first-child) {
+  margin-top: 20px;
+}
+
+.help-section h3 {
+  margin-bottom: 8px;
+  font-size: 1.125em;
+}
+
+.help-section a {
+  color: var(--gray-900);
+  font-weight: 500;
+  text-decoration: underline;
+}
+
+.help-section a:hover {
+  text-decoration: none;
+}
diff --git a/lib/assets/remote_execution_cell/main.js b/lib/assets/remote_execution_cell/main.js
@@ -4,6 +4,9 @@ export function init(ctx, payload) {
   ctx.importCSS(
     "https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap"
   );
+  ctx.importCSS(
+    "https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.min.css"
+  );
   ctx.importCSS("main.css");
 
   const BaseInput = {
@@ -211,6 +214,12 @@ export function init(ctx, payload) {
             inputClass="input input--xs"
             :inline
           />
+          <button type="button" @click="toggleHelpBox" class="icon-button grow">
+            <i class="ri ri-questionnaire-line" aria-hidden="true"></i>
+          </button>
+        </div>
+        <div class="help-section" v-if="showHelpBox">
+          <p>The Erlang/OTP version of both nodes need to match.</p>
         </div>
       </form>
     </div>
@@ -219,6 +228,7 @@ export function init(ctx, payload) {
     data() {
       return {
         fields: payload.fields,
+        showHelpBox: false,
       };
     },
 
@@ -238,6 +248,9 @@ export function init(ctx, payload) {
           : this.fields["cookie"];
         ctx.setSmartCellEditorIntellisenseNode(node, cookie);
       },
+      toggleHelpBox() {
+        this.showHelpBox = !this.showHelpBox;
+      },
     },
 
     mounted() {