Improved agent activity page

- Added tooltip to the empty state
- Removed 'strong' element

app/assets/javascripts/clusters/agents/components/activity_events_list.vue

 <script>
-import { GlLoadingIcon, GlEmptyState, GlLink, GlIcon, GlAlert } from '@gitlab/ui';
+import {
+  GlLoadingIcon,
+  GlEmptyState,
+  GlLink,
+  GlIcon,
+  GlAlert,
+  GlTooltipDirective,
+} from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { n__, s__, __ } from '~/locale';
 import { formatDate, getDayDifference, isToday } from '~/lib/utils/datetime_utility';
@@ -16,10 +23,14 @@ export default {
     GlIcon,
     ActivityHistoryItem,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   i18n: {
     emptyText: s__(
       'ClusterAgents|See Agent activity updates such as tokens created or revoked and clusters connected or not connected.',
     ),
+    emptyTooltip: s__('ClusterAgents|What is GitLab Agent activity?'),
     error: s__(
       'ClusterAgents|An error occurred while retrieving GitLab Agent activity. Reload the page to try again.',
     ),
@@ -150,12 +161,15 @@ export default {
       :svg-path="activityEmptyStateImage"
       :svg-height="150"
     >
-      <template #description>
-        <div>
-          <span>{{ $options.i18n.emptyText }}</span>
-
-          <gl-link :href="$options.emptyHelpLink"><gl-icon name="question" :size="14" /></gl-link>
-        </div>
+      <template #description
+        >{{ $options.i18n.emptyText }}
+        <gl-link
+          v-gl-tooltip
+          :href="$options.emptyHelpLink"
+          :title="$options.i18n.emptyTooltip"
+          :aria-label="$options.i18n.emptyTooltip"
+          ><gl-icon name="question" :size="14"
+        /></gl-link>
       </template>
     </gl-empty-state>
   </div>

app/assets/javascripts/clusters/agents/components/activity_history_item.vue

@@ -64,12 +64,12 @@ export default {
       <p class="gl-mt-2 gl-mb-0 gl-pb-2" :class="bodyClass">
         <gl-sprintf :message="eventDetails.body">
           <template #userName>
-            <strong>{{ eventDetails.user.name }}</strong>
+            <span class="gl-font-weight-bold">{{ eventDetails.user.name }}</span>
             <gl-link :href="eventDetails.user.webUrl">@{{ eventDetails.user.username }}</gl-link>
           </template>
 
           <template #strong="{ content }">
-            <strong> {{ content }} </strong>
+            <span class="gl-font-weight-bold"> {{ content }} </span>
           </template>
         </gl-sprintf>
         <time-ago-tooltip :time="eventDetails.recordedAt" />

locale/gitlab.pot

@@ -7676,6 +7676,9 @@ msgstr ""
 msgid "ClusterAgents|View all %{number} clusters"
 msgstr ""
 
+msgid "ClusterAgents|What is GitLab Agent activity?"
+msgstr ""
+
 msgid "ClusterAgents|You cannot see this token again after you close this window."
 msgstr ""