Commit 2281a705 authored by Dannon Baker's avatar Dannon Baker
Browse files

Standardize "open in new tab" functionality across interactive tools 

Added new tab icon button to panel view and removed "(new tab)" text
from center, replacing with consistent external link icons.
parent 7ecbdb46

client/src/components/InteractiveTools/InteractiveTools.vue

+2 −3
Original line number Diff line number Diff line
@@ -125,17 +125,16 @@ onMounted(() => { 
                    :name="row.item.name"

                    @click.prevent="openInteractiveTool(row.item.id)"

                    >{{ row.item.name }}

                    <FontAwesomeIcon :icon="faExternalLinkAlt" />

                </a>

                <!-- Add a direct link option as well -->

                <a

                    v-if="row.item.target"

                    :id="createId('external-link', row.item.id)"

                    v-b-tooltip

                    class="ml-2"

                    title="Open in new tab"

                    :href="row.item.target"

                    target="_blank">

                    <small>(new tab)</small>

                    <FontAwesomeIcon :icon="faExternalLinkAlt" />

                </a>

            </template>

            <template v-slot:cell(job_info)="row">

client/src/components/Panels/InteractiveToolsPanel.vue

+17 −7
Original line number Diff line number Diff line 
<script setup lang="ts">

import { faStop, faTools } from "@fortawesome/free-solid-svg-icons";

import { faExternalLinkAlt, faStop, faTools } from "@fortawesome/free-solid-svg-icons";

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

import { storeToRefs } from "pinia";

import { computed, onMounted, ref } from "vue";
@@ -88,6 +88,15 @@ function openInteractiveTool(toolId: string) { 
                                | Created <UtcDate :date="tool.created_time" mode="elapsed" />

                            </div>

                        </div>

                        <div class="d-flex align-items-center">

                            <a

                                v-if="tool.target"

                                :href="tool.target"

                                target="_blank"

                                class="btn btn-sm btn-link text-muted me-1"

                                title="Open in new tab">

                                <FontAwesomeIcon :icon="faExternalLinkAlt" />

                            </a>

                            <button

                                class="btn btn-sm btn-link text-danger"

                                title="Stop this interactive tool"
@@ -97,6 +106,7 @@ function openInteractiveTool(toolId: string) { 
                        </div>

                    </div>

                </div>

            </div>

            <hr />

        </div>