Provide more guidance on enrollment token (#119296) (#119378)

* Provide more guidance on enrollment token

* Added suggestions from copy review

* Simplify copy

Co-authored-by: Thom Heymann <190132+thomheymann@users.noreply.github.com>

src/plugins/interactive_setup/public/cluster_configuration_form.tsx

@@ -12,6 +12,7 @@ import {
   EuiButtonEmpty,
   EuiCallOut,
   EuiCheckableCard,
+  EuiCodeBlock,
   EuiFieldPassword,
   EuiFieldText,
   EuiFlexGroup,
@@ -26,6 +27,7 @@ import {
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiPanel,
+  EuiPopover,
   EuiSpacer,
   EuiText,
   EuiTitle,
@@ -198,6 +200,11 @@ export const ClusterConfigurationForm: FunctionComponent<ClusterConfigurationFor
             })}
             error={form.errors.password}
             isInvalid={form.touched.password && !!form.errors.password}
+            helpText={
+              form.errors.username ? undefined : (
+                <ForgotPasswordPopover username={form.values.username} />
+              )
+            }
             fullWidth
           >
             <EuiFieldPassword
@@ -466,3 +473,47 @@ const CertificateChain: FunctionComponent<CertificateChainProps> = ({ certificat
     </>
   );
 };
+
+export interface ForgotPasswordPopoverProps {
+  username: string;
+}
+
+export const ForgotPasswordPopover: FunctionComponent<ForgotPasswordPopoverProps> = ({
+  username,
+}) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+  const button = (
+    <EuiLink onClick={() => setIsPopoverOpen((isOpen) => !isOpen)}>
+      <FormattedMessage
+        id="interactiveSetup.forgotPasswordPopover.buttonText"
+        defaultMessage="Forgot password?"
+      />
+    </EuiLink>
+  );
+
+  return (
+    <EuiPopover
+      button={button}
+      anchorPosition="rightCenter"
+      isOpen={isPopoverOpen}
+      closePopover={() => setIsPopoverOpen(false)}
+    >
+      <EuiText size="s" grow={false}>
+        <p>
+          <FormattedMessage
+            id="interactiveSetup.forgotPasswordPopover.helpText"
+            defaultMessage="To reset the password for the {username} user, run the following command from
+          the Elasticsearch installation directory:"
+            values={{
+              username: <strong>{username}</strong>,
+            }}
+          />
+        </p>
+        <EuiCodeBlock language="bash" paddingSize="m" isCopyable>
+          bin/elasticsearch-reset-password --username {username}
+        </EuiCodeBlock>
+      </EuiText>
+    </EuiPopover>
+  );
+};

src/plugins/interactive_setup/public/enrollment_token_form.tsx

@@ -9,16 +9,20 @@
 import {
   EuiButton,
   EuiButtonEmpty,
+  EuiCodeBlock,
   EuiFlexGroup,
   EuiFlexItem,
   EuiForm,
   EuiFormRow,
+  EuiLink,
+  EuiPopover,
+  EuiPopoverFooter,
   EuiSpacer,
   EuiText,
   EuiTextArea,
 } from '@elastic/eui';
 import type { FunctionComponent } from 'react';
-import React from 'react';
+import React, { useState } from 'react';
 import useUpdateEffect from 'react-use/lib/useUpdateEffect';
 
 import { i18n } from '@kbn/i18n';
@@ -109,7 +113,6 @@ export const EnrollmentTokenForm: FunctionComponent<EnrollmentTokenFormProps> =
           <EuiSpacer />
         </>
       )}
-
       <EuiFormRow
         label={i18n.translate('interactiveSetup.enrollmentTokenForm.tokenLabel', {
           defaultMessage: 'Enrollment token',
@@ -120,12 +123,7 @@ export const EnrollmentTokenForm: FunctionComponent<EnrollmentTokenFormProps> =
           enrollmentToken ? (
             <EnrollmentTokenDetails token={enrollmentToken} />
           ) : (
-            <DocLink app="elasticsearch" doc="configuring-stack-security.html">
-              <FormattedMessage
-                id="interactiveSetup.enrollmentTokenForm.tokenHelpText"
-                defaultMessage="Where do I find this?"
-              />
-            </DocLink>
+            <EnrollmentTokenHelpPopover />
           )
         }
         fullWidth
@@ -226,3 +224,53 @@ export function compareAddresses(a: string, b: string) {
   }
   return 0;
 }
+
+export const EnrollmentTokenHelpPopover = () => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+  const button = (
+    <EuiLink onClick={() => setIsPopoverOpen((isOpen) => !isOpen)}>
+      <FormattedMessage
+        id="interactiveSetup.enrollmentTokenHelpPopover.buttonText"
+        defaultMessage="Where do I find this?"
+      />
+    </EuiLink>
+  );
+
+  return (
+    <EuiPopover
+      button={button}
+      anchorPosition="rightCenter"
+      isOpen={isPopoverOpen}
+      closePopover={() => setIsPopoverOpen(false)}
+    >
+      <EuiText size="s" grow={false}>
+        <p>
+          <FormattedMessage
+            id="interactiveSetup.enrollmentTokenHelpPopover.helpText"
+            defaultMessage="The enrollment token is automatically generated when you start Elasticsearch for the first
+          time. You might need to scroll back a bit in the terminal to view it."
+          />
+        </p>
+        <p>
+          <FormattedMessage
+            id="interactiveSetup.enrollmentTokenHelpPopover.commandHelpText"
+            defaultMessage="To generate a new enrollment token, run the following command from the Elasticsearch
+          installation directory:"
+          />
+        </p>
+        <EuiCodeBlock language="bash" paddingSize="m" isCopyable>
+          bin/elasticsearch-create-enrollment-token --scope kibana
+        </EuiCodeBlock>
+      </EuiText>
+      <EuiPopoverFooter>
+        <DocLink app="elasticsearch" doc="configuring-stack-security.html">
+          <FormattedMessage
+            id="interactiveSetup.enrollmentTokenHelpPopover.docLinkText"
+            defaultMessage="Learn how to set up Elastic."
+          />
+        </DocLink>
+      </EuiPopoverFooter>
+    </EuiPopover>
+  );
+};