## Background Currently the `vue_shared` directory has an incomplete set of stories available in the gitlab-storybook. Given these are intended to be shared components, we should ensure we adequately document these and provide stories for their usage. Additionally, if components are not intended to be truly shared, they should be moved elsewhere. ## TODO: * [x] Audit existing components to see if they have a story * [x] Audit existing stories to see if they're broken * [x] Try and discern which components are associated with each group * [x] Create separate issues for each directory * [x] Create an issue for directories not clearly owned by a group * Estimate a reasonable amount that should be migrated or need new stories to be added * Count total vue components so we have an idea how many need to be looked at * Count total existing stories so we know the gap ## Sorted <details> <summary>gitlab~16934793 </summary> ### Existing stories - ? `app/assets/javascripts/vue_shared/components/markdown_drawer/markdown_drawer.stories.js` - ? `app/assets/javascripts/vue_shared/components/markdown/non_gfm_markdown.stories.js` ### Missing stories - [ ] `app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue` - [ ] `app/assets/javascripts/vue_shared/components/diff_viewer/viewers/mode_changed.vue` - [ ] `app/assets/javascripts/vue_shared/components/diff_viewer/viewers/not_diffable.vue` - [ ] `app/assets/javascripts/vue_shared/components/diff_viewer/viewers/download_diff_viewer.vue` - [ ] `app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue` - [ ] `app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue` - [ ] `app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue` - [ ] `app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue` - [ ] `app/assets/javascripts/vue_shared/components/diff_viewer/viewers/no_preview.vue` - [ ] `app/assets/javascripts/vue_shared/components/diff_viewer/viewers/renamed.vue` - [ ] `app/assets/javascripts/vue_shared/components/diff_stats_dropdown.vue` - [ ] `ee/app/assets/javascripts/vue_shared/components/markdown/constants.js` - [ ] `ee/app/assets/javascripts/vue_shared/components/markdown/mount_markdown_editor.js` - [ ] `app/assets/javascripts/vue_shared/components/notes/system_note.vue` - [ ] `app/assets/javascripts/vue_shared/components/notes/timeline_entry_item.vue` - [ ] `app/assets/javascripts/vue_shared/components/notes/placeholder_system_note.vue` - [ ] `app/assets/javascripts/vue_shared/components/notes/timeline_icon.vue` - [ ] `app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue` - [ ] `app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue` - [ ] `app/assets/javascripts/vue_shared/components/notes/noteable_warning.vue` - [ ] `app/assets/javascripts/vue_shared/components/awards_list.vue` - [ ] `app/assets/javascripts/vue_shared/components/panel_resizer.vue` </details> <details> <summary>gitlab~10690742</summary> ### Existing stories ### Missing stories - [ ] `ee/app/assets/javascripts/vue_shared/license_compliance/mr_widget_license_report.vue` - [ ] `ee/app/assets/javascripts/vue_shared/license_compliance/license_management.vue` - [ ] `ee/app/assets/javascripts/vue_shared/license_compliance/components/license_packages.vue` - [ ] `ee/app/assets/javascripts/vue_shared/license_compliance/components/license_issue_body.vue` - [ ] `ee/app/assets/javascripts/vue_shared/license_compliance/components/delete_confirmation_modal.vue` - [ ] `ee/app/assets/javascripts/vue_shared/license_compliance/components/add_license_form_dropdown.vue` - [ ] `ee/app/assets/javascripts/vue_shared/license_compliance/components/license_management_row.vue` - [ ] `ee/app/assets/javascripts/vue_shared/license_compliance/components/license_status_icon.vue` - [ ] `ee/app/assets/javascripts/vue_shared/license_compliance/components/add_license_form.vue` - [ ] `ee/app/assets/javascripts/vue_shared/license_compliance/components/admin_license_management_row.vue` </details> <details> <summary>gitlab~27358892</summary> ### Existing stories ### Missing stories - [ ] `app/assets/javascripts/vue_shared/components/registry/title_area.vue` - [ ] `app/assets/javascripts/vue_shared/components/registry/details_row.vue` - [ ] `app/assets/javascripts/vue_shared/components/registry/code_instruction.vue` - [ ] `app/assets/javascripts/vue_shared/components/registry/history_item.vue` - [ ] `app/assets/javascripts/vue_shared/components/registry/list_item.vue` - [ ] `app/assets/javascripts/vue_shared/components/registry/persisted_dropdown_selection.vue` - [ ] `app/assets/javascripts/vue_shared/components/registry/metadata_item.vue` - [ ] `app/assets/javascripts/vue_shared/components/registry/registry_search.vue` </details> <details> <summary>gitlab~31287874</summary> ### Existing stories ### Missing stories - [ ] `ee/app/assets/javascripts/vue_shared/components/branches_selector/project_branch_selector.vue` - [ ] `ee/app/assets/javascripts/vue_shared/components/branches_selector/protected_branches_selector.vue` </details> <details> <summary>gitlab~29601784</summary> ### Existing stories ### Missing stories - [ ] `ee/app/assets/javascripts/vue_shared/dashboards/components/alerts.vue` - [ ] `ee/app/assets/javascripts/vue_shared/dashboards/components/time_ago.vue` - [ ] `ee/app/assets/javascripts/vue_shared/dashboards/components/project_pipeline.vue` - [ ] `app/assets/javascripts/vue_shared/components/deployment_instance.vue` - [ ] `app/assets/javascripts/vue_shared/components/commit.vue` </details> <details> <summary>gitlab~23503226</summary> ### Existing stories ### Missing stories - [ ] `ee/app/assets/javascripts/vue_shared/metrics_reports/grouped_metrics_reports_app.vue` - [ ] `ee/app/assets/javascripts/vue_shared/metrics_reports/components/metrics_reports_issue_body.vue` </details> <details> <summary>gitlab~10046106</summary> ### Existing stories ### Missing stories - [ ] `app/assets/javascripts/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue` - [ ] `app/assets/javascripts/vue_shared/components/ci_cd_analytics/ci_cd_analytics_area_chart.vue` - [ ] CI/CD analytics https://gitlab.com/gitlab-org/gitlab/-/issues/428282 - [ ] `app/assets/javascripts/vue_shared/components/resizable_chart/skeleton_loader.vue` - [ ] https://gitlab.com/gitlab-org/gitlab/-/issues/477912+ </details> <details> <summary>gitlab~10690708</summary> ### Existing stories ### Missing stories - [ ] `app/assets/javascripts/vue_shared/components/logs_viewer/log_line.vue` - [ ] `app/assets/javascripts/vue_shared/components/logs_viewer/logs_viewer.vue` - [ ] `app/assets/javascripts/vue_shared/components/logs_viewer/logs_top_bar.vue` - [ ] `app/assets/javascripts/vue_shared/components/logs_viewer/line_number.vue` - [ ] `app/assets/javascripts/vue_shared/components/runner_instructions/instructions/runner_cli_instructions.vue` - [ ] `app/assets/javascripts/vue_shared/components/runner_instructions/instructions/runner_docker_instructions.vue` - [ ] `app/assets/javascripts/vue_shared/components/runner_instructions/instructions/runner_kubernetes_instructions.vue` - [ ] `app/assets/javascripts/vue_shared/components/runner_instructions/instructions/runner_aws_instructions.vue` - [ ] `app/assets/javascripts/vue_shared/components/runner_instructions/runner_instructions_modal.vue` - [ ] `app/assets/javascripts/vue_shared/components/navigation_tabs.vue` </details> <details> <summary>gitlab~10690700 </summary> ### Existing stories ### Missing stories - [ ] `app/assets/javascripts/vue_shared/components/design_management/design_disclosure.vue` - [ ] `app/assets/javascripts/vue_shared/components/design_management/design_note_pin.vue` - [ ] `app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_header.vue` - [ ] `app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_contents.vue` - [ ] `app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_value.vue` - [ ] `app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_contents_color_view.vue` - [ ] `app/assets/javascripts/vue_shared/components/color_select_dropdown/color_item.vue` </details> <details> <summary>gitlab~10690691</summary> ### Existing stories ### Missing stories - [ ] `app/assets/javascripts/vue_shared/components/markdown/drawio_toolbar_button.vue` - [ ] `app/assets/javascripts/vue_shared/components/markdown/markdown_editor.vue` - [ ] `app/assets/javascripts/vue_shared/components/markdown/suggestions.vue` - [ ] `app/assets/javascripts/vue_shared/components/markdown/suggestion_diff.vue` - [ ] `app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue` - [ ] `app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue` - [ ] `app/assets/javascripts/vue_shared/components/markdown/field.vue` - [ ] `app/assets/javascripts/vue_shared/components/markdown/toolbar.vue` - [ ] `app/assets/javascripts/vue_shared/components/markdown/header_divider.vue` - [ ] `app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue` - [ ] `app/assets/javascripts/vue_shared/components/markdown/editor_mode_switcher.vue` - [ ] `app/assets/javascripts/vue_shared/components/markdown/comment_templates_modal.vue` - [ ] `app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_row.vue` - [ ] `app/assets/javascripts/vue_shared/components/markdown/field_view.vue` - [ ] `app/assets/javascripts/vue_shared/components/markdown/header.vue` - [ ] `app/assets/javascripts/vue_shared/components/markdown/markdown_content.vue` - [ ] `app/assets/javascripts/vue_shared/issuable/sidebar/components/issuable_sidebar_root.vue` - [ ] `app/assets/javascripts/vue_shared/issuable/show/components/issuable_body.vue` - [ ] `app/assets/javascripts/vue_shared/issuable/show/components/issuable_header.vue` - [ ] `app/assets/javascripts/vue_shared/issuable/show/components/issuable_title.vue` - [ ] `app/assets/javascripts/vue_shared/issuable/show/components/issuable_edit_form.vue` - [ ] `app/assets/javascripts/vue_shared/issuable/show/components/issuable_discussion.vue` - [ ] `app/assets/javascripts/vue_shared/issuable/show/components/issuable_description.vue` - [ ] `app/assets/javascripts/vue_shared/issuable/show/components/issuable_show_root.vue` - [ ] `app/assets/javascripts/vue_shared/issuable/list/components/issuable_grid.vue` - [ ] `app/assets/javascripts/vue_shared/issuable/list/components/issuable_tabs.vue` - [ ] `app/assets/javascripts/vue_shared/issuable/list/components/issuable_list_root.vue` - [ ] `app/assets/javascripts/vue_shared/issuable/list/components/issuable_bulk_edit_sidebar.vue` - [ ] `app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue` - [ ] `app/assets/javascripts/vue_shared/issuable/create/components/issuable_form.vue` - [ ] `app/assets/javascripts/vue_shared/issuable/create/components/issuable_create_root.vue` - [ ] `app/assets/javascripts/vue_shared/issuable/create/components/issuable_label_selector.vue` - [ ] `app/assets/javascripts/vue_shared/components/confidentiality_badge.vue` - [ ] `app/assets/javascripts/vue_shared/components/mr_more_dropdown.vue` - [ ] `app/assets/javascripts/vue_shared/components/issuable_blocked_icon/issuable_blocked_icon.vue` - [ ] `app/assets/javascripts/vue_shared/components/page_size_selector.vue` </details> <details> <summary>gitlab~29990077</summary> ### Existing stories - ? `app/assets/javascripts/vue_shared/components/web_ide_link.stories.js` ### Missing stories - [ ] `ee/app/assets/javascripts/vue_shared/components/web_ide_link.vue` - [ ] `app/assets/javascripts/vue_shared/components/web_ide/confirm_fork_modal.vue` - [ ] `app/assets/javascripts/vue_shared/components/file_tree.vue` - [ ] `app/assets/javascripts/vue_shared/components/changed_file_icon.vue` - [ ] `app/assets/javascripts/vue_shared/components/integrations_help_text.vue` - [ ] `app/assets/javascripts/vue_shared/components/file_row.vue` - [ ] `app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue` </details> <details> <summary>gitlab~10690732</summary> ### Existing stories ### Missing stories - [ ] `app/assets/javascripts/vue_shared/components/metric_images/metric_image_details_modal.vue` - [ ] `app/assets/javascripts/vue_shared/components/metric_images/metric_images_table.vue` - [ ] `app/assets/javascripts/vue_shared/components/metric_images/metric_images_tab.vue` </details> <details> <summary>gitlab~10309854</summary> ### Existing stories - ### Missing stories - [ ] `app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue` - [ ] `app/assets/javascripts/vue_shared/components/source_viewer/components/blame_info.vue` - [ ] `app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_new.vue` - [ ] `app/assets/javascripts/vue_shared/components/source_viewer/components/chunk.vue` - [ ] `app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue` - [ ] `app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue` - [ ] `app/assets/javascripts/vue_shared/components/blob_viewers/rich_viewer.vue` - [ ] `app/assets/javascripts/vue_shared/components/file_row_header.vue` - [ ] `app/assets/javascripts/vue_shared/components/file_finder/index.vue` - [ ] `app/assets/javascripts/vue_shared/components/file_finder/item.vue` - [ ] `app/assets/javascripts/vue_shared/components/content_viewer/content_viewer.vue` - [ ] `app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue` - [ ] `app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue` - [ ] `app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue` - [ ] `app/assets/javascripts/vue_shared/components/form/form_footer_actions.vue` </details> <details> <summary>gitlab~10690740</summary> ### Existing stories ### Missing stories - [ ] `app/assets/javascripts/vue_shared/security_configuration/components/section_loader.vue` - [ ] `app/assets/javascripts/vue_shared/security_configuration/components/section_layout.vue` - [ ] `app/assets/javascripts/vue_shared/security_configuration/components/manage_via_mr.vue` - [ ] `app/assets/javascripts/vue_shared/components/dismissible_feedback_alert.vue` </details> <details> <summary>gitlab~25005342</summary> ### Existing stories - ? `ee/app/assets/javascripts/vue_shared/purchase_flow/components/company_information.stories.js` - ? `ee/app/assets/javascripts/vue_shared/purchase_flow/components/contact_billing_address.stories.js` - ? `ee/app/assets/javascripts/vue_shared/purchase_flow/components/step.stories.js` - ? `ee/app/assets/javascripts/vue_shared/purchase_flow/components/checkout/billing_account_details.stories.js` - ? `ee/app/assets/javascripts/vue_shared/purchase_flow/components/checkout/billing_address.stories.js` ### Missing stories - [ ] `ee/app/assets/javascripts/vue_shared/purchase_flow/components/step_order_app.vue` - [ ] `ee/app/assets/javascripts/vue_shared/purchase_flow/components/checkout/payment_method.vue` - [ ] `ee/app/assets/javascripts/vue_shared/purchase_flow/components/checkout/sprintf_with_links.vue` - [ ] `ee/app/assets/javascripts/vue_shared/purchase_flow/components/checkout/confirm_order.vue` - [ ] `ee/app/assets/javascripts/vue_shared/purchase_flow/components/checkout/zuora.vue` </details> <details> <summary>gitlab~19419036</summary> ### Existing stories - ? `app/assets/javascripts/vue_shared/components/project_avatar.stories.js` - ? `app/assets/javascripts/vue_shared/components/groups_list/groups_list.stories.js` - ? `app/assets/javascripts/vue_shared/components/list_actions/list_actions.stories.js` ### Missing stories - [ ] `app/assets/javascripts/vue_shared/components/groups_list/groups_list_item.vue` - [ ] `app/assets/javascripts/vue_shared/components/groups_list/group_list_item_delete_modal.vue` - [ ] `app/assets/javascripts/vue_shared/components/projects_list/projects_list.vue` - [ ] `app/assets/javascripts/vue_shared/components/projects_list/project_list_item_inactive_badge.vue` - [ ] `app/assets/javascripts/vue_shared/components/projects_list/projects_list_item.vue` - [ ] `app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue` - [ ] `app/assets/javascripts/vue_shared/new_namespace/new_namespace_page.vue` - [ ] `app/assets/javascripts/vue_shared/new_namespace/components/legacy_container.vue` - [ ] `app/assets/javascripts/vue_shared/new_namespace/components/welcome.vue` - [ ] `ee/app/assets/javascripts/vue_shared/components/groups_list/group_list_item_delete_modal.vue` </details> <details> <summary>gitlab~10690752</summary> ### Existing stories - ? `ee/app/assets/javascripts/vue_shared/security_reports/components/status_badge.stories.js` ### Missing stories - [ ] `ee/app/assets/javascripts/vue_shared/discover/card_security_discover_app.vue` - [ ] `ee/app/assets/javascripts/vue_shared/security_reports/components/solution_card_graphql.vue` - [ ] `ee/app/assets/javascripts/vue_shared/security_reports/components/severity_badge.vue` - [ ] `ee/app/assets/javascripts/vue_shared/security_reports/components/event_item.vue` - [ ] `ee/app/assets/javascripts/vue_shared/security_reports/components/create_jira_issue.vue` - [ ] `ee/app/assets/javascripts/vue_shared/security_reports/components/dast_modal.vue` - [ ] `ee/app/assets/javascripts/vue_shared/security_reports/components/summary_highlights.vue` - [ ] `ee/app/assets/javascripts/vue_shared/security_reports/components/dismissal_note.vue` - [ ] `ee/app/assets/javascripts/vue_shared/security_reports/components/security_issue_body.vue` - [ ] `ee/app/assets/javascripts/vue_shared/security_reports/components/merge_request_note.vue` - [ ] `ee/app/assets/javascripts/vue_shared/security_reports/components/solution_card.vue` - [ ] `ee/app/assets/javascripts/vue_shared/security_reports/components/merge_request_note_graphql.vue` - [ ] `ee/app/assets/javascripts/vue_shared/security_reports/components/security_training_promo.vue` - [ ] `ee/app/assets/javascripts/vue_shared/security_reports/components/split_button.vue` - [ ] `ee/app/assets/javascripts/vue_shared/security_reports/components/issue_note_graphql.vue` - [ ] `app/assets/javascripts/vue_shared/security_reports/components/security_report_download_dropdown.vue` </details> <details> <summary>~"group::design system"</summary> ### Existing stories - ? `app/assets/javascripts/vue_shared/components/settings/settings_block.stories.js` - ? `app/assets/javascripts/vue_shared/components/settings/settings_section.stories.js` - ? `app/assets/javascripts/vue_shared/components/crud_component.stories.js` ### Missing stories - [ ] `app/assets/javascripts/vue_shared/alert_details/components/alert_sidebar.vue` - [ ] `app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_todo.vue` - [ ] `app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_assignee.vue` - [ ] `app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue` - [ ] `app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_header.vue` - [ ] `app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_status.vue` - [ ] `app/assets/javascripts/vue_shared/alert_details/components/system_notes/system_note.vue` - [ ] `app/assets/javascripts/vue_shared/alert_details/components/alert_status.vue` - [ ] `app/assets/javascripts/vue_shared/alert_details/components/alert_summary_row.vue` - [ ] `app/assets/javascripts/vue_shared/alert_details/components/alert_details.vue` - [ ] `app/assets/javascripts/vue_shared/components/alert_details_table.vue` - [ ] `app/assets/javascripts/vue_shared/components/dropdown_keyboard_navigation.vue` </details>