[Fleet]: Add row button is available instead of Add another URL u…

…nder Edit Fleet Server flyout. (elastic#148164) Add row button is available instead of Add another URL under Edit Fleet Server flyout. Resolves elastic#146769 ### Before & After ![image](https://user-images.githubusercontent.com/50892465/211575153-b9b3e142-e03c-4c75-b8d0-64905e08b257.png) Co-authored-by: Kibana Machine <[email protected]>
jennypavlova · Jan 13, 2023 · 77d0e67 · 77d0e67
1 parent ed27c97
commit 77d0e67
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 1 deletion.
diff --git a/...c/applications/fleet/components/fleet_server_instructions/steps/add_fleet_server_host.tsx b/...c/applications/fleet/components/fleet_server_instructions/steps/add_fleet_server_host.tsx
@@ -163,6 +163,7 @@ export const AddFleetServerHostStepContent = ({
                     defaultMessage: 'Specify host URL',
                   }
                 )}
+                isUrl
               />
               {error && <EuiFormErrorText>{error}</EuiFormErrorText>}
             </>

diff --git a/...leet/public/applications/fleet/components/fleet_server_instructions/steps/get_started.tsx b/...leet/public/applications/fleet/components/fleet_server_instructions/steps/get_started.tsx
@@ -147,6 +147,7 @@ const GettingStartedStepContent: React.FunctionComponent<QuickStartCreateForm> =
                       defaultMessage: 'Specify host URL',
                     }
                   )}
+                  isUrl
                 />
                 {status === 'error' && <EuiFormErrorText>{error}</EuiFormErrorText>}
               </>

diff --git a/...fleet/public/applications/fleet/sections/settings/components/edit_output_flyout/index.tsx b/...fleet/public/applications/fleet/sections/settings/components/edit_output_flyout/index.tsx
@@ -184,6 +184,7 @@ export const EditOutputFlyout: React.FunctionComponent<EditOutputFlyoutProps> =
                 }
               )}
               {...inputs.elasticsearchUrlInput.props}
+              isUrl
             />
           )}
           {isLogstashOutput && (

diff --git a/...ublic/applications/fleet/sections/settings/components/fleet_server_hosts_flyout/index.tsx b/...ublic/applications/fleet/sections/settings/components/fleet_server_hosts_flyout/index.tsx
@@ -149,6 +149,7 @@ export const FleetServerHostsFlyout: React.FunctionComponent<FleetServerHostsFly
                     defaultMessage: 'Specify host URL',
                   }
                 )}
+                isUrl
               />
             </>
           </EuiFormRow>

diff --git a/.../public/applications/fleet/sections/settings/components/multi_row_input/index.stories.tsx b/.../public/applications/fleet/sections/settings/components/multi_row_input/index.stories.tsx
@@ -74,3 +74,27 @@ HostsInputDisabled.argTypes = {
     control: { type: 'object' },
   },
 };
+
+export const HostsInputUrl = () => {
+  const [value, setValue] = useState<string[]>([]);
+  return (
+    <div style={{ maxWidth: '350px' }}>
+      <Component
+        id="test-host-input"
+        helpText={'Host input help text'}
+        value={value}
+        onChange={setValue}
+        label={'Host input label'}
+        disabled={false}
+        isUrl={true}
+      />
+    </div>
+  );
+};
+
+HostsInputUrl.args = { value: ['https://test1.com', 'https://test2.com', 'https://test3.com'] };
+HostsInputUrl.argTypes = {
+  value: {
+    control: { type: 'object' },
+  },
+};
diff --git a/...ns/fleet/public/applications/fleet/sections/settings/components/multi_row_input/index.tsx b/...ns/fleet/public/applications/fleet/sections/settings/components/multi_row_input/index.tsx
@@ -42,6 +42,7 @@ export interface MultiRowInputProps {
   placeholder?: string;
   multiline?: boolean;
   sortable?: boolean;
+  isUrl?: boolean;
 }
 
 interface SortableTextFieldProps {
@@ -256,6 +257,7 @@ export const MultiRowInput: FunctionComponent<MultiRowInputProps> = ({
   placeholder,
   multiline = false,
   sortable = true,
+  isUrl,
 }) => {
   const [autoFocus, setAutoFocus] = useState(false);
   const value = useMemo(() => {
@@ -380,7 +382,14 @@ export const MultiRowInput: FunctionComponent<MultiRowInputProps> = ({
           iconType="plusInCircle"
           onClick={addRowHandler}
         >
-          <FormattedMessage id="xpack.fleet.multiRowInput.addRow" defaultMessage="Add row" />
+          {isUrl ? (
+            <FormattedMessage
+              id="xpack.fleet.multiRowInput.addAnotherUrl"
+              defaultMessage="Add another URL"
+            />
+          ) : (
+            <FormattedMessage id="xpack.fleet.multiRowInput.addRow" defaultMessage="Add row" />
+          )}
         </EuiButtonEmpty>
       </>
     </EuiFormRow>
-Original file line number
+Diff line change
@@ Expand Up / @@ -163,6 +163,7 @@ export const AddFleetServerHostStepContent = ({ @@
                         defaultMessage: 'Specify host URL',
                       }
                     )}
+                    isUrl
                   />
                   {error && <EuiFormErrorText>{error}</EuiFormErrorText>}
                 </>
@@ Expand Down @@