First pass at implementing design

ee/app/assets/javascripts/vue_shared/license_compliance/license_management.vue

 <script>
 import { mapState, mapGetters, mapActions } from 'vuex';
-import { GlButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlButton, GlLoadingIcon, GlIcon, GlPopover } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { LICENSE_MANAGEMENT } from 'ee/vue_shared/license_compliance/store/constants';
@@ -20,6 +20,8 @@ export default {
     LicenseManagementRow,
     GlButton,
     GlLoadingIcon,
+    GlIcon,
+    GlPopover,
     PaginatedList,
     LicenseApprovals,
   },
@@ -77,13 +79,13 @@ export default {
 <template>
   <gl-loading-icon v-if="showLoadingSpinner" />
   <div v-else class="license-management">
-    <delete-confirmation-modal v-if="isAdmin" />
+    <delete-confirmation-modal v-if="false && isAdmin" />
 
     <paginated-list
       :list="managedLicenses"
       :empty-search-message="$options.emptySearchMessage"
       :empty-message="$options.emptyMessage"
-      :filterable="isAdmin"
+      :filterable="false && isAdmin"
       filter="name"
       data-qa-selector="license_compliance_list"
     >
@@ -104,14 +106,40 @@ export default {
 
         <template v-else>
           <div
-            v-for="header in tableHeaders"
-            :key="header.label"
             class="table-section"
-            :class="header.className"
+            :class="tableHeaders[0].className"
             role="rowheader"
           >
-            {{ header.label }}
+            {{ tableHeaders[0].label }}
+
+            <gl-icon
+              ref="reportInfo"
+              name="question"
+              class="text-info"
+              :aria-label="__('help')"
+              :size="14"
+            />
+            <gl-popover
+              :target="() => $refs.reportInfo.$el"
+              placement="bottom"
+              triggers="click blur"
+              :title="title"
+            >
+              <h5>Allowed</h5>
+              <span class="text-secondary"> {{s__('Licenses|Acceptable license to be used in the project')}}</span>
+              <h5>Denied</h5>
+              <span class="text-secondary"> {{s__('Licenses|Dissallow Merge request if detected and will instruct the developer to remove')}}</span>
+            </gl-popover>            
+          </div>     
+
+          <div
+            class="table-section"
+            :class="tableHeaders[1].className"
+            role="rowheader"
+          >
+             {{ tableHeaders[1].label }}
           </div>
+  
         </template>
       </template>
 
@@ -128,7 +156,7 @@ export default {
 
       <template #default="{ listItem }">
         <admin-license-management-row
-          v-if="isAdmin"
+          v-if="false && isAdmin"
           :license="listItem"
           :loading="isLicenseBeingUpdated(listItem.id)"
         />