From 73fac8e1d7c15b78745ba72c41872a3dd8e6be30 Mon Sep 17 00:00:00 2001
From: Ryan Rehman <ryanrehman99@gmail.com>
Date: Tue, 7 Jul 2020 23:18:59 +0530
Subject: [PATCH] toggler: Allow skipping over disabled tabs.

This commit allows skipping over any disabled tabs
that are in the middle when using the left or right
arrow keys.

We also add `enable_tab` to the `components` API.
---
 frontend_tests/node_tests/components.js | 13 ++++++++++
 static/js/components.js                 | 32 +++++++++++++++++++------
 2 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/frontend_tests/node_tests/components.js b/frontend_tests/node_tests/components.js
index 40d2ed7411..223a74f1d9 100644
--- a/frontend_tests/node_tests/components.js
+++ b/frontend_tests/node_tests/components.js
@@ -214,6 +214,19 @@ run_test("basics", () => {
     keydown_f.call(tabs[focused_tab], LEFT_KEY);
     assert.equal(widget.value(), "translated: Keyboard shortcuts");
 
+    callback_args = undefined;
+    widget.disable_tab("message-formatting");
+
+    keydown_f.call(tabs[focused_tab], RIGHT_KEY);
+    assert.equal(widget.value(), "translated: Search operators");
+
+    callback_args = undefined;
+
+    keydown_f.call(tabs[focused_tab], LEFT_KEY);
+    assert.equal(widget.value(), "translated: Keyboard shortcuts");
+
+    widget.enable_tab("message-formatting");
+
     callback_args = undefined;
 
     click_f.call(tabs[1]);
diff --git a/static/js/components.js b/static/js/components.js
index 5a11559e86..fadf47f617 100644
--- a/static/js/components.js
+++ b/static/js/components.js
@@ -52,10 +52,11 @@ exports.toggle = function (opts) {
         idx: -1,
     };
 
+    // Returns false if the requested tab is disabled.
     function select_tab(idx) {
         const elem = meta.$ind_tab.eq(idx);
         if (elem.hasClass("disabled")) {
-            return;
+            return false;
         }
         meta.$ind_tab.removeClass("selected");
 
@@ -69,19 +70,28 @@ exports.toggle = function (opts) {
         if (!opts.child_wants_focus) {
             elem.trigger("focus");
         }
+        return true;
     }
 
     function maybe_go_left() {
-        if (meta.idx > 0) {
-            select_tab(meta.idx - 1);
-            return true;
+        // Select the first non-disabled tab to the left, if any.
+        let i = 1;
+        while (meta.idx - i >= 0) {
+            if (select_tab(meta.idx - i)) {
+                return true;
+            }
+            i += 1;
         }
     }
 
     function maybe_go_right() {
-        if (meta.idx < opts.values.length - 1) {
-            select_tab(meta.idx + 1);
-            return true;
+        // Select the first non-disabled tab to the right, if any.
+        let i = 1;
+        while (meta.idx + i <= opts.values.length - 1) {
+            if (select_tab(meta.idx + i)) {
+                return true;
+            }
+            i += 1;
         }
     }
 
@@ -106,6 +116,7 @@ exports.toggle = function (opts) {
     })();
 
     const prototype = {
+        // Skip disabled tabs and go to the next one.
         maybe_go_left,
         maybe_go_right,
 
@@ -116,6 +127,13 @@ exports.toggle = function (opts) {
             meta.$ind_tab.eq(idx).addClass("disabled");
         },
 
+        enable_tab(name) {
+            const value = opts.values.find((o) => o.key === name);
+
+            const idx = opts.values.indexOf(value);
+            meta.$ind_tab.eq(idx).removeClass("disabled");
+        },
+
         value() {
             if (meta.idx >= 0) {
                 return opts.values[meta.idx].label;