Fix the UI user flow of selecting custom teanant on tenant switch pan…

…el (#1112) Signed-off-by: Ryan Liang <[email protected]> Signed-off-by: Ryan Liang <[email protected]>
opensearch-project · Oct 4, 2022 · 3bfd7c5 · 3bfd7c5
1 parent bf5691f
commit 3bfd7c5
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/public/apps/account/tenant-switch-panel.tsx b/public/apps/account/tenant-switch-panel.tsx
@@ -232,6 +232,9 @@ export function TenantSwitchPanel(props: TenantSwitchPanelProps) {
     }
   };
 
+  const invalidCustomTenant =
+    tenantSwitchRadioIdSelected === CUSTOM_TENANT_RADIO_ID && !selectedCustomTenantOption[0];
+
   let content;
 
   if (isMultiTenancyEnabled) {
@@ -249,6 +252,7 @@ export function TenantSwitchPanel(props: TenantSwitchPanelProps) {
           In current EUI if put into the child of radio option, clicking in the combo box will not
           show the drop down list since the radio option consumes the click event. */}
         <EuiComboBox
+          placeholder="Select a custom tenant"
           options={customTenantOptions}
           singleSelection={{ asPlainText: true }}
           selectedOptions={selectedCustomTenantOption}
@@ -297,8 +301,8 @@ export function TenantSwitchPanel(props: TenantSwitchPanelProps) {
 
           <EuiButton
             data-test-subj="confirm"
-            fill
-            disabled={!isMultiTenancyEnabled}
+            fill={isMultiTenancyEnabled && !invalidCustomTenant}
+            disabled={!isMultiTenancyEnabled || invalidCustomTenant}
             onClick={handleTenantConfirmation}
           >
             Confirm

diff --git a/public/apps/account/test/__snapshots__/tenant-switch-panel.test.tsx.snap b/public/apps/account/test/__snapshots__/tenant-switch-panel.test.tsx.snap
@@ -76,6 +76,7 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
             },
           ]
         }
+        placeholder="Select a custom tenant"
         selectedOptions={Array []}
         singleSelection={
           Object {
@@ -190,6 +191,7 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
             },
           ]
         }
+        placeholder="Select a custom tenant"
         selectedOptions={Array []}
         singleSelection={
           Object {
@@ -304,6 +306,7 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
             },
           ]
         }
+        placeholder="Select a custom tenant"
         selectedOptions={Array []}
         singleSelection={
           Object {
@@ -418,6 +421,7 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
             },
           ]
         }
+        placeholder="Select a custom tenant"
         selectedOptions={Array []}
         singleSelection={
           Object {
@@ -532,6 +536,7 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
             },
           ]
         }
+        placeholder="Select a custom tenant"
         selectedOptions={Array []}
         singleSelection={
           Object {