Skip to content

feat: add ability YAML file upload UI#97

Open
deacon-mp wants to merge 2 commits into
masterfrom
feat/ability-yaml-upload
Open

feat: add ability YAML file upload UI#97
deacon-mp wants to merge 2 commits into
masterfrom
feat/ability-yaml-upload

Conversation

@deacon-mp
Copy link
Copy Markdown
Contributor

Summary

  • Adds "Import" button to Abilities view for uploading ability YAML files
  • New ImportAbilityModal component following the Payloads upload pattern
  • Uploads via POST /api/v2/abilities/upload (requires companion caldera core PR)
  • Matches existing UI styling and color scheme

Companion PR

  • Requires caldera core PR on branch feat/ability-yaml-upload for the backend endpoint

Test plan

  • Click Import button in Abilities view
  • Select a valid .yml ability file
  • Verify ability appears in the list after upload
  • Verify invalid files are rejected with error message

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds UI support for importing ability definitions from YAML into the Abilities view, aligning with the existing payload upload modal pattern and targeting a new backend upload endpoint.

Changes:

  • Adds an “Import” button to AbilitiesView to open an ability-import modal.
  • Introduces ImportAbilityModal for selecting and uploading .yml/.yaml files.
  • Adds abilityStore.uploadAbility() and a new modal flag under coreDisplayStore.modals.abilities.showImport.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

File Description
src/views/AbilitiesView.vue Adds Import button and includes the new import modal in the view.
src/stores/coreDisplayStore.js Adds modals.abilities.showImport state for controlling the new modal.
src/stores/abilityStore.js Adds uploadAbility() action that POSTs the YAML as multipart form data and refreshes abilities.
src/components/abilities/ImportAbilityModal.vue New modal component for selecting and uploading an ability YAML file.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/stores/abilityStore.js Outdated
await this.getAbilities($api);
return response;
} catch(error) {
console.error("Error uploading ability.", error);
Comment on lines +27 to +34
async function submitFile($event) {
const file = input.value.files[0];
await abilityStore.uploadAbility($api, file);

fileName.value = fileUploadPlaceholder;
isFileSelected.value = false;
modals.value.abilities.showImport = false;
}
}
}

async function submitFile($event) {
@clutester
Copy link
Copy Markdown
Contributor

  • Click Import button in Abilities view
  • Select a valid .yml ability file
  • Verify ability appears in the list after upload
  • Verify invalid files are rejected with error message

All tests completed on my end without issues.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants