Skip to content

Resolve "Reorganise Security Dashboard frontend files"

Mark Florian requested to merge 33779-reorganise-security-dashboard-files-ee into master

What does this MR do?

High level overview:

The general idea is to move related things closer together, make related directory structures more similar to each other, and name components a bit more consistent. Specifically:

  • Move all four Security Dashboard types' init functions to ee/app/assets/security_dashboard/${TYPE}_init.js.
    • By bringing all of these together in one place, it'll make it easier to see what's common between them, and will make future refactoring a bit easier.
  • Simplify "pages" entry points for each dashboard type.
  • Move Jest store specs so that the directory structures align with the implementation directory structures.
    • No Karma specs are touched, since touching/moving them generates Danger bot warnings/errors. It's best if they're migrated to Jest anyway in another MR.
  • Move/rename the CardSecurityReportsApp component to ProjectSecurityDashboard, under the ee/app/assets/security_dashboard hierarchy.
  • Rename the base SecurityDashboard from app.vue to security_dashboard.vue.
  • Strip any App suffixes used on imported dashboard components.
Detailed list of tasks (perhaps useful during reviewing this MR!)
  • Group Security Dashboard
    • Simplify "pages" entry point
    • Move init script to ee/app/assets/javascripts/security_dashboard/group_init.js
    • Rename to GroupSecurityDashboard
  • Project Security Dashboard
    • Simplify "pages" entry point
    • Move init script to ee/app/assets/javascripts/security_dashboard/project_init.js
    • Move card_security_reports_app to project_security_dashboard
    • Move spec for it
    • Rename to ProjectSecurityDashboard
  • Pipeline Security Dashboard
    • Simplify "pages" entry point
    • Move init script to ee/app/assets/javascripts/security_dashboard/pipeline_init.js
  • Instance Security Dashboard
    • Simplify "pages" entry point
    • Move init script to ee/app/assets/javascripts/security_dashboard/instance_init.js
  • Security Dashboard
    • Rename from app.vue to security_dashboard.vue
    • Use SecurityDashboard instead of SecurityDashboardApp
  • Specs
    • Move store specs to mirror implementation - i.e., put under store/modules/

Spec directory structure changes

Before

$ tree -d -L 4 ee/app/assets/javascripts/security_dashboard/ ee/spec/frontend/security_dashboard
ee/app/assets/javascripts/security_dashboard/
├── components
└── store
    ├── modules
    │   ├── filters
    │   ├── projects
    │   ├── project_selector
    │   │   └── utils
    │   ├── unscanned_projects
    │   ├── vulnerabilities
    │   └── vulnerable_projects
    └── plugins
ee/spec/frontend/security_dashboard
├── components
│   └── __snapshots__
└── store
    ├── filters
    ├── modules
    │   ├── project_selector
    │   │   └── folder
    │   ├── unscanned_projects
    │   ├── vulnerabilities
    │   └── vulnerable_projects
    │       └── __snapshots__
    ├── plugins
    └── vulnerabilities
        └── data

After

$ tree -d -L 4 ee/app/assets/javascripts/security_dashboard/ ee/spec/frontend/security_dashboard
ee/app/assets/javascripts/security_dashboard/
├── components
└── store
    ├── modules
    │   ├── filters
    │   ├── projects
    │   ├── project_selector
    │   │   └── utils
    │   ├── unscanned_projects
    │   ├── vulnerabilities
    │   └── vulnerable_projects
    └── plugins
ee/spec/frontend/security_dashboard
├── components
│   └── __snapshots__
└── store
    ├── modules
    │   ├── filters
    │   ├── project_selector
    │   │   └── utils
    │   ├── unscanned_projects
    │   ├── vulnerabilities
    │   │   └── data
    │   └── vulnerable_projects
    │       └── __snapshots__
    └── plugins

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Addresses #33779 (closed)

Edited by Mark Florian

Merge request reports