Draft: Add create secrets form

What does this MR do and why?

Partially implements #424458 (closed). This follows the Figma designs.

This MR creates the base for the form that allows the user to create or edit their secrets. Since the API is not yet available, the rotation period field uses dummy values for now. The access permission dropdowns and apollo mutations will be implemented in future iterations.

Summary of changes:

• Expiration date can only be set in the future
• User can use one of the default options for the rotation period, or they can set a custom CRON
• When the user clicks on the submit button, they will see a preview of their form input (except for the value field) through a modal.

Please refer to the implementation plan below for the planned changes that will be implemented in the next iterations:

Implementation Plan

Iteration	MR
Make environments dropdown reusable	!138464 (merged)
Create base form with preview modal and key, value, description, expiration, and rotation fields	👈 You are here!
Add environment dropdown	!147141 (merged)
Add access permission dropdowns, with user search	⌛
Integrate apollo and add form submission	⌛

Screenshots or screen recordings

Before	After

Filling out the form:

Screen_Recording_2024-02-15_at_23.40.42

How to set up and validate locally

1. Enable the ci_tanukey_ui feature flag to your root group or namespace. Refer to this diagram on how the feature flag works.
2. Visit <path-to-project-or-group>/-/secrets/new to view the form.
3. Verify that:
   • you cannot choose an expiration date from the past, or today
   • you can input a custom CRON for the rotation period
   • clicking the submit button will open the preview modal

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.