Allow to hide tabs with variables

Author: engPabloMartinez

force-app/main/default/lwc/odFlowTabs/odFlowTabs.html

@@ -1,18 +1,20 @@
 <template>
   <lightning-tabset active-tab-value={theActiveTab} title={title} variant={variant}>
     <template for:each={theTabs} for:item="tab">
-      <lightning-tab
-        key={tab.value}
-        label={tab.label}
-        end-icon-name={tab.endIconName}
-        icon-name={tab.iconName}
-        class="slds-p-bottom--none slds-p-top--small border-none"
-        show-error-indicator={tab.hasError}
-        title={tab.label}
-        value={tab.value}
-        onactive={handleActive}
-      >
-      </lightning-tab>
+      <template lwc:if={tab.showTab}>
+        <lightning-tab
+          key={tab.value}
+          label={tab.label}
+          end-icon-name={tab.endIconName}
+          icon-name={tab.iconName}
+          class="slds-p-bottom--none slds-p-top--small border-none"
+          show-error-indicator={tab.isError}
+          title={tab.label}
+          value={tab.value}
+          onactive={handleActive}
+        >
+        </lightning-tab>
+      </template>
     </template>
   </lightning-tabset>
 </template>

force-app/main/default/lwc/odFlowTabs/odFlowTabs.js

@@ -25,7 +25,14 @@ export default class OD_FlowTabs extends LightningElement {
   // getter methods
   // =================================================================
   get theTabs() {
-    return JSON.parse(this.tabs);
+    const result = JSON.parse(this.tabs);
+
+    result.forEach((tab) => {
+      tab.isError = tab.hasError === 'true';
+      tab.showTab = !tab.hideTab || tab.hideTab !== 'true';
+    });
+
+    return result;
   }
 
   _doDispatchEvent() {

force-app/main/default/lwc/odFlowTabs/odFlowTabs.js-meta.xml

@@ -30,4 +30,4 @@
                 description="Sets a specific tab to open by default using a string that matches a tab's value string. If not used, the first tab opens by default." />
         </targetConfig>
     </targetConfigs>
-</LightningComponentBundle>
+</LightningComponentBundle>

force-app/main/default/lwc/odFlowTabsConfigurationEditor/odFlowTabsConfigurationEditor.js

@@ -16,7 +16,7 @@ export default class OD_FlowTabsConfigurationEditor extends LightningElement {
       helpText: 'Displays tooltip text when the mouse moves over the tabset.',
     },
     selectedTab: {
-      label: 'Selected Tab',
+      label: 'Active Tab',
       helpText:
         "Sets a specific tab to open by default using a string that matches a tab's value string. If not used, the first tab opens by default.",
     },
@@ -186,7 +186,7 @@ export default class OD_FlowTabsConfigurationEditor extends LightningElement {
     const resultModal = await FlowTabsConfigurationTabs.open({
       tabs: this.inputValues.tabs.value,
       builderContext: this.builderContext,
-      size: 'medium',
+      size: 'large',
     });
 
     if (resultModal) {

force-app/main/default/lwc/odFlowTabsConfigurationTabs/odFlowTabsConfigurationTabs.html

@@ -21,6 +21,7 @@
               <th class="slds-p-around--x-small" style="width: 250px">Title</th>
               <th class="slds-p-around--x-small" style="width: 150px">Icon Name</th>
               <th class="slds-p-around--x-small" style="width: 150px">End Icon Name</th>
+              <th class="slds-p-around--x-small" style="width: 200px">Hide Tab?</th>
               <th class="slds-p-around--x-small" style="width: 200px">
                 Variable Error
                 <lightning-helptext
@@ -88,15 +89,38 @@
                   </lightning-input>
                 </td>
                 <td>
-                  <template lwc:if={errorOptions.length}>
+                  <template lwc:if={booleanOptions.length}>
+                    <lightning-combobox
+                      class="slds-p-around--xx-small"
+                      name="hideTab"
+                      variant="label-hidden"
+                      value={tab.hideTab}
+                      data-value={tab.value}
+                      placeholder="Select...."
+                      options={booleanOptions}
+                      onchange={handleUpdateField}
+                    >
+                    </lightning-combobox>
+                  </template>
+                  <template lwc:else>
+                    <div class="slds-p-around--x-small">
+                      <lightning-formatted-text
+                        value="There are no Boolean variables, constants or formulas in the flow"
+                      >
+                      </lightning-formatted-text>
+                    </div>
+                  </template>
+                </td>
+                <td>
+                  <template lwc:if={booleanOptions.length}>
                     <lightning-combobox
                       class="slds-p-around--xx-small"
                       name="hasError"
                       variant="label-hidden"
                       value={tab.hasError}
                       data-value={tab.value}
                       placeholder="Select...."
-                      options={errorOptions}
+                      options={booleanOptions}
                       onchange={handleUpdateField}
                     >
                     </lightning-combobox>

force-app/main/default/lwc/odFlowTabsConfigurationTabs/odFlowTabsConfigurationTabs.js

@@ -21,7 +21,7 @@ export default class OD_FlowTabsConfigurationTabs extends LightningModal {
     return this.theTabs.length === 0;
   }
 
-  get errorOptions() {
+  get booleanOptions() {
     const result = [];
 
     // variables