Add compliance framework sidebar

Proposal

Add a sidebar to create the compliance framework report in the compliance center. When selecting the table row open the sidebar.

For first iteration we will only be showing the basic information and the associated projects. Not adherence and policies

Note the default badge is border colour is the framework colour

Designs

Designs -> 🎨 Design: improve manage/edit compliance framew... (#412702 - closed)

List_of_frameworks-drawer

Implementation plan

  1. Create a new component called framework_info_sidebar.vue in the framework report folder
    1. Reference the adherence report sidebar https://gitlab.com/gitlab-org/gitlab/-/blob/master/ee/app/assets/javascripts/compliance_dashboard/components/standards_adherence_report/fix_suggestions_sidebar.vue?ref_type=heads
  2. Load the component into ee/app/assets/javascripts/compliance_dashboard/components/frameworks_report/frameworks_table.vue
  3. Add computed prop to hold the open state of sidebar and line of the table clicked
  4. Add methods to toggle, open and close the Drawer. Toggle will trigger the open and close methods. All methods will update computed prop
  5. Add specs and docs
Edited by Nate Rosandich