Unverified Commit 4c731d51 authored by Alireza Heidari's avatar Alireza Heidari
Browse files

Refactors credential display to use slots 

Moves credential-related UI elements from FormCard component to WorkflowRunDefaultStep to improve component separation of concerns.

Uses template slots to allow parent components to customize title area content rather than passing credential data as props.
parent cadfeecb

client/src/components/Form/FormCard.vue

+3 −18
Original line number Diff line number Diff line
@@ -17,17 +17,11 @@ 
            <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>

                <span v-if="credentialInfo?.toolId" v-b-tooltip.hover title="Uses credentials">

                    <FontAwesomeIcon :icon="faKey" fixed-width />

                </span>

                <slot name="title" />

                <span class="portlet-title-description" itemprop="description">{{ description }}</span>

            </span>

        </div>

        <div v-show="expanded" class="portlet-content">

            <ToolCredentials

                v-if="credentialInfo?.toolId"

                :tool-id="credentialInfo.toolId"

                :tool-version="credentialInfo.toolVersion" />

            <slot name="body" />

        </div>

    </div>
@@ -35,18 +29,15 @@ 


<script>

import { library } from "@fortawesome/fontawesome-svg-core";

import { faChevronDown, faChevronUp, faKey } from "@fortawesome/free-solid-svg-icons";

import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";

import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

import { IconDefinition } from "font-awesome-6";



import ToolCredentials from "@/components/Tool/ToolCredentials.vue";



library.add(faChevronUp);

library.add(faChevronDown);



export default {

    components: {

        ToolCredentials,

        FontAwesomeIcon,

    },

    props: {
@@ -70,15 +61,9 @@ export default { 
            type: Boolean,

            default: true,

        },

        credentialInfo: {

            type: Object,

            default: null,

        },

    },

    data() {

        return {

            faKey,

        };

        return {};

    },

    computed: {

        portletHeaderClasses() {

client/src/components/Workflow/Run/WorkflowRunDefaultStep.vue

+17 −7
Original line number Diff line number Diff line 
<template>

    <div :step-label="model.step_label">

        <FormCard

            :title="model.fixed_title"

            :icon="icon"

            :collapsible="true"

            :expanded.sync="expanded"

            :credential-info="credentialInfo">

        <FormCard :title="model.fixed_title" :icon="icon" :collapsible="true" :expanded.sync="expanded">

            <template v-slot:title>

                <span v-if="credentialInfo?.toolId" v-b-tooltip.hover title="Uses credentials">

                    <FontAwesomeIcon :icon="faKey" fixed-width />

                </span>

            </template>

            <template v-slot:body>

                <ToolCredentials

                    v-if="credentialInfo?.toolId"

                    :tool-id="credentialInfo.toolId"

                    :tool-version="credentialInfo.toolVersion" />

                <FormMessage :message="errorText" variant="danger" :persistent="true" />

                <FormDisplay

                    :inputs="modelInputs"
@@ -27,7 +31,8 @@ 


<script>

import { library } from "@fortawesome/fontawesome-svg-core";

import { faEdit, faUndo } from "@fortawesome/free-solid-svg-icons";

import { faEdit, faKey, faUndo } from "@fortawesome/free-solid-svg-icons";

import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

import { getGalaxyInstance } from "app";

import FormCard from "components/Form/FormCard";

import FormDisplay from "components/Form/FormDisplay";
@@ -39,10 +44,14 @@ import { useHistoryItemsStore } from "stores/historyItemsStore"; 


import { getTool } from "./services";



import ToolCredentials from "@/components/Tool/ToolCredentials.vue";



library.add(faEdit, faUndo);



export default {

    components: {

        FontAwesomeIcon,

        ToolCredentials,

        FormDisplay,

        FormCard,

        FormMessage,
@@ -67,6 +76,7 @@ export default { 
    },

    data() {

        return {

            faKey,

            expanded: this.model.expanded,

            errorText: null,

            modelData: {},