Add variant to DA cell flag

This commit exposes a new prop on
the DevOps Adoption cell flag component

This new prop allows the color to
be customized by passing in a variant

ee/app/assets/javascripts/analytics/devops_report/devops_adoption/components/devops_adoption_table_cell_flag.vue

@@ -16,6 +16,11 @@ export default {
       type: Boolean,
       required: true,
     },
+    variant: {
+      type: String,
+      required: false,
+      default: 'default',
+    },
   },
   computed: {
     tooltipText() {
@@ -28,6 +33,6 @@ export default {
   <span
     v-gl-tooltip.hover="tooltipText"
     class="circle"
-    :class="{ 'circle-enabled': enabled }"
+    :class="{ [`circle-enabled-${variant}`]: enabled }"
   ></span>
 </template>

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

 @import 'page_bundles/mixins_and_variables_and_functions';
 
+@mixin important-background($color) {
+  background-color: $color !important;
+}
+
+@mixin circle-fill($color) {
+  border: 1px solid $color;
+  @include important-background($color);
+}
+
 .circle {
   width: $gl-spacing-scale-3;
   height: $gl-spacing-scale-3;
@@ -8,8 +17,25 @@
   @include gl-display-inline-block;
 
   &-enabled {
-    border: 1px solid var(--indigo-800, $indigo-800);
-    background-color: var(--indigo-600, $indigo-600);
+    &-default {
+      @include circle-fill($indigo-600);
+    }
+
+    &-primary {
+      @include circle-fill($data-viz-blue-600);
+    }
+
+    &-warning {
+      @include circle-fill($data-viz-orange-600);
+    }
+
+    &-info {
+      @include circle-fill($data-viz-aqua-500);
+    }
+
+    &-success {
+      @include circle-fill($data-viz-green-600);
+    }
   }
 }
 
@@ -31,3 +57,21 @@
     @include gl-display-none;
   }
 }
+
+.progress-bar {
+  &.bg-primary {
+    @include important-background($data-viz-blue-600);
+  }
+
+  &.bg-warning {
+    @include important-background($data-viz-orange-600);
+  }
+
+  &.bg-info {
+    @include important-background($data-viz-aqua-500);
+  }
+
+  &.bg-success {
+    @include important-background($data-viz-green-600);
+  }
+}

ee/spec/frontend/analytics/devops_report/devops_adoption/components/__snapshots__/devops_adoption_table_cell_flag_spec.js.snap

@@ -8,13 +8,13 @@ exports[`DevopsAdoptionTableCellFlag disabled matches the snapshot 1`] = `
 
 exports[`DevopsAdoptionTableCellFlag disabled when the enabled flag is changed to true matches the snapshot 1`] = `
 <span
-  class="circle circle-enabled"
+  class="circle circle-enabled-default"
 />
 `;
 
 exports[`DevopsAdoptionTableCellFlag enabled matches the snapshot 1`] = `
 <span
-  class="circle circle-enabled"
+  class="circle circle-enabled-default"
 />
 `;
 
@@ -23,3 +23,9 @@ exports[`DevopsAdoptionTableCellFlag enabled when the enabled flag is changed to
   class="circle"
 />
 `;
+
+exports[`DevopsAdoptionTableCellFlag enabled with a variant specified matches the snapshot 1`] = `
+<span
+  class="circle circle-enabled-primary"
+/>
+`;

ee/spec/frontend/analytics/devops_report/devops_adoption/components/devops_adoption_table_cell_flag_spec.js

@@ -54,6 +54,18 @@ describe('DevopsAdoptionTableCellFlag', () => {
         expect(tooltip.value).toBe('Not adopted');
       });
     });
+
+    describe('with a variant specified', () => {
+      beforeEach(async () => {
+        wrapper.setProps({ variant: 'primary' });
+
+        await wrapper.vm.$nextTick();
+      });
+
+      it('matches the snapshot', () => {
+        expect(wrapper.element).toMatchSnapshot();
+      });
+    });
   });
 
   describe('disabled', () => {