Merge branch '463135-initialise-new-self-hosted-model-app' into 'master'

Initialise Self-hosted Model Create App

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



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

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

+<script>
+import { s__ } from '~/locale';
+import selfHostedModelCreateMutation from '../graphql/mutations/create_self_hosted_model.mutation.graphql';
+
+const MUTATION_NAME = 'aiSelfHostedModelCreate';
+
+export default {
+  name: 'NewSelfHostedModel',
+  props: {
+    basePath: {
+      type: String,
+      required: true,
+    },
+    modelOptions: {
+      type: Array,
+      required: true,
+    },
+  },
+  i18n: {
+    title: s__('AdminSelfHostedModels|Add self-hosted models'),
+    description: s__(
+      'AdminSelfHostedModels|Add a new AI model that can be used for GitLab Duo features.',
+    ),
+  },
+  mutationData: {
+    name: MUTATION_NAME,
+    mutation: selfHostedModelCreateMutation,
+  },
+};
+</script>
+<template>
+  <div>
+    <h1>{{ $options.i18n.title }}</h1>
+    <p class="gl-pt-3 gl-pb-2">
+      {{ $options.i18n.description }}
+    </p>
+    <!--
+      TODO: Add form for creating self hosted model.
+      The form will be passed props basePath, modelOptions and mutationData.
+    -->
+  </div>
+</template>

ee/app/assets/javascripts/pages/admin/ai/self_hosted_models/graphql/mutations/create_self_hosted_model.mutation.graphql

+mutation createSelfHostedModel($input: AiSelfHostedModelCreateInput!) {
+  aiSelfHostedModelCreate(input: $input) {
+    errors
+  }
+}

ee/app/assets/javascripts/pages/admin/ai/self_hosted_models/new/index.js

+import { initSimpleApp } from '~/helpers/init_simple_app_helper';
+import NewSelfHostedModel from '../components/new_self_hosted_model.vue';
+
+initSimpleApp('#js-new-self-hosted-model', NewSelfHostedModel, { withApolloProvider: true });

ee/app/views/admin/ai/self_hosted_models/new.html.haml

-- page_title s_('AdminSelfHostedModels|New self-hosted model')
-%h1.page-title.gl-font-size-h-display
-  = s_('AdminSelfHostedModels|New self-hosted model')
-= render 'form', url: admin_ai_self_hosted_models_path, back_path: admin_ai_self_hosted_models_path
+- page_title s_('AdminSelfHostedModels|Add self-hosted models')
+- if Feature.enabled?(:custom_models_vue_app, current_user)
+  - model_options = Ai::SelfHostedModel.models.map { |name, _| { modelValue: name.upcase, modelName: name.capitalize } }
+
+  #js-new-self-hosted-model{ data: { view_model: { basePath: admin_ai_self_hosted_models_path, modelOptions: model_options }.to_json } }
+- else
+  %h1.page-title.gl-text-size-h-display
+    = s_('AdminSelfHostedModels|Add self-hosted models')
+  = render 'form', url: admin_ai_self_hosted_models_path, back_path: admin_ai_self_hosted_models_path

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

@@ -30,3 +30,11 @@ export const mockAiSelfHostedModelsQueryResponse = {
     },
   },
 };
+
+export const SELF_HOSTED_MODEL_OPTIONS = [
+  { modelValue: 'MIXTRAL', modelName: 'Mixtral' },
+  { modelValue: 'MISTRAL', modelName: 'Mistral' },
+  { modelValue: 'CODEGEMMA', modelName: 'Codegemma' },
+  { modelValue: 'CODESTRAL', modelName: 'Codestral' },
+  { modelValue: 'CODELLAMA', modelName: 'Codellama' },
+];

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

+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import NewSelfHostedModel from 'ee/pages/admin/ai/self_hosted_models/components/new_self_hosted_model.vue';
+import { SELF_HOSTED_MODEL_OPTIONS } from './mock_data';
+
+describe('NewSelfHostedModel', () => {
+  let wrapper;
+
+  const basePath = '/admin/ai/self_hosted_models';
+
+  const createComponent = () => {
+    wrapper = mountExtended(NewSelfHostedModel, {
+      propsData: {
+        basePath,
+        modelOptions: SELF_HOSTED_MODEL_OPTIONS,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  it('has a title', () => {
+    expect(wrapper.text()).toMatch('Add self-hosted models');
+  });
+
+  it('has a description', () => {
+    expect(wrapper.text()).toMatch('Add a new AI model that can be used for GitLab Duo features.');
+  });
+});

locale/gitlab.pot

@@ -3729,9 +3729,15 @@ 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 self-hosted language models to use as backups for GitLab Duo features."
 msgstr ""
+msgid "AdminSelfHostedModels|Add self-hosted models"
+msgstr ""
+
 msgid "AdminSelfHostedModels|An API key is set"
 msgstr ""