Merge pull request #19084 from arash77/add-secrets-to-tools

[25.1] Support credentials(secrets/variables) in tool requirements

Author: mvdbeek

client/src/api/schema/schema.ts

@@ -11,6 +11,15 @@ export type NestedElementItem = NestedElementItems[number];
 export type FetchTargets = FetchDataPayload["targets"];
 export type AnyFetchTarget = FetchTargets[number];
 
+export interface ToolIdentifier {
+    toolId: string;
+    toolVersion: string;
+}
+
+export function getToolKey(toolId: string, toolVersion: string): string {
+    return `${toolId}@${toolVersion}`;
+}
+
 export function urlDataElement(identifier: string, uri: string): UrlDataElement {
     const element: UrlDataElement = {
         src: "url",

client/src/api/tools.ts

@@ -0,0 +1,122 @@
+/**
+ * User Credentials API
+ *
+ * This module provides type definitions, interfaces, and utility functions
+ * for managing user service credentials. It includes types for credential
+ * groups, service definitions, and helper functions for credential management.
+ *
+ * @module userCredentials
+ */
+
+import type { components } from "@/api";
+import { useToolsServiceCredentialsDefinitionsStore } from "@/stores/toolsServiceCredentialsDefinitionsStore";
+
+/**
+ * Just an alias for a string that represents a unique key for a service credentials identifier.
+ * The key is a combination of the service name and version, formatted as "name-version".
+ */
+type ServiceCredentialsIdentifierKey = string;
+
+/** Type for credential field types. */
+export type CredentialType = "variable" | "secret";
+/** Service credential group response from API. */
+export type ServiceCredentialGroupResponse = components["schemas"]["ServiceCredentialGroupResponse"];
+/** Payload for creating source credentials. */
+export type CreateSourceCredentialsPayload = components["schemas"]["CreateSourceCredentialsPayload"];
+/** User service credentials response from API. */
+export type UserServiceCredentialsResponse = components["schemas"]["UserServiceCredentialsResponse"];
+/** Service credential payload for API requests. */
+export type ServiceCredentialPayload = components["schemas"]["ServiceCredentialPayload"];
+/** Service credential group payload for API requests. */
+export type ServiceCredentialGroupPayload = components["schemas"]["ServiceCredentialGroupPayload"];
+/** User service credentials with definition response from API. */
+export type UserServiceCredentialsWithDefinitionResponse =
+    components["schemas"]["UserServiceCredentialsWithDefinitionResponse"];
+/** Payload for selecting current credential group. */
+export type SelectCurrentGroupPayload = components["schemas"]["SelectCurrentGroupPayload"];
+/** Service parameter definition from API. */
+export type ServiceParameterDefinition = components["schemas"]["ServiceParameterDefinition"];
+/** Service credentials definition from API. */
+export type ServiceCredentialsDefinition = components["schemas"]["ServiceCredentialsDefinition"];
+
+/**
+ * Service credentials identifier interface.
+ * @interface ServiceCredentialsIdentifier
+ */
+export interface ServiceCredentialsIdentifier {
+    /** Service name. */
+    name: string;
+    /** Service version. */
+    version: string;
+}
+
+/**
+ * Represents the definition of credentials for a particular source.
+ * A source can be an entity using a service that uses credentials, for example, a tool.
+ * A source may accept multiple services, each with its own credentials.
+ *
+ * The `services` map is indexed by the service name and version using the `getKeyFromCredentialsIdentifier` function.
+ * @interface SourceCredentialsDefinition
+ */
+export interface SourceCredentialsDefinition {
+    /** Type of the source (e.g., "tool"). */
+    sourceType: string;
+    /** Unique identifier for the source. */
+    sourceId: string;
+    /** Map of services indexed by service identifier key. */
+    services: Map<ServiceCredentialsIdentifierKey, ServiceCredentialsDefinition>;
+}
+
+/**
+ * Service credentials context interface.
+ * @interface ServiceCredentialsContext
+ * @todo Replace with proper API schema model when available.
+ */
+export interface ServiceCredentialsContext {
+    /** User credentials ID or null if not set. */
+    user_credentials_id: string | null;
+    /** Service name. */
+    name: string;
+    /** Service version. */
+    version: string;
+    /** Selected credential group information. */
+    selected_group: {
+        /** Group ID or null if not selected. */
+        id: string | null;
+        /** Group name. */
+        name: string;
+    };
+}
+
+/**
+ * Generates a unique key from service credentials identifier
+ * @param {ServiceCredentialsIdentifier} credentialsIdentifier - Service credentials identifier
+ * @returns {ServiceCredentialsIdentifierKey} Unique key in format "name-version"
+ */
+export function getKeyFromCredentialsIdentifier(
+    credentialsIdentifier: ServiceCredentialsIdentifier,
+): ServiceCredentialsIdentifierKey {
+    return `${credentialsIdentifier.name}-${credentialsIdentifier.version}`;
+}
+
+/**
+ * Transforms tool information into source credentials definition
+ * @param {string} toolId - The id of the tool
+ * @param {string} toolVersion - The version of the tool
+ * @returns {SourceCredentialsDefinition} Source credentials definition for the tool
+ */
+export function transformToSourceCredentials(toolId: string, toolVersion: string): SourceCredentialsDefinition {
+    const { getToolServiceCredentialsDefinitionsFor } = useToolsServiceCredentialsDefinitionsStore();
+
+    const toolCredentialsDefinitions = getToolServiceCredentialsDefinitionsFor(toolId, toolVersion);
+
+    const services = new Map(
+        toolCredentialsDefinitions.map((service) => [getKeyFromCredentialsIdentifier(service), service]),
+    );
+
+    return {
+        sourceType: "tool",
+        sourceId: toolId,
+        services,
+    };
+}

client/src/api/userCredentials.ts

@@ -17,6 +17,7 @@
             <span class="portlet-title">
                 <span v-if="icon" :class="['portlet-title-icon fa mr-1', icon]" />
                 <b class="portlet-title-text" itemprop="name">{{ title }}</b>
+                <slot name="title" />
                 <span class="portlet-title-description" itemprop="description">{{ description }}</span>
             </span>
         </div>
@@ -25,6 +26,7 @@
         </div>
     </div>
 </template>
+
 <script>
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";

client/src/components/Form/FormCard.vue

@@ -1,23 +1,25 @@
 <script setup>
-import { faHdd } from "@fortawesome/free-solid-svg-icons";
+import { faExclamationCircle, faHdd, faKey } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BModal } from "bootstrap-vue";
+import { BAlert, BModal, BPopover } from "bootstrap-vue";
 import Heading from "components/Common/Heading";
 import FormMessage from "components/Form/FormMessage";
 import ToolFooter from "components/Tool/ToolFooter";
 import ToolHelp from "components/Tool/ToolHelp";
 import { storeToRefs } from "pinia";
-import { computed, ref, watch } from "vue";
+import { computed, onBeforeMount, ref, watch } from "vue";
 
 import { useStorageLocationConfiguration } from "@/composables/storageLocation";
 import { useConfigStore } from "@/stores/configurationStore";
+import { useToolsServiceCredentialsDefinitionsStore } from "@/stores/toolsServiceCredentialsDefinitionsStore";
 import { useUserStore } from "@/stores/userStore";
 
 import ToolSelectPreferredObjectStore from "./ToolSelectPreferredObjectStore";
 import ToolTargetPreferredObjectStorePopover from "./ToolTargetPreferredObjectStorePopover";
 
 import GButton from "../BaseComponents/GButton.vue";
 import GButtonGroup from "../BaseComponents/GButtonGroup.vue";
+import ToolCredentials from "./ToolCredentials.vue";
 import ToolHelpForum from "./ToolHelpForum.vue";
 import ToolTutorialRecommendations from "./ToolTutorialRecommendations.vue";
 import FormCardSticky from "@/components/Form/FormCardSticky.vue";
@@ -77,10 +79,16 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    allowEditingCredentials: {
+        type: Boolean,
+        default: false,
+    },
 });
 
 const emit = defineEmits(["onChangeVersion", "updatePreferredObjectStoreId"]);
 
+const { setToolServiceCredentialsDefinitionFor } = useToolsServiceCredentialsDefinitionsStore();
+
 function onChangeVersion(v) {
     emit("onChangeVersion", v);
 }
@@ -94,6 +102,17 @@ watch(
     },
 );
 
+const credentialToolTip = computed(() => {
+    const credentialNames = props.options.credentials?.map((service) => service.name);
+    if (!credentialNames.value) {
+        return "";
+    }
+
+    return `This tool requires the following credentials when running the workflow: ${credentialNames.value.join(
+        ", ",
+    )}`;
+});
+
 const { isOnlyPreference } = useStorageLocationConfiguration();
 const { currentUser, isAnonymous } = storeToRefs(useUserStore());
 const { isLoaded: isConfigLoaded, config } = storeToRefs(useConfigStore());
@@ -126,6 +145,12 @@ const showHelpForum = computed(() => isConfigLoaded.value && config.value.enable
 const canGenerateTours = computed(() =>
     Boolean(props.allowGeneratedTours && isConfigLoaded.value && config.value.enable_tool_generated_tours),
 );
+
+onBeforeMount(() => {
+    if (props.options.credentials) {
+        setToolServiceCredentialsDefinitionFor(props.id, props.version, props.options.credentials);
+    }
+});
 </script>
 
 <template>
@@ -183,6 +208,38 @@ const canGenerateTours = computed(() =>
         </template>
 
         <template v-slot>
+            <template v-if="props.options.credentials?.length">
+                <ToolCredentials
+                    v-if="!props.allowEditingCredentials"
+                    class="mt-2"
+                    :tool-id="props.id"
+                    :tool-version="props.version"
+                    :job-credentials-context="props.options.job_credentials_context" />
+                <BAlert
+                    v-else-if="props.allowEditingCredentials"
+                    v-b-tooltip.hover
+                    variant="info"
+                    class="mt-2"
+                    show
+                    :title="credentialToolTip">
+                    <FontAwesomeIcon :icon="faKey" />
+                    Requires credentials to run this tool.
+
+                    <FontAwesomeIcon id="target" :icon="faExclamationCircle" fixed-width />
+                    <BPopover target="target" triggers="hover" boundary="window">
+                        <div class="d-flex flex-column">
+                            <span
+                                v-for="(service, index) in props.options.credentials"
+                                :key="index"
+                                class="d-flex flex-column">
+                                <b> {{ service.label }}: </b>
+                                {{ service.description }}
+                            </span>
+                        </div>
+                    </BPopover>
+                </BAlert>
+            </template>
+
             <FormMessage variant="danger" :message="errorText" :persistent="true" />
             <FormMessage :variant="props.messageVariant" :message="props.messageText" />
             <slot name="default" />