Improve text on onboarding welcome page. (#26834)

* Improve descriptions on onboarding welcome page.

* Add temporary link to community pages.

* Improve button alignment

* Update test.

Author: linuspahl

graylog2-web-interface/src/components/welcome/FirstUseWelcome.test.tsx

@@ -36,10 +36,10 @@ beforeEach(() => {
 });
 
 describe('FirstUseWelcome', () => {
-  it('links the "Set up Collector" button to the collectors overview', async () => {
+  it('links the "Enroll Collector" button to the collectors overview', async () => {
     render(<FirstUseWelcome />);
 
-    const link = await screen.findByRole('link', { name: /Set up Collector/i });
+    const link = await screen.findByRole('link', { name: /Enroll Collector/i });
 
     expect(link).toHaveAttribute('href', '/system/collectors');
   });
@@ -71,7 +71,7 @@ describe('FirstUseWelcome', () => {
 
     const links = screen.getAllByRole('link', { name: /continue/i });
 
-    expect(links[0]).toHaveAttribute('href', 'https://www.graylog.org');
+    expect(links[0]).toHaveAttribute('href', 'https://community.graylog.org/');
     expect(links[0]).toHaveAttribute('target', '_blank');
   });
 
@@ -93,16 +93,16 @@ describe('FirstUseWelcome', () => {
     expect(mockDismiss).toHaveBeenCalledTimes(1);
   });
 
-  it('shows the "Set up Other Sources" section when not on cloud', () => {
+  it('shows the "Set up Input" section when not on cloud', () => {
     render(<FirstUseWelcome />);
 
-    expect(screen.getByRole('heading', { name: /set up other sources/i })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /set up input/i })).toBeInTheDocument();
   });
 
-  it('hides the "Set up Other Sources" section on cloud', () => {
+  it('hides the "Set up Input" section on cloud', () => {
     asMock(AppConfig.isCloud).mockReturnValue(true);
     render(<FirstUseWelcome />);
 
-    expect(screen.queryByRole('heading', { name: /set up other sources/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole('heading', { name: /set up input/i })).not.toBeInTheDocument();
   });
 });

graylog2-web-interface/src/components/welcome/FirstUseWelcome.tsx

@@ -50,6 +50,17 @@ const Container = styled.div(
 const ResourceTile = styled.div`
   margin: 0;
   flex: 1;
+  display: flex;
+`;
+
+const StyledResourceCol = styled(Col)`
+  display: flex;
+`;
+
+const ResourceTileBody = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
 `;
 
 const DismissButton = styled(Button)`
@@ -78,19 +89,19 @@ const resources: Resource[] = [
   {
     title: 'Quickstart Guide',
     description: 'End-to-end walkthrough to your first search in 10 minutes.',
-    link: 'https://www.graylog.org',
+    link: 'https://community.graylog.org/',
     iconName: 'acute',
   },
   {
-    title: 'Video: Sidecar',
-    description: 'Setup Install and configure your first collector agent.',
-    link: 'https://www.graylog.org',
+    title: 'Video: Collector',
+    description: 'Enroll and configure your first collector agent.',
+    link: 'https://community.graylog.org/',
     iconName: 'arrow_or_edge',
   },
   {
     title: 'Community Forum',
     description: 'Ask questions and browse solutions from other Graylog users.',
-    link: 'https://www.graylog.org',
+    link: 'https://community.graylog.org/',
     iconName: 'chat',
   },
 ];
@@ -141,11 +152,12 @@ const ResourceTileContent = styled.div(
   `,
 );
 
-const ActionsSection = styled(Section)``;
+const BoxActions = styled.div`
+  margin-top: auto;
+`;
 
-const BoxActions = styled.div(
+const SourcesBoxActions = styled(BoxActions)(
   ({ theme }) => css`
-    margin-top: auto;
     padding-top: ${theme.spacings.lg};
   `,
 );
@@ -191,21 +203,21 @@ const FirstUseWelcome = () => {
       <Row className={'content'}>
         <Col xs={12}>
           <ActionsHeadline>Where would you like to start?</ActionsHeadline>
-          <ActionsSection>
+          <Section>
             <StyledSectionBox
-              title="Set up Collectors"
+              title="Enroll Collector"
               titleAs="h3"
               header={
                 <>
-                  Set up Collectors <PreviewBadge />
+                  Enroll Collector <PreviewBadge />
                 </>
               }>
               <Description>
-                Install a lightweight agent on your servers, VMs, or containers. {productName} Sidecar manages the
-                configuration automatically.
+                The {productName} Collector simplifies getting data from your servers. Enroll this lightweight agent
+                once, then manage its configuration centrally from {productName}.
               </Description>
               <PlatformIcons />
-              <BoxActions>
+              <SourcesBoxActions>
                 <LinkContainer to={Routes.SYSTEM.COLLECTORS.OVERVIEW}>
                   <Button
                     bsStyle="primary"
@@ -215,15 +227,16 @@ const FirstUseWelcome = () => {
                         app_action_value: 'setup-collector-button',
                       })
                     }>
-                    Set up Collector
+                    Enroll Collector
                   </Button>
                 </LinkContainer>
-              </BoxActions>
+              </SourcesBoxActions>
             </StyledSectionBox>
             <HideOnCloud>
-              <StyledSectionBox title="Set up Other Sources" titleAs="h3">
+              <StyledSectionBox title="Set up Input" titleAs="h3">
                 <Description>
-                  Open a network listener that accepts logs directly over GELF, Syslog, Beats, or other protocols.
+                  Inputs are network listeners on your {productName} nodes that receive logs directly from your
+                  infrastructure over protocols like Syslog or GELF.
                 </Description>
                 <DataSourceIcons />
                 <BoxActions>
@@ -242,7 +255,7 @@ const FirstUseWelcome = () => {
                 </BoxActions>
               </StyledSectionBox>
             </HideOnCloud>
-          </ActionsSection>
+          </Section>
         </Col>
       </Row>
 
@@ -251,28 +264,30 @@ const FirstUseWelcome = () => {
       <Container>
         {resources.map((resource) => (
           <ResourceTile className="content" key={resource.title}>
-            <Col>
+            <StyledResourceCol>
               <ResourceTileContent>
                 <IconCard>
                   <Icon name={resource.iconName} />
                 </IconCard>
-                <div>
+                <ResourceTileBody>
                   <ResourceTitle>{resource.title}</ResourceTitle>
                   <ResourceDescription>{resource.description}</ResourceDescription>
-                  <ExternalLinkButton
-                    href={resource.link}
-                    bsSize="xs"
-                    onClick={() =>
-                      sendTelemetry(TELEMETRY_EVENT_TYPE.WELCOME.RESOURCE_CONTINUE_CLICKED, {
-                        app_section: 'welcome',
-                        app_action_value: resource.title,
-                      })
-                    }>
-                    Continue
-                  </ExternalLinkButton>
-                </div>
+                  <BoxActions>
+                    <ExternalLinkButton
+                      href={resource.link}
+                      bsSize="xs"
+                      onClick={() =>
+                        sendTelemetry(TELEMETRY_EVENT_TYPE.WELCOME.RESOURCE_CONTINUE_CLICKED, {
+                          app_section: 'welcome',
+                          app_action_value: resource.title,
+                        })
+                      }>
+                      Continue
+                    </ExternalLinkButton>
+                  </BoxActions>
+                </ResourceTileBody>
               </ResourceTileContent>
-            </Col>
+            </StyledResourceCol>
           </ResourceTile>
         ))}
       </Container>

graylog2-web-interface/src/logic/telemetry/Constants.ts

@@ -492,7 +492,7 @@ export const TELEMETRY_EVENT_TYPE = {
     NAVIGATED_FORWARD: 'Right Sidebar Navigated Forward',
   },
   WELCOME: {
-    SETUP_COLLECTOR_CLICKED: 'Welcome Setup Collector Clicked',
+    SETUP_COLLECTOR_CLICKED: 'Welcome Enroll Collector Clicked',
     CONFIGURE_INPUT_CLICKED: 'Welcome Configure Input Clicked',
     RESOURCE_CONTINUE_CLICKED: 'Welcome Resource Continue Clicked',
     DISMISS_CLICKED: 'Welcome Dismiss Clicked',