Remove unused css classes

As a cleanup, we can remove some custom CSS
that was used to render the older VSA components.

These components have been replaced with shared VSA
components that use the gitlab-ui and components and
utility css classes.

app/assets/javascripts/cycle_analytics/components/base.vue

@@ -98,12 +98,7 @@ export default {
     },
   },
   methods: {
-    ...mapActions([
-      'fetchCycleAnalyticsData',
-      'fetchStageData',
-      'setSelectedStage',
-      'setDateRange',
-    ]),
+    ...mapActions(['fetchStageData', 'setSelectedStage', 'setDateRange']),
     handleDateSelect(daysInPast) {
       this.setDateRange(daysInPast);
     },

app/assets/stylesheets/page_bundles/cycle_analytics.scss

@@ -3,293 +3,4 @@
 .cycle-analytics {
   margin: 24px auto 0;
   position: relative;
-
-  .landing {
-    margin-top: 0;
-
-    .inner-content {
-      white-space: normal;
-
-      h4,
-      p {
-        margin: 7px 0 0;
-        max-width: 480px;
-        padding: 0 $gl-padding;
-
-        @include media-breakpoint-down(sm) {
-          margin: 0 auto;
-        }
-      }
-    }
-
-    .svg-container svg {
-      width: 136px;
-      height: 136px;
-    }
-  }
-
-  .col-headers {
-    ul {
-      margin: 0;
-      padding: 0;
-    }
-
-    li {
-      line-height: 50px;
-    }
-  }
-
-  .card {
-    .content-block {
-      padding: 24px 0;
-      border-bottom: 0;
-      position: relative;
-
-      @include media-breakpoint-down(xs) {
-        padding: 6px 0 24px;
-      }
-    }
-
-    .column {
-      text-align: center;
-
-      @include media-breakpoint-down(xs) {
-        padding: 15px 0;
-      }
-
-      .header {
-        font-size: 30px;
-        line-height: 38px;
-        font-weight: $gl-font-weight-normal;
-        margin: 0;
-      }
-
-      .text {
-        color: var(--gray-500, $gray-500);
-        margin: 0;
-      }
-
-      &:last-child {
-        @include media-breakpoint-down(xs) {
-          text-align: center;
-        }
-      }
-    }
-  }
-
-  .stage-panel-body {
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  .stage-nav,
-  .stage-entries {
-    display: flex;
-    vertical-align: top;
-    font-size: $gl-font-size;
-  }
-
-  .stage-nav {
-    width: 40%;
-    margin-bottom: 0;
-
-    ul {
-      padding: 0;
-      margin: 0;
-      width: 100%;
-    }
-
-    li {
-      list-style-type: none;
-    }
-
-    .stage-nav-item {
-      line-height: 65px;
-
-      &.active {
-        background: var(--blue-50, $blue-50);
-        border-color: var(--blue-300, $blue-300);
-        box-shadow: inset 4px 0 0 0 var(--blue-500, $blue-500);
-      }
-
-      &:hover:not(.active) {
-        background-color: var(--gray-10, $gray-10);
-        box-shadow: inset 2px 0 0 0 var(--border-color, $border-color);
-        cursor: pointer;
-      }
-
-      .stage-nav-item-cell.stage-name {
-        width: 44.5%;
-      }
-
-      .stage-nav-item-cell.stage-median {
-        min-width: 43%;
-      }
-
-      .stage-empty,
-      .not-available {
-        color: var(--gray-500, $gray-500);
-      }
-    }
-  }
-
-  .stage-panel-container {
-    width: 100%;
-    overflow: auto;
-  }
-
-  .stage-panel {
-    min-width: 968px;
-
-    .card-header {
-      padding: 0;
-      background-color: transparent;
-    }
-
-    .events-description {
-      line-height: 65px;
-    }
-
-    .events-info {
-      color: var(--gray-500, $gray-500);
-    }
-  }
-
-  .stage-events {
-    min-height: 467px;
-  }
-
-  .stage-event-list {
-    margin: 0;
-    padding: 0;
-  }
-
-  .stage-event-item {
-    @include clearfix;
-    list-style-type: none;
-    padding-bottom: $gl-padding;
-    margin-bottom: $gl-padding;
-    border-bottom: 1px solid var(--gray-50, $gray-50);
-
-    &:last-child {
-      border-bottom: 0;
-      margin-bottom: 0;
-    }
-
-    .item-details,
-    .item-time {
-      float: left;
-    }
-
-    .item-details {
-      width: 75%;
-    }
-
-    .item-title {
-      margin: 0 0 2px;
-
-      &.issue-title,
-      &.commit-title,
-      &.merge-request-title {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        max-width: 100%;
-        display: block;
-
-        a {
-          color: var(--gl-text-color, $gl-text-color);
-        }
-      }
-    }
-
-    .item-time {
-      width: 25%;
-      text-align: right;
-    }
-
-    .total-time {
-      font-size: $cycle-analytics-big-font;
-      color: var(--gl-text-color, $gl-text-color);
-
-      span {
-        color: var(--gl-text-color, $gl-text-color);
-        font-size: $gl-font-size;
-      }
-    }
-
-    .issue-date,
-    .build-date {
-      color: var(--gl-text-color, $gl-text-color);
-    }
-
-    .mr-link,
-    .issue-link,
-    .commit-author-link,
-    .issue-author-link {
-      color: var(--gl-text-color, $gl-text-color);
-    }
-
-    // Custom CSS for components
-    .item-conmmit-component {
-      .commit-icon {
-        svg {
-          display: inline-block;
-          width: 20px;
-          height: 20px;
-          vertical-align: bottom;
-        }
-      }
-    }
-
-    .merge-request-branch {
-      a {
-        max-width: 180px;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        display: inline-block;
-        vertical-align: bottom;
-      }
-    }
-  }
-
-  // Custom Styles for stage items
-  .item-build-component {
-    .item-title {
-      .icon-build-status {
-        float: left;
-        margin-right: 5px;
-        position: relative;
-        top: 2px;
-      }
-
-      .item-build-name {
-        color: var(--gl-text-color, $gl-text-color);
-      }
-
-      .pipeline-id {
-        color: var(--gl-text-color, $gl-text-color);
-        padding: 0 3px 0 0;
-      }
-
-      .ref-name {
-        color: var(--gray-900, $gray-900);
-        display: inline-block;
-        max-width: 180px;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-        line-height: 1.3;
-        vertical-align: top;
-      }
-
-      .commit-sha {
-        color: var(--blue-600, $blue-600);
-        line-height: 1.3;
-        vertical-align: top;
-        font-weight: $gl-font-weight-normal;
-      }
-    }
-  }
 }

ee/app/assets/javascripts/analytics/shared/mixins/sortable_default_options.js

-/* global DocumentTouch */
-
-import sortableConfig from '~/sortable/sortable_config';
-import { NO_DRAG_CLASS } from '../constants';
-
-export default () => {
-  const touchEnabled =
-    'ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch);
-
-  return {
-    ...sortableConfig,
-    fallbackOnBody: false,
-    group: {
-      name: 'stages',
-    },
-    dataIdAttr: 'data-id',
-    dragClass: 'sortable-drag',
-    filter: `.${NO_DRAG_CLASS}`,
-    delay: touchEnabled ? 100 : 0,
-    scrollSensitivity: touchEnabled ? 60 : 100,
-    scrollSpeed: 20,
-    fallbackTolerance: 1,
-    onMove(e) {
-      return !e.related.classList.contains(NO_DRAG_CLASS);
-    },
-  };
-};

ee/app/assets/stylesheets/page_bundles/cycle_analytics.scss

@@ -29,32 +29,6 @@
   }
 }
 
-// This can be refactored once the offical design implementation is complete
-// https://gitlab.com/gitlab-org/gitlab/-/issues/211796
-.sortable-drag {
-  border-radius: 0.25rem;
-  background-color: var(--white, $white);
-  box-shadow: 0 0 0.25rem $gl-btn-active-background,
-    0 0.25rem 0.75rem $gl-btn-active-background;
-}
-
-// Since backend wraps event description in a paragraph
-// we need to remove common styles, i.e., spacing
-.stage-item-popover {
-  .stage-event-description p {
-    margin: 0 !important;
-  }
-
-  .popover-body {
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-  }
-
-  .metric-label {
-    flex: 0 0 20%;
-  }
-}
-
 .stage-list-move {
   transition: transform 0.15s;
 }

ee/spec/frontend/analytics/cycle_analytics/components/base_spec.js

@@ -53,8 +53,6 @@ localVue.use(Vuex);
 jest.mock('~/flash');
 
 const defaultStubs = {
-  'stage-event-list': true,
-  'stage-nav-item': true,
   'tasks-by-type-chart': true,
   'labels-selector': true,
   DurationChart: true,