[Agent Builder] Landing Page - Change layout and add quick links

[zacharyparikh]

Summary

Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Documentation was added for features that require explanation or tutorials
• Unit or functional tests were updated or added to match the most common scenarios
• If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list
• This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The release_note:breaking label should be applied in these situations.
• Flaky Test Runner was used on any tests changed
• The PR description includes the appropriate Release Notes section, and the correct release_note:* label is applied per the guidelines
• Review the backport guidelines and apply applicable backport:* labels.

[zacharyparikh]

Hey @chrisbmar I wanted to ask you if these layout changes will break the auto scrolling? Just because the way I'm doing the NewConversationPrompt is it fully swaps in the resizable container on the first input, I can't tell if that is breaking your scrolling behavior or not.

[zacharyparikh]

@elasticmachine merge upstream

[zacharyparikh]

@elasticmachine merge upstream

[jedrazb]

tested locally works well! some nits

[jedrazb]

where is tailwind css when we need it ....

[zacharyparikh]

I've actually never used Tailwind in any larger project. Pretty used to using CSS-in-JS

[zacharyparikh]

Does tailwind have good utility classes for CSS grid? I can't imagine that's much easier to read/write is it?

[jedrazb]

Hmm can't we use https://eui.elastic.co/docs/components/display/empty-prompt/ here?

I believe this is default style for empty state pages in EUI cc @julianrosado

[julianrosado]

i don't think empty prompt will accommodate all this

[jedrazb]

for a11y

role=button
aria-label=...

this is just div so readers might nor recognize this as clickable?

[jedrazb]

also data-test-subj for full story analytics and synthetics would be good to have

[zacharyparikh]

So an EuiCard with an href does use an <a> element which has role="link", I think that will be picked up properly by screen readers even though it's not the parent element.

It seems like the EUI team has had some discussion around this elastic/eui#2521, citing this article https://inclusive-components.design/cards/

Based on these things, I'm inclined to leave it how it is? I can add the data-test-subj though.

[zacharyparikh]

Okay made some adjustments here:

• I'm using ul and li elements for the list and listitem roles to help group the markup a bit better
• Added the data-test-subj attributes to the list and to each item
• Added an aria-label for the list

[chrisbmar]

Left you a few comments to consider.

Why did you go with grid over flexbox here? I feel the grid syntax adds a lot of unnecessary complexity - curious about your thinking on the tradeoffs.

Nice work, I think it looks really great and is a much better landing page than before.

[zacharyparikh]

Why did you go with grid over flexbox here? I feel the grid syntax adds a lot of unnecessary complexity - curious about your thinking on the tradeoffs.

@chrisbmar
Not sure if you're referencing my usage for the larger ConversationGrid, the NewConversationPrompt, or both.

In general, I like to use flex when the items' layout is being controlled in one dimension, and CSS grid when the items' layout needs to be controlled in both dimensions.

Certainly you could achieve the layouts I built with flexbox rather than a grid, but I thought this layout was a good use case for grid. The CSS grid API is definitely a little bit complex, but I also think it's really powerful if you get used to using it.

Also! I didn't think about it, but maybe I should have used subgrids for this. It's a new feature and I'm used to having to support some older browsers, but maybe that's not the case for Kibana?

[zacharyparikh]

@chrisbmar For the grid template we could also do this, which is pretty cool

    grid-template-columns:
      [left] ${sideColumnWidth} [content-start] ${contentMarginWidth}
      [center] minmax(auto, ${centerColumnWidth})
      ${contentMarginWidth} [content-end right] ${sideColumnWidth};

Then the containers would be styled like

const leftContainerStyles = css`
  grid-column: left;
`;
const centerContainerStyles = css`
  grid-column: center;
`;
const rightContainerStyles = css`
  grid-column: right;
`;
const contentWithMarginsStyles = css`
  grid-column: content;
`;

grid-column: content; automatically expands to

grid-column-start: content-start;
grid-column-end: content-end;

Could do this if you think it makes the column areas clearer

[chrisbmar]

@chrisbmar For the grid template we could also do this, which is pretty cool

    grid-template-columns:
      [left] ${sideColumnWidth} [content-start] ${contentMarginWidth}
      [center] minmax(auto, ${centerColumnWidth})
      ${contentMarginWidth} [content-end right] ${sideColumnWidth};

Then the containers would be styled like

const leftContainerStyles = css`
  grid-column: left;
`;
const centerContainerStyles = css`
  grid-column: center;
`;
const rightContainerStyles = css`
  grid-column: right;
`;
const contentWithMarginsStyles = css`
  grid-column: content;
`;

grid-column: content; automatically expands to

grid-column-start: content-start;
grid-column-end: content-end;

Could do this if you think it makes the column areas clearer

I think the grid syntax in general is just complex and difficult to read 😄 that's a personal thing though, not a reflection on the code you've written. The new suggestion you shared does seem slightly easier to read, but it's up to you if you want to implement that or you want to try subgrid's - I don't want to hold this PR up on styling, it achieves the same thing at the end of the day and what you've implemented is a great improvement and I'd love to see it in before the cutoff tomorrow.

[chrisbmar]

Good work! Approving now but I think Lee has some requests - but code LGTM. Let me know if you need another approval if you push another commit. Looking forward to seeing this landing :)

[elasticmachine]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: 4ff6ef6

Failed CI Steps

• FTR Configs #132

Test Failures

• [job] [logs] FTR Configs #132 / discover/esql Index editor allows creation by manually adding data

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
onechat	570	572	+2

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
onechat	297.7KB	301.1KB	+3.4KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
onechat	14.2KB	14.2KB	+1.0B

History

• 💛 Build #340551 was flaky e4b0056
• 💔 Build #340048 failed 3c696d9

[joemcelroy]

doc paths are provided via another way, rather than you needing to hardcode the url for them.

see playground as an example:

• need to create a place for the onechat plugin to set doc_links (x-pack/solutions/search/plugins/search_playground/common/doc_links.ts)
• then the docLinks are set at plugin start (x-pack/solutions/search/plugins/search_playground/public/plugin.ts)

[joemcelroy]

chris opened up a pr to put in the support for docLinks :) #235804

[zacharyparikh]

Nice. Should I just remove these doc links and wait for the PR that adds all of the links together?

[joemcelroy]

Looks good. one issue with the docs handling however.