Site Profiler: Open get report form when clicking the Metrics CTA

[epeicher]

Fixes https://github.com/Automattic/dotcom-forge/issues/6909

Proposed Changes

• Adds functionality to open the Get Report form when clicking the menu CTA
• Adds functionality to close the form when clicking on the X icon
• The arrow icon in the top-right of the form has been replaced by a X icon to indicate closing
• The form is fixed positioned at the bottom of the viewport

Testing Instructions

• Apply this patch to your environment
• Navigate to the site-profiler and analyze a website
• Click on the main CTA button in the basic metrics menu
  
• Check the form is displayed at the bottom and that you can scroll through the results
• Click on the X icon in the form
• Check the form is closed as expected
• Check the style and behavior is similar to the production version

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
  - [ ] Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
  - [ ] Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
  - [ ] For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-107385

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-107385&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-107385&env=a8c-for-agencies

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~43 bytes added 📈 [gzipped])

name           parsed_size           gzip_size
site-profiler       +165 B  (+0.2%)      +43 B  (+0.2%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[WBerredo]

I think this button was different to give the impression of sliding up and down. I think the current show/hide behavior is a bit abrupt so I would also prefer the sliding transition.

[WBerredo]

Nit: Is this check isError={ !! errors } needed? Considering its checked on the previous line.

Suggested change

	<FormInputValidation isError={ !! errors } text={ errors.termsAccepted } />
	<FormInputValidation isError text={ errors.termsAccepted } />

The same for the previous components.

[epeicher]

Not needed here, removing it

[epeicher]

3a474a8

[epeicher]

I think this button was different to give the impression of sliding up and down. I think the current show/hide behavior is a bit abrupt so I would also prefer the sliding transition.

I agree that this form will benefit from a sliding animation, and the behavior is currently abrupt. I will work on that

[epeicher]

I have implemented slide-up and slide-down animations, but I have observed that the behavior is not consistent among browsers:

• It works on Chrome and Arc
• It works for slide-up but not for slide-down in Firefox and Safari
  - It does not seem to work at all in Arc

This is the Chrome behavior:

@Automattic/bespin , any suggestions

[cpapazoglou]

Suggested change

	&--hidden {
	display: none;
	animation: 500ms ease-out slideDown;
	}
	}
	@keyframes slideUp {
	from {
	transform: translateY(100%);
	}
	to {
	transform: translateY(0);
	}
	}
	@keyframes slideDown {
	from {
	display: block;
	transform: translateY(0);
	}
	to {
	display: none;
	transform: translateY(100%);
	&--hidden {
	animation: 500ms ease-out slideDown;
	transform: translateY(100%);
	}
	}
	@keyframes slideUp {
	from {
	transform: translateY(100%);
	}
	to {
	transform: translateY(0);
	}
	}
	@keyframes slideDown {
	from {
	transform: translateY(0);
	}
	to {
	transform: translateY(100%);

[epeicher]

I have tried this, but it displays the form initially U02M8SCS6RE/F073J5UBW8H-slack-file

We will investigate this and other options as part of the linked task https://github.com/Automattic/dotcom-forge/issues/7130

[epeicher]

A follow-up task has been created to investigate a fix so the animation is consistent between browsers:

• https://github.com/Automattic/dotcom-forge/issues/7130

[gcsecsey]

LGTM and works great!