Address design feedback

elastic · Jul 7, 2023 · 852e990 · 852e990
1 parent 9b10044
commit 852e990
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 21 deletions.
diff --git a/...igation_embeddable/public/components/dashboard_link/dashboard_link_destination_picker.tsx b/...igation_embeddable/public/components/dashboard_link/dashboard_link_destination_picker.tsx
@@ -13,8 +13,6 @@ import React, { useEffect, useMemo, useState } from 'react';
 import {
   EuiBadge,
   EuiSpacer,
-  EuiFlexItem,
-  EuiFlexGroup,
   EuiHighlight,
   EuiSelectable,
   EuiFieldSearch,
@@ -27,11 +25,13 @@ import { DashboardLinkEmbeddableStrings } from './dashboard_link_strings';
 
 export const DashboardLinkDestinationPicker = ({
   setDestination,
+  setPlaceholder,
   currentDestination,
   parentDashboard,
   ...other
 }: {
   setDestination: (destination?: string) => void;
+  setPlaceholder: (placeholder?: string) => void;
   currentDestination?: string;
   parentDashboard?: DashboardContainer;
 }) => {
@@ -51,11 +51,18 @@ export const DashboardLinkDestinationPicker = ({
         return {
           data: dashboard,
           label: dashboard.attributes.title,
+          ...(dashboard.id === parentDashboardId
+            ? {
+                prepend: (
+                  <EuiBadge>{DashboardLinkEmbeddableStrings.getCurrentDashboardLabel()}</EuiBadge>
+                ),
+              }
+            : {}),
         } as EuiSelectableOption;
       }) ?? [];
 
     setDashboardListOptions(dashboardOptions);
-  }, [dashboardList, searchString]);
+  }, [dashboardList, parentDashboardId, searchString]);
 
   const debouncedSetSearch = useMemo(
     () =>
@@ -68,10 +75,12 @@ export const DashboardLinkDestinationPicker = ({
   useEffect(() => {
     if (selectedDashboard) {
       setDestination(selectedDashboard.id);
+      setPlaceholder(selectedDashboard.attributes.title);
     } else {
       setDestination(undefined);
+      setPlaceholder(undefined);
     }
-  }, [selectedDashboard, setDestination]);
+  }, [selectedDashboard, setDestination, setPlaceholder]);
 
   /* {...other} is needed so all inner elements are treated as part of the form */
   return (
@@ -99,18 +108,7 @@ export const DashboardLinkDestinationPicker = ({
           setDashboardListOptions(newOptions);
         }}
         renderOption={(option) => {
-          return (
-            <EuiFlexGroup gutterSize="s" alignItems="center">
-              <EuiFlexItem grow={false}>
-                <EuiHighlight search={searchString}>{option.label}</EuiHighlight>
-              </EuiFlexItem>
-              {option.id === parentDashboardId && (
-                <EuiFlexItem grow={false}>
-                  <EuiBadge>{DashboardLinkEmbeddableStrings.getCurrentDashboardLabel()}</EuiBadge>
-                </EuiFlexItem>
-              )}
-            </EuiFlexGroup>
-          );
+          return <EuiHighlight search={searchString}>{option.label}</EuiHighlight>;
         }}
       >
         {(list) => list}

diff --git a/...avigation_embeddable/public/components/external_link/external_link_destination_picker.tsx b/...avigation_embeddable/public/components/external_link/external_link_destination_picker.tsx
@@ -16,10 +16,12 @@ const isValidUrl =
 
 export const ExternalLinkDestinationPicker = ({
   setDestination,
+  setPlaceholder,
   currentDestination,
   ...other
 }: {
   setDestination: (destination?: string) => void;
+  setPlaceholder: (placeholder?: string) => void;
   currentDestination?: string;
 }) => {
   const [validUrl, setValidUrl] = useState<boolean>(true);
@@ -35,6 +37,7 @@ export const ExternalLinkDestinationPicker = ({
           const isValid = isValidUrl.test(url);
           setValidUrl(isValid);
           setDestination(isValid ? url : undefined);
+          setPlaceholder(isValid ? url : undefined);
         }}
       />
     </div>

diff --git a/src/plugins/navigation_embeddable/public/components/navigation_embeddable_link_editor.tsx b/src/plugins/navigation_embeddable/public/components/navigation_embeddable_link_editor.tsx
@@ -43,13 +43,14 @@ export const NavigationEmbeddableLinkEditor = ({
   onClose,
   parentDashboard,
 }: {
-  onClose: (closeBoth: boolean) => void;
   onSave: (newLink: NavigationEmbeddableLink) => void;
+  onClose: (closeBoth: boolean) => void;
   parentDashboard?: DashboardContainer;
 }) => {
   const [selectedLinkType, setSelectedLinkType] = useState<NavigationLinkType>(DASHBOARD_LINK_TYPE);
   const [linkLabel, setLinkLabel] = useState<string>('');
   const [linkDestination, setLinkDestination] = useState<string | undefined>();
+  const [linkLabelPlaceholder, setLinkLabelPlaceholder] = useState<string | undefined>();
 
   const linkTypes: EuiRadioGroupOption[] = useMemo(() => {
     return ([DASHBOARD_LINK_TYPE, EXTERNAL_LINK_TYPE] as NavigationLinkType[]).map((type) => {
@@ -90,12 +91,14 @@ export const NavigationEmbeddableLinkEditor = ({
         </EuiButtonEmpty>
       </EuiFlyoutHeader>
       <EuiFlyoutBody>
-        <EuiForm component="form">
+        <EuiForm component="form" fullWidth>
           <EuiFormRow label={NavEmbeddableStrings.editor.linkEditor.getLinkTypePickerLabel()}>
             <EuiRadioGroup
               options={linkTypes}
               idSelected={selectedLinkType}
               onChange={(id) => {
+                setLinkDestination(undefined);
+                setLinkLabelPlaceholder(undefined);
                 setSelectedLinkType(id as NavigationLinkType);
               }}
             />
@@ -104,21 +107,26 @@ export const NavigationEmbeddableLinkEditor = ({
           <EuiFormRow label={NavEmbeddableStrings.editor.linkEditor.getLinkDestinationLabel()}>
             {selectedLinkType === DASHBOARD_LINK_TYPE ? (
               <DashboardLinkDestinationPicker
+                parentDashboard={parentDashboard}
                 setDestination={setLinkDestination}
                 currentDestination={linkDestination}
-                parentDashboard={parentDashboard}
+                setPlaceholder={setLinkLabelPlaceholder}
               />
             ) : (
               <ExternalLinkDestinationPicker
                 setDestination={setLinkDestination}
                 currentDestination={linkDestination}
+                setPlaceholder={setLinkLabelPlaceholder}
               />
             )}
           </EuiFormRow>
 
           <EuiFormRow label={NavEmbeddableStrings.editor.linkEditor.getLinkTextLabel()}>
             <EuiFieldText
-              placeholder={NavEmbeddableStrings.editor.linkEditor.getLinkTextPlaceholder()}
+              placeholder={
+                linkLabelPlaceholder ||
+                NavEmbeddableStrings.editor.linkEditor.getLinkTextPlaceholder()
+              }
               value={linkLabel}
               onChange={(e) => {
                 setLinkLabel(e.target.value);

diff --git a/src/plugins/navigation_embeddable/public/components/navigation_embeddable_strings.ts b/src/plugins/navigation_embeddable/public/components/navigation_embeddable_strings.ts
@@ -47,7 +47,7 @@ export const NavEmbeddableStrings = {
         }),
       getLinkTextLabel: () =>
         i18n.translate('navigationEmbeddable.linkEditor.linkTextLabel', {
-          defaultMessage: 'Text',
+          defaultMessage: 'Text (optional)',
         }),
       getLinkTextPlaceholder: () =>
         i18n.translate('navigationEmbeddable.linkEditor.linkTextPlaceholder', {