Reduce the complexity of pipelines table

Where?

The pipelines table consist of two main components

• app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue
• app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table_row.vue

Then in pipelines_table_row.vue the column data is broken down into smaller components, such as commit, triggerer etc.

How can we reduce the complexity?

• We could move the table to utilize GlTable and pass the pipeline data to the table instead of looping through the pipelines_table_row.vue component #321257 (closed)
• Work on simplifying the computed properties located in pipelines_table_row.vue (probably can move these from this component once we use GlTable). These computed properties are using old practices and explicitly returning undefined. We can utilize the optional chain operator here to help us out. #321260 (closed)
• Reduce the number of props for doc paths (we can use helpPagePath JS implementation) see issue at: #320949 (closed)
• Duplicate ci_pagination_api_mixin.js into pipelines_pagination_api_mixin.js and environments_pagination_api_mixin.js see: #321021 (closed)

The table

Component Structure

- Entry point: ~/pipelines/pipelines_index.js
  renders:
    - ~/pipelines/components/pipelines_list/pipelines.vue
      mixins:
        - ~/pipelines/mixins/pipelines.js: pipelinesMixin
        - ~/vue_shared/mixins/ci_pagination_api_mixin.js: CIPaginationMixin
      renders:
        - ~/vue_shared/components/navigation_tabs.vue: <navigation-tabs/>
        - ~/pipelines/components/pipelines_list/nav_controls.vue: <navigation-controls/>
        - ~/pipelines/components/pipelines_list/pipelines_filtered_search.vue: <pipelines_filtered_search/>
        - ~/pipelines/components/pipelines_list/empty_state.vue: <empty-state/>
        - ~/pipelines/components/pipelines_list/blank_state.vue: <svg-blank-state/>
        - ~/pipelines/components/pipelines_list/pipelines_table.vue: <pipelines-table-component/>
          renders:
            - ~/pipelines/components/pipelines_list/pipelines_table_row.vue: <pipelines-table-row-component/>
              renders:
                - ~/vue_shared/components/ci_badge_link.vue: <ci-badge>
                - ~/pipelines/components/pipelines_list/pipeline_url.vue: <pipeline-url>
                - ~/pipelines/components/pipelines_list/pipeline_triggerer.vue: <pipeline-triggerer>
                  renders:
                    - ~/vue_shared/components/user_avatar/user_avatar_link.vue: <user-avatar-link>
                      renders:
                      - ~/vue_shared/components/user_avatar/user_avatar_image.vue: <user-avatar-image>
                - ~/vue_shared/components/commit.vue: <commit-component>
                  renders:
                    - ~/vue_shared/components/user_avatar/user_avatar_link.vue: <user-avatar-link>
                - ~/pipelines/components/pipelines_list/stage.vue: <pipeline-stage>
                - ~/pipelines/components/pipelines_list/time_ago.vue: <pipelines-timeago>
                  mixin:
                    ~/vue_shared/mixins/timeago.js
                - ~/pipelines/components/pipelines_list/pipelines_actions.vue: <pipelines-actions-component>
            - ~/pipelines/components/pipelines_list/pipeline_stop_modal.vue: <pipeline-stop-modal/>
        - ~/vue_shared/components/pagination/table_pagination.vue: <table-pagination/>

- Entry point: ~/commit/pipelines/pipelines_bundle.js
  renders:
    - ~/commit/pipelines/pipelines_table.vue
      mixins:
        - ~/pipelines/mixins/pipelines.js: pipelinesMixin
        - ~/vue_shared/mixins/ci_pagination_api_mixin.js: CIPaginationMixin
      renders:
        - ~/pipelines/components/pipelines_list/blank_state.vue: <svg-blank-state/>
        - ~/pipelines/components/pipelines_list/pipelines_table.vue: <pipelines-table-component/>
          renders:
            - ~/pipelines/components/pipelines_list/pipelines_table_row.vue: <pipelines-table-row-component/>
              renders:
                - ~/vue_shared/components/ci_badge_link.vue: <ci-badge>
                - ~/pipelines/components/pipelines_list/pipeline_url.vue: <pipeline-url>
                - ~/pipelines/components/pipelines_list/pipeline_triggerer.vue: <pipeline-triggerer>
                  renders:
                    - ~/vue_shared/components/user_avatar/user_avatar_link.vue: <user-avatar-link>
                      renders:
                      - ~/vue_shared/components/user_avatar/user_avatar_image.vue: <user-avatar-image>
                - ~/vue_shared/components/commit.vue: <commit-component>
                  renders:
                    - ~/vue_shared/components/user_avatar/user_avatar_link.vue: <user-avatar-link>
                - ~/pipelines/components/pipelines_list/stage.vue: <pipeline-stage>
                - ~/pipelines/components/pipelines_list/time_ago.vue: <pipelines-timeago>
                  mixin:
                    ~/vue_shared/mixins/timeago.js
                - ~/pipelines/components/pipelines_list/pipelines_actions.vue: <pipelines-actions-component>
            - ~/pipelines/components/pipelines_list/pipeline_stop_modal.vue: <pipeline-stop-modal/>
        - ~/vue_shared/components/pagination/table_pagination.vue: <table-pagination/>