Merge branch 'add-devops-adoption-table-cell-flag-component' into 'master'

Add DevopsAdoptionTableCellFlag component

See merge request gitlab-org/gitlab!47376

ee/app/assets/javascripts/admin/dev_ops_report/components/devops_adoption_table_cell_flag.vue

+<script>
+export default {
+  name: 'DevopsAdoptionTableCellFlag',
+  props: {
+    enabled: {
+      type: Boolean,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <span class="circle" :class="{ 'circle-enabled': enabled }"></span>
+</template>

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

+@import '../../../../../app/assets/stylesheets/page_bundles/dev_ops_report';
+
+.circle {
+  width: $gl-spacing-scale-3;
+  height: $gl-spacing-scale-3;
+  border: 1px solid var(--gray-300, $gray-300);
+  border-radius: $avatar-radius;
+  @include gl-display-inline-block;
+
+  &-enabled {
+    border: 1px solid var(--indigo-800, $indigo-800);
+    background-color: var(--indigo-600, $indigo-600);
+  }
+}

ee/spec/frontend/admin/dev_ops_report/components/devops_adoption_table_cell_flag_spec.js

+import { shallowMount } from '@vue/test-utils';
+import DevopsAdoptionTableCellFlag from 'ee/admin/dev_ops_report/components/devops_adoption_table_cell_flag.vue';
+
+describe('DevopsAdoptionTableCellFlag', () => {
+  let wrapper;
+
+  const createComponent = props => {
+    wrapper = shallowMount(DevopsAdoptionTableCellFlag, {
+      propsData: {
+        enabled: true,
+        ...props,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('contains the circle-enabled class when enabled', () => {
+    createComponent();
+
+    expect(wrapper.classes()).toContain('circle');
+    expect(wrapper.classes()).toContain('circle-enabled');
+  });
+
+  it('does not contain the circle-enabled class when disabled', () => {
+    createComponent({ enabled: false });
+
+    expect(wrapper.classes()).toContain('circle');
+    expect(wrapper.classes()).not.toContain('circle-enabled');
+  });
+});