Small visual updates to glql UI

Changelog: changed

app/assets/javascripts/glql/components/presenters/list.vue

 <script>
-import { GlIntersperse } from '@gitlab/ui';
+import { GlIcon, GlIntersperse, GlLink, GlSprintf } from '@gitlab/ui';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import { __ } from '~/locale';
 
 export default {
   name: 'ListPresenter',
   components: {
+    GlIcon,
     GlIntersperse,
+    GlLink,
+    GlSprintf,
   },
   inject: ['presenter'],
   props: {
@@ -32,6 +37,12 @@ export default {
     fields() {
       return this.config.fields;
     },
+    docsPath() {
+      return helpPagePath('user/glql');
+    },
+  },
+  i18n: {
+    generatedMessage: __('Generated by %{linkStart}GLQL%{linkEnd}'),
   },
 };
 </script>
@@ -43,16 +54,23 @@ export default {
         :key="itemIndex"
         :data-testid="`list-item-${itemIndex}`"
       >
-        <gl-intersperse separator=" - ">
+        <gl-intersperse separator=" · ">
           <span v-for="field in fields" :key="field.key">
             <component :is="presenter.forField(item, field.key)" />
           </span>
         </gl-intersperse>
       </li>
-      <li v-if="!items.length">
-        <em>{{ __('No data found for this query') }}</em>
-      </li>
+      <div v-if="!items.length" :dismissible="false" variant="tip" class="!gl-my-2">
+        {{ __('No data found for this query') }}
+      </div>
     </component>
-    <small>{{ __('Generated by GLQL') }}</small>
+    <div class="gl-mt-3 gl-flex gl-items-center gl-gap-1 gl-text-sm gl-text-subtle">
+      <gl-icon class="gl-mb-1 gl-mr-1" :size="12" name="tanuki" />
+      <gl-sprintf :message="$options.i18n.generatedMessage">
+        <template #link="{ content }">
+          <gl-link :href="docsPath" target="_blank">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </div>
   </div>
 </template>

app/assets/javascripts/glql/components/presenters/table.vue

 <script>
-import { GlIcon } from '@gitlab/ui';
+import { GlIcon, GlLink, GlSprintf } from '@gitlab/ui';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import { __ } from '~/locale';
 import Sorter from '../../core/sorter';
 import ThResizable from '../common/th_resizable.vue';
 
@@ -7,6 +9,8 @@ export default {
   name: 'TablePresenter',
   components: {
     GlIcon,
+    GlLink,
+    GlSprintf,
     ThResizable,
   },
   inject: ['presenter'],
@@ -33,11 +37,19 @@ export default {
       table: null,
     };
   },
+  computed: {
+    docsPath() {
+      return helpPagePath('user/glql');
+    },
+  },
   async mounted() {
     await this.$nextTick();
 
     this.table = this.$refs.table;
   },
+  i18n: {
+    generatedMessage: __('Generated by %{linkStart}GLQL%{linkEnd}'),
+  },
 };
 </script>
 <template>
@@ -72,11 +84,18 @@ export default {
         </tr>
         <tr v-if="!items.length">
           <td :colspan="fields.length" class="gl-text-center">
-            <em>{{ __('No data found for this query') }}</em>
+            {{ __('No data found for this query') }}
           </td>
         </tr>
       </tbody>
     </table>
-    <small>{{ __('Generated by GLQL') }}</small>
+    <div class="gl-mt-3 gl-flex gl-items-center gl-gap-1 gl-text-sm gl-text-subtle">
+      <gl-icon class="gl-mb-1 gl-mr-1" :size="12" name="tanuki" />
+      <gl-sprintf :message="$options.i18n.generatedMessage">
+        <template #link="{ content }">
+          <gl-link :href="docsPath" target="_blank">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </div>
   </div>
 </template>

locale/gitlab.pot

@@ -24224,7 +24224,7 @@ msgstr ""
 msgid "Generate site and private keys at"
 msgstr ""
-msgid "Generated by GLQL"
+msgid "Generated by %{linkStart}GLQL%{linkEnd}"
 msgstr ""
 msgid "Generated files are collapsed by default. To change this behavior, edit the %{tagStart}.gitattributes%{tagEnd} file. %{linkStart}Learn more.%{linkEnd}"

spec/frontend/glql/components/presenters/list_spec.js

@@ -50,9 +50,9 @@ describe('ListPresenter', () => {
     expect(htmlPresenter1.props('data')).toBe(MOCK_ISSUES.nodes[0].description);
     expect(htmlPresenter2.props('data')).toBe(MOCK_ISSUES.nodes[1].description);
 
-    expect(listItem1.text()).toEqual('Issue 1 (#1) - @foobar -  Open - This is a description');
+    expect(listItem1.text()).toEqual('Issue 1 (#1) · @foobar ·  Open · This is a description');
     expect(listItem2.text()).toEqual(
-      'Issue 2 (#2 - closed) - @janedoe -  Closed - This is another description',
+      'Issue 2 (#2 - closed) · @janedoe ·  Closed · This is another description',
     );
   });