Create a shared compliance frameworks form app

Based on the designs/discussions in the discovery issue and backend issue, this issue is to track the development of the shared color picker component which will be used by the new compliance framework forms and eventually other color picker locations (e.g. labels).

The form for Compliance Framework Labels should have the following fields:

• Title: [ e.g. HIPAA, SOX, Internal, Tech Risk, otherCustomLabelName ]
  • The labels should allow the use of labels that look scoped (use of ::) but should not implement or leverage any scoped label behavior for now.
• Description: [ e.g. "This label should be applied to projects which are regulated by HIPAA" ]
• Background color:

Out of scope:

• Enforcement / "regulated" toggle
• Force Merge (under workflowsolution validation)

Mockups

Settings Page	Edit	New

Tier

This shared component should not be limited to any one tier. The individual locations it is used may be tiered.

Implementation plan

• Add form
  • Integrate Apollo client into form app
    • Use the client to retrieve form values if an ID is provided
  • Add title input with description text
  • Add description input
  • Add shared colour picker component
  • Add add (text for button given to app) and cancel buttons
  • Validate values on blur
  • Use store to save values and return success/error
  • Display something went wrong banner
  • Redirect on success to /groups/[GROUP/-/edit#js-compliance-frameworks-settings

Note: The following are not included in this form at this time:

• Settings Enforcement field will be created in #220190 (closed)
• Force merge is still in workflowsolution validation
• Compliance pipeline configuration location field will be created in #254389 (closed)