Galaxy PR #21516 Component Review - Bootstrap-Vue to Galaxy Components Migration

gistfile0.txt

# Component Review: PR #21516 (Workflow Import UI Refactor)

## Issues Found

### 1. **TrsImport.vue:3** - Uses `BButton`, `BCard`, `BCardBody`, `BCardTitle` from bootstrap-vue
```vue
<!-- Current -->
import { BAlert, BButton, BCard, BCardBody, BCardTitle } from "bootstrap-vue";
```
**BButton** at lines 219, 223 should use `GButton`:
```vue
<!-- Current (line 219) -->
<BButton v-if="showBackButton" variant="link" class="mb-5 p-0" @click="backToCards">

<!-- Suggested -->
<GButton v-if="showBackButton" color="grey" class="mb-5 p-0" @click="backToCards">
```
**BCard**, **BCardBody**, **BCardTitle** at lines 180-215 should use `GCard`:
```vue
<!-- Current -->
<BCard class="h-100 workflow-import-trs-search-link clickable-card" @click="selectView('trsSearch')">
    <BCardBody class="text-center">
        <BCardTitle>Search workflow registries</BCardTitle>
        <p>Search for workflows across configured GA4GH servers.</p>
    </BCardBody>
</BCard>

<!-- Suggested -->
<GCard 
    class="h-100 workflow-import-trs-search-link clickable-card" 
    title="Search workflow registries"
    @click="selectView('trsSearch')">
    <p>Search for workflows across configured GA4GH servers.</p>
</GCard>
```

### 2. **FromFile.vue:3** - Uses `BButton` from bootstrap-vue
```vue
<!-- Current -->
import { BAlert, BButton, BForm, BFormFile, BFormGroup } from "bootstrap-vue";
```
**BButton** at lines 108-116:
```vue
<!-- Current -->
<BButton
    id="workflow-import-button"
    type="submit"
    :disabled="isImportDisabled"
    :title="importTooltip"
    variant="primary">
    Import workflow
</BButton>

<!-- Suggested -->
<GButton
    id="workflow-import-button"
    type="submit"
    :disabled="isImportDisabled"
    :title="importTooltip"
    tooltip
    color="blue">
    Import workflow
</GButton>
```

### 3. **FromUrl.vue:3** - Uses `BButton` from bootstrap-vue
```vue
<!-- Current -->
import { BAlert, BButton, BForm, BFormGroup, BFormInput } from "bootstrap-vue";
```
**BButton** at lines 126-134:
```vue
<!-- Current -->
<BButton
    id="workflow-import-button"
    type="submit"
    :disabled="isImportDisabled"
    :title="importTooltip"
    variant="primary">
    Import workflow
</BButton>

<!-- Suggested -->
<GButton
    id="workflow-import-button"
    type="submit"
    :disabled="isImportDisabled"
    :title="importTooltip"
    tooltip
    color="blue">
    Import workflow
</GButton>
```

### 4. **TrsSearch.vue:5** - Uses `BButton`, `BCard` from bootstrap-vue
```vue
<!-- Current -->
import { BAlert, BButton, BCard, BFormInput, BInputGroup, BInputGroupAppend, BTable } from "bootstrap-vue";
```
**BButton** at lines 213-224 with `v-b-tooltip` directive:
```vue
<!-- Current -->
<BButton
    v-b-tooltip
    placement="bottom"
    size="sm"
    data-description="show help toggle"
    :title="searchHelp">
    <FontAwesomeIcon :icon="faQuestion" />
</BButton>

<!-- Suggested -->
<GButton
    tooltip
    size="small"
    data-description="show help toggle"
    :title="searchHelp">
    <FontAwesomeIcon :icon="faQuestion" />
</GButton>
```
**BCard** at lines 188, 247:
```vue
<!-- These are container cards, may need GCard evaluation -->
```

### 5. **TrsTool.vue:4** - Uses `BButton`, `BFormSelect` from bootstrap-vue
```vue
<!-- Current -->
import { BButton, BFormSelect } from "bootstrap-vue";
```
**BButton** at lines 85-93:
```vue
<!-- Current -->
<BButton
    v-if="showImportButton"
    class="workflow-import"
    :disabled="!selectedVersion"
    @click="importSelectedVersion">
    Import
    <FontAwesomeIcon :icon="faUpload" />
</BButton>

<!-- Suggested -->
<GButton
    v-if="showImportButton"
    class="workflow-import"
    :disabled="!selectedVersion"
    @click="importSelectedVersion">
    Import
    <FontAwesomeIcon :icon="faUpload" />
</GButton>
```

### 6. **TrsUrlImport.vue:2** - Uses `BButton` from bootstrap-vue
```vue
<!-- Current -->
import { BButton, BForm, BFormGroup, BFormInput } from "bootstrap-vue";
```
**BButton** at lines 78-86:
```vue
<!-- Current -->
<BButton
    id="trs-url-import-button"
    type="submit"
    :disabled="isImportDisabled"
    :title="importTooltip"
    variant="primary">
    Import workflow
</BButton>

<!-- Suggested -->
<GButton
    id="trs-url-import-button"
    type="submit"
    :disabled="isImportDisabled"
    :title="importTooltip"
    tooltip
    color="blue">
    Import workflow
</GButton>
```

### 7. **WorkflowImport.vue:2** - Uses `BCard`, `BCardBody`, `BCardTitle` from bootstrap-vue
```vue
<!-- Current -->
import { BCard, BCardBody, BCardTitle } from "bootstrap-vue";
```
**Multiple instances** (lines 188-286) of clickable selection cards:
```vue
<!-- Current -->
<BCard
    class="h-100 workflow-import-file-link clickable-card text-center wizard-selection-card"
    :class="{ selected: selectedMethod === 'upload' }"
    @click="selectMethod('upload')">
    <BCardTitle>Upload file</BCardTitle>
    <BCardBody>...</BCardBody>
</BCard>

<!-- Suggested: Migrate to GCard -->
<GCard
    class="h-100 workflow-import-file-link clickable-card text-center wizard-selection-card"
    :class="{ selected: selectedMethod === 'upload' }"
    title="Upload file"
    @click="selectMethod('upload')">
    ...
</GCard>
```

---

## Summary

| File | Deprecated Components | Count |
|------|----------------------|-------|
| TrsImport.vue | BButton, BCard, BCardBody, BCardTitle | 7 |
| FromFile.vue | BButton | 1 |
| FromUrl.vue | BButton | 1 |
| TrsSearch.vue | BButton (with v-b-tooltip), BCard | 4 |
| TrsTool.vue | BButton | 1 |
| TrsUrlImport.vue | BButton | 1 |
| WorkflowImport.vue | BCard, BCardBody, BCardTitle | 18 |

**Totals:**
- **33 deprecated component usages** found across **7 files**
- **BButton** → **GButton**: 8 instances (prop changes: `variant="primary"` → `color="blue"`, `size="sm"` → `size="small"`)
- **BCard/BCardBody/BCardTitle** → **GCard**: 25 instances
- **v-b-tooltip directive** → **tooltip prop**: 1 instance

## Notes

1. **BAlert, BForm, BFormInput, BFormFile, BFormGroup, BFormSelect, BTable, BInputGroup** - These don't have Galaxy replacements yet and are acceptable to use.

2. The `v-b-tooltip` directive usage in `TrsSearch.vue:214` should be replaced with the integrated `tooltip` prop on `GButton`.

3. The cards in this PR are used as interactive selection cards with click handlers. Verify that `GCard` supports the `@click` event and custom styling needed for the selection states.

## Reference PRs for Migration Examples

- [#19963](https://github.com/galaxyproject/galaxy/pull/19963) - Button migration
- [#20063](https://github.com/galaxyproject/galaxy/pull/20063) - Link migration
- [#20168](https://github.com/galaxyproject/galaxy/pull/20168) - Modal migration
- [#19785](https://github.com/galaxyproject/galaxy/pull/19785) - Card migration