Fix "Get started" image is not adaptive to the browser window size.

[curq]

Description

It makes the image on get-started page to be adaptive to the window size.

Category

Bug fix

Why these changes are required?

To make layout adaptive.

What is the old behavior before changes and new behavior after changes?

Before that the size prop of EuiImage was xl, which translates to width: 600px according to docs. So when the size of the container got smaller with page ( less than 600px ) the image started overflowing. The behavior is shown in #1386. It was also centered using div container with text-align: center property,

Now the size changed to fullWidth which make image to take full width of the container. To keep previous expected behavior, the EuiImage component was placed in a EuiFlexItem container with maximum width 600px, which prevents image from getting too big. As the result when the window size is small, the image adapts to it. Screenshot:

The EuiFlexGroup was used to keep the image centered, as it is not possible to do it with text-align: center anymore.

Issues Resolved

Fixes #1386

Testing

Tested by resizing window to see if it adapts to the window size.

Check List

• New functionality includes testing
• New functionality has been documented
• Commits are signed per the DCO using --signoff

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.
For more information on following Developer Certificate of Origin and signing off your commits, please check here.

[stephen-crawford]

Hi @curq, thank you for this change. Nice find and great job writing up your findings. This looks good to me.

[DarshitChanpura]

Hey @curq, thank you for filing a PR!
Quick suggestions:
We should not use magic numbers to hard code the values. E.g. 600px. Instead, what do you think about adding an inline style in the image itself (see suggestion)

[DarshitChanpura]

Suggested change

	<EuiSpacer size="l" />
	{props.config.ui.backend_configurable && (
	<div className="text-center">
	<EuiImage
	size="xl"
	alt="Three steps to set up your security"
	url={securityStepsDiagram}
	/>
	</div>
	<EuiFlexGroup justifyContent="center">
	<EuiFlexItem style={{ maxWidth: '600px' }}>
	<EuiImage
	size="fullWidth"
	alt="Three steps to set up your security"
	url={securityStepsDiagram}
	/>
	</EuiFlexItem>
	</EuiFlexGroup>
	)}
	<EuiSpacer size="l" />
	{props.config.ui.backend_configurable && (
	<div className="text-center">
	<EuiImage
	size="xl"
	alt="Three steps to set up your security"
	url={securityStepsDiagram}
	style={{ maxWidth: '100%', height: 'auto', width: 'auto' }}
	/>
	</div>
	)}

[DarshitChanpura]

@curq Could you also modify snapshot used in unit tests?
You can add following after

security-dashboards-plugin/public/apps/configuration/panels/test/__snapshots__/get-started.test.tsx.snap

Line 242 in 5e99582

url="test-file-stub"

style={
            Object {
              "maxWidth": "100%",
              "height": "auto",
              "width": "auto",
            }
          }

Without this the unit tests would fail

[curq]

@DarshitChanpura, @scrawfor99 Thank you for the review! I applied the suggestions and updated PR

[codecov-commenter]

Codecov Report

Merging #1396 (acc7202) into main (da7d1fe) will not change coverage.
The diff coverage is n/a.

📣 This organization is not using Codecov’s GitHub App Integration. We recommend you install it so Codecov can continue to function properly for your repositories. Learn more

@@           Coverage Diff           @@
##             main    #1396   +/-   ##
=======================================
  Coverage   71.67%   71.67%           
=======================================
  Files          88       88           
  Lines        2037     2037           
  Branches      277      277           
=======================================
  Hits         1460     1460           
  Misses        511      511           
  Partials       66       66           

Impacted Files	Coverage Δ
public/apps/configuration/panels/get-started.tsx	90.90% <ø> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[DarshitChanpura]

Windows CI tests failed with:

Run tar -xzf opensearch-min-3.0.0-SNAPSHOT-windows-x64-latest.zip
Run 'y' | .\opensearch-3.0.0-SNAPSHOT\bin\opensearch-plugin.bat install file:$(pwd)\opensearch-security.zip
The following usage of the path operator in batch-parameter
substitution is invalid: %~nxI


For valid formats type CALL /? or FOR /?
The syntax of the command is incorrect.
Error: Process completed with exit code 1.
Run cat ./opensearch-3.0.0-SNAPSHOT/logs/opensearch.log
cat: ./opensearch-3.0.0-SNAPSHOT/logs/opensearch.log: No such file or directory
Error: Process completed with exit code 1.

Re-ran the tests to see if it was a one-off error as no changes related to windows were made in this PR