Merge branch 'jh/front-end-tweaks-to-self-hosted-models-table' into 'master'

Align self-hosted models UI to new designs

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/167127



Merged-by: Tomas Bulva <tbulva@gitlab.com>
Approved-by: Eduardo Bonet <ebonet@gitlab.com>
Approved-by: Tim Noah <tnoah@gitlab.com>
Approved-by: Tomas Bulva <tbulva@gitlab.com>
Co-authored-by: Julie Huang <julhuang@gitlab.com>

ee/app/assets/javascripts/pages/admin/ai/self_hosted_models/components/app.vue

 <script>
 import { GlEmptyState, GlButton, GlSkeletonLoader } from '@gitlab/ui';
-import EmptyLabelsSvg from '@gitlab/svgs/dist/illustrations/empty-state/empty-labels-md.svg?url';
+import EmptyEnvironmentSvg from '@gitlab/svgs/dist/illustrations/empty-state/empty-environment-md.svg?url';
 import { s__ } from '~/locale';
 import { createAlert } from '~/alert';
 import getSelfHostedModelsQuery from '../queries/get_self_hosted_models.query.graphql';
@@ -25,11 +25,11 @@ export default {
     },
   },
   i18n: {
-    emptyStateTitle: s__('AdminSelfHostedModels|Define your set of self-hosted models'),
+    emptyStateTitle: s__('AdminSelfHostedModels|Get started with Self‑hosted models'),
     emptyStateDescription: s__(
-      'AdminSelfHostedModels|Add self-hosted language models to use as backups for GitLab Duo features.',
+      'AdminSelfHostedModels|Add and manage models that can be used for GitLab AI features.',
     ),
-    emptyStatePrimaryButtonText: s__('AdminSelfHostedModels|New self-hosted model'),
+    emptyStatePrimaryButtonText: s__('AdminSelfHostedModels|Add self-hosted model'),
     errorMessage: s__(
       'AdminSelfHostedModels|An error occurred while loading self-hosted models. Please try again.',
     ),
@@ -58,45 +58,42 @@ export default {
       return this.$apollo?.queries?.selfHostedModels?.loading;
     },
   },
-  emptyStateSvgPath: EmptyLabelsSvg,
+  emptyStateSvgPath: EmptyEnvironmentSvg,
 };
 </script>
 <template>
   <div>
-    <section>
-      <h1 class="page-title gl-text-size-h-display">
-        {{ s__('AdminSelfHostedModels|Self-hosted models') }}
-      </h1>
-      <div class="gl-items-top gl-flex gl-justify-between">
-        <p>
-          {{
-            s__(
-              'AdminSelfHostedModels|Self-hosted AI models can be used to power GitLab AI features.',
-            )
-          }}
-        </p>
-        <div v-if="hasModels" class="gl-pb-4">
-          <gl-button
-            category="primary"
-            variant="confirm"
-            size="small"
-            :href="newSelfHostedModelPath"
-            >{{ s__('AdminSelfHostedModels|New model') }}
-          </gl-button>
-        </div>
-      </div>
-    </section>
     <div v-if="!hasModels && !isLoading">
-      <gl-empty-state
-        :title="$options.i18n.emptyStateTitle"
-        :description="$options.i18n.emptyStateDescription"
-        :svg-path="$options.emptyStateSvgPath"
-        :svg-height="150"
-        :primary-button-text="$options.i18n.emptyStatePrimaryButtonText"
-        :primary-button-link="newSelfHostedModelPath"
-      />
+      <div class="justify-content-center gl-flex gl-items-center">
+        <gl-empty-state
+          class="gl-w-1/4"
+          :title="$options.i18n.emptyStateTitle"
+          :description="$options.i18n.emptyStateDescription"
+          :svg-path="$options.emptyStateSvgPath"
+          :svg-height="150"
+          :primary-button-text="$options.i18n.emptyStatePrimaryButtonText"
+          :primary-button-link="newSelfHostedModelPath"
+        />
+      </div>
     </div>
     <div v-else>
+      <section>
+        <h1 class="page-title gl-text-size-h-display">
+          {{ s__('AdminSelfHostedModels|Self-hosted models') }}
+        </h1>
+        <div class="gl-items-top gl-flex gl-justify-between gl-pb-2">
+          <p>
+            {{
+              s__('AdminSelfHostedModels|Manage AI models that can be used for GitLab AI features.')
+            }}
+          </p>
+          <div v-if="hasModels" class="gl-pb-4">
+            <gl-button category="primary" variant="confirm" :href="newSelfHostedModelPath"
+              >{{ s__('AdminSelfHostedModels|Add self-hosted model') }}
+            </gl-button>
+          </div>
+        </div>
+      </section>
       <gl-skeleton-loader v-if="isLoading" />
       <self-hosted-models-table v-else :models="selfHostedModels" :base-path="basePath" />
     </div>

ee/app/assets/javascripts/pages/admin/ai/self_hosted_models/components/self_hosted_models_table.vue

@@ -24,32 +24,32 @@ export default {
   fields: [
     {
       key: 'name',
-      label: __('Name'),
-      thClass: 'w-15p',
+      label: s__('AdminSelfHostedModels|Name'),
+      thClass: 'gl-w-2/8',
       tdClass: 'gl-content-center',
     },
     {
       key: 'model',
-      label: __('Model'),
-      thClass: 'w-15p',
+      label: s__('AdminSelfHostedModels|Model'),
+      thClass: 'gl-w-2/8',
       tdClass: 'gl-content-center',
     },
     {
       key: 'endpoint',
       label: s__('AdminSelfHostedModels|Endpoint'),
-      thClass: 'w-15p',
+      thClass: 'gl-w-2/8',
       tdClass: 'gl-content-center gl-text-ellipsis',
     },
     {
       key: 'has_api_key',
-      label: __('API key'),
-      thClass: 'w-15p',
-      tdClass: 'gl-content-center',
+      label: s__('AdminSelfHostedModels|API token'),
+      thClass: 'gl-w-1/8 gl-text-center',
+      tdClass: 'gl-content-center gl-text-center',
     },
     {
       key: 'edit',
       label: '',
-      thClass: 'w-15p',
+      thClass: 'gl-w-1/8',
       tdClass: 'gl-content-center gl-text-right',
     },
   ],
@@ -84,20 +84,15 @@ export default {
     <template #cell(has_api_key)="{ item }">
       <gl-icon
         v-if="item.hasApiToken"
-        :aria-label="s__('AdminSelfHostedModels|Model has API key')"
-        name="check-xs"
-      />
-      <gl-icon
-        v-else
-        :aria-label="s__('AdminSelfHostedModels|Model does not have API key')"
-        name="close-xs"
+        :aria-label="s__('AdminSelfHostedModels|Model uses an API token')"
+        name="check-circle"
       />
     </template>
     <template #cell(edit)="{ item }">
       <div>
         <gl-disclosure-dropdown
+          class="gl-py-2"
           category="tertiary"
-          variant="default"
           size="small"
           icon="ellipsis_v"
           :no-caret="true"

ee/spec/frontend/pages/admin/ai/self_hosted_models/app_spec.js

@@ -65,7 +65,7 @@ describe('SelfHostedModelsApp', () => {
       it('renders button to create new self-hosted model', () => {
         const button = findButton();
 
-        expect(button.text()).toBe('New model');
+        expect(button.text()).toBe('Add self-hosted model');
         expect(button.attributes('href')).toBe('/admin/ai/self_hosted_models/new');
       });
     });

ee/spec/frontend/pages/admin/ai/self_hosted_models/mock_data.js

@@ -12,7 +12,7 @@ export const mockSelfHostedModelsList = [
     name: 'mock-self-hosted-model-1',
     model: 'mixtral',
     endpoint: 'https://mock-endpoint-1.com',
-    hasApiToken: false,
+    hasApiToken: true,
   },
   {
     id: 'gid://gitlab/SelfHostedModel/2',

ee/spec/frontend/pages/admin/ai/self_hosted_models/self_hosted_models_table_spec.js

@@ -37,7 +37,7 @@ describe('SelfHostedModelsTable', () => {
       'Name',
       'Model',
       'Endpoint',
-      'API key',
+      'API token',
       '', // The 'edit' column does not have a header name
     ];
 
@@ -51,8 +51,8 @@ describe('SelfHostedModelsTable', () => {
 
     expect(firstModel.text()).toContain('mock-self-hosted-model-1');
     expect(firstModel.text()).toContain('mixtral');
-
-    expect(firstModel.find('[data-testid="close-xs-icon"]').exists()).toBe(true);
+    expect(firstModel.text()).toContain('https://mock-endpoint-1.com');
+    expect(firstModel.find('[data-testid="check-circle-icon"]').exists()).toBe(true);
   });
 
   it('renders a disclosure dropdown for each self-hosted model entry', () => {

locale/gitlab.pot

@@ -3868,15 +3868,24 @@ msgstr ""
 msgid "AdminSelfHostedModels|API Key (optional)"
 msgstr ""
+msgid "AdminSelfHostedModels|API token"
+msgstr ""
+
 msgid "AdminSelfHostedModels|API token (if needed)"
 msgstr ""
 msgid "AdminSelfHostedModels|Add a new AI model that can be used for GitLab Duo features."
 msgstr ""
+msgid "AdminSelfHostedModels|Add and manage models that can be used for GitLab AI features."
+msgstr ""
+
 msgid "AdminSelfHostedModels|Add self-hosted language models to use as backups for GitLab Duo features."
 msgstr ""
+msgid "AdminSelfHostedModels|Add self-hosted model"
+msgstr ""
+
 msgid "AdminSelfHostedModels|Add self-hosted models"
 msgstr ""
@@ -3919,19 +3928,22 @@ msgstr ""
 msgid "AdminSelfHostedModels|Endpoint"
 msgstr ""
-msgid "AdminSelfHostedModels|Model"
+msgid "AdminSelfHostedModels|Get started with Self‑hosted models"
+msgstr ""
+
+msgid "AdminSelfHostedModels|Manage AI models that can be used for GitLab AI features."
 msgstr ""
-msgid "AdminSelfHostedModels|Model does not have API key"
+msgid "AdminSelfHostedModels|Model"
 msgstr ""
-msgid "AdminSelfHostedModels|Model has API key"
+msgid "AdminSelfHostedModels|Model uses an API token"
 msgstr ""
-msgid "AdminSelfHostedModels|Name the deployment (must be unique)"
+msgid "AdminSelfHostedModels|Name"
 msgstr ""
-msgid "AdminSelfHostedModels|New model"
+msgid "AdminSelfHostedModels|Name the deployment (must be unique)"
 msgstr ""
 msgid "AdminSelfHostedModels|New self-hosted model"
@@ -3955,9 +3967,6 @@ msgstr ""
 msgid "AdminSelfHostedModels|Select model"
 msgstr ""
-msgid "AdminSelfHostedModels|Self-hosted AI models can be used to power GitLab AI features."
-msgstr ""
-
 msgid "AdminSelfHostedModels|Self-hosted models"
 msgstr ""
@@ -34944,9 +34953,6 @@ msgstr ""
 msgid "Modal|Close"
 msgstr ""
-msgid "Model"
-msgstr ""
-
 msgid "Model description"
 msgstr ""