(OUI Next Theme) Search Relevance

[KrooshalUX]

This issue to be transferred to corresponding repository

I am working on launching new light and dark mode themes provided by OUI component library for a target launch within 2.10. These changes support the vision expressed in Future Vision for Dashboards

I have identified the following front end related issues that prevent the theme from appearing complete and potential solutions within this feature:

• (OUI Next Theme) Border Color Not Compliant with Dark Mode #306

• (OUI Next Theme) Code Editor Not Compliant with Dark Mode #307
• (OUI Next Theme) Empty State #308

[macohen]

We'll need to push this change to 2.11. We're focused on build failures right now and see this as a minor issue for a still experimental plugin.

[joshuarrrr]

OpenSearch Dashboards provides a theme-aware customization of the textmate theme for ace editor. See opensearch-project/OpenSearch-Dashboards#4609

Setting the theme to textmate is likely sufficient to fix the query editor appearance.

[joshuarrrr]

@macohen If your team would like a helping hand on resolving these, feel free to sign up for OpenSearch Dashboards developer office hours: https://opensearch.org/events/2023-0921-dev-officehours-dashboards/

[nung22]

@sejli Can I get assigned to this issue?

[nung22]

Hi @KrooshalUX, I'm currently tackling this issue and was wondering if you could elaborate on this point further "Empty state should utilize EuiEmptyPrompt." Just trying to get a better idea of what type of problem it is.

[joshuarrrr]

@nung22 Thanks for picking this up! Kroosh is out of the office for a while so @kgcreative or I should be able to help anser any of these questions. For the third item, the idea is to use standard layout components, which already are styled consistently.

From the screenshot, I believe this is the component to update:

dashboards-search-relevance/public/components/query_compare/search_result/result_components/result_components.tsx

Lines 21 to 36 in 6fb31c8

	const InitialState = () => {
	return (
	<EuiPanel
	hasBorder={false}
	hasShadow={false}
	grow={true}
	style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}
	>
	<EuiFlexGroup justifyContent="center">
	<EuiTitle>
	<h2>Add queries to compare search results.</h2>
	</EuiTitle>
	</EuiFlexGroup>
	</EuiPanel>
	);
	};

Here's the documentation and usage guide for EuiEmptyPrompt (note that, for semver reasons, the docs us the OUI namespace while we still use the EUI namespace in code): https://oui.opensearch.org/1.3/#/display/empty-prompt

[kgcreative]

@nung22 -- once you have something working on your local env, feel free to add light/dark screenshots here and tag me, and I can give you quick validation from the UX side as to whether it looks right or not. If you're able to spin up an end-point to show WIP even better, but that can sometimes be extra time consuming for a small change like this.

[nung22]

@kgcreative This is what I have so far!

Screenshots

Before

Dark Mode

Light Mode

After

Dark Mode

Light Mode

Navigation to "Add Sample Data" page:

Dark Mode

Light Mode

[kgcreative]

@kgcreative This is what I have so far!

Thanks so much!
For this empty prompt, let's not link to adding sample data. Instead, let's use empty prompt, and supress the primary action.

  iconType="search"
  title={<h2>No results</h2>}
  body={
      <Fragment>
        <p>
          Add at least one query to display search results.
        </p>
      </Fragment>
    }

[kgcreative]

Similarly, when only one query is present,

Let's update the body of the empty pane to:

  iconType="search"
  title={<h2>No results</h2>}
  body={
      <Fragment>
        <p>
          Add a second query to display search comparison results.
        </p>
      </Fragment>
    }

[nung22]

@kgcreative This is what I have so far!

Thanks so much! For this empty prompt, let's not link to adding sample data. Instead, let's use empty prompt, and supress the primary action.

  iconType="search"
  title={<h2>No results</h2>}
  body={
      <Fragment>
        <p>
          Add at least one query to display search results.
        </p>
      </Fragment>
    }

Appreciate the guidance! Is this what you meant?

[nung22]

Similarly, when only one query is present,

Let's update the body of the empty pane to:

  iconType="search"
  title={<h2>No results</h2>}
  body={
      <Fragment>
        <p>
          Add a second query to display search comparison results.
        </p>
      </Fragment>
    }

With only one query present:

[kgcreative]

@nung22 LGTM!

@joshuarrrr over to you for code review whenever @nung22 is ready

[noCharger]

Close this issue after all tasks complete