Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DLT-1110] Mapped Collection Endpoint Browse (1/4) #1208

Merged
merged 10 commits into from
Jan 14, 2025

Conversation

AronPerez
Copy link
Collaborator

@AronPerez AronPerez commented Jan 3, 2025

PR Description

This PR refactors out web/static/dlg_start_xfer.js

Tasks

  • - A description of the PR has been provided, and a diagram included if it is a new feature.
  • - Formatter has been run
  • - CHANGELOG comment has been added
  • - Labels have been assigned to the pr
  • - A reviwer has been added
  • - A user has been assigned to work on the pr
  • - If new feature a unit test has been added

Summary by Sourcery

Refactor the file transfer dialog into a reusable component.

New Features:

  • Introduce a new TransferDialog class to manage the transfer dialog.

Enhancements:

  • Move the transfer dialog logic to a new component.

Tests:

  • Add tests for the new TransferDialog component.

Copy link

sourcery-ai bot commented Jan 3, 2025

Reviewer's Guide by Sourcery

This PR refactors the data transfer dialog to use a new component-based architecture. It introduces a new TransferDialog component to manage data transfers and moves the data transfer dialog logic into this reusable component.

Sequence diagram for the transfer dialog initialization flow

sequenceDiagram
    participant App
    participant TD as TransferDialog
    participant TC as TransferDialogController
    participant TM as TransferModel
    participant TEM as TransferEndpointManager
    participant TUM as TransferUIManager

    App->>TD: show(mode, records, callback)
    activate TD
    TD->>TC: new TransferDialogController(mode, records, callback)
    activate TC
    TC->>TM: new TransferModel(mode, records)
    TC->>TEM: new TransferEndpointManager()
    TC->>TUM: new TransferUIManager()
    TC->>TUM: initializeComponents()
    TUM->>TUM: createDialog()
    TUM->>TUM: initializeButtons()
    TUM->>TUM: initializeRecordDisplay()
    TUM->>TUM: initializeEndpointInput()
    TC->>TEM: initialized = true
    TC->>TUM: showDialog()
    deactivate TC
    deactivate TD
Loading

Class diagram for the new TransferDialog component

classDiagram
    class TransferDialog {
        -currentDialog: TransferDialogController
        +show(mode, records, callback)
    }

    class TransferDialogController {
        -model: TransferModel
        -endpointManager: TransferEndpointManager
        -uiManager: TransferUIManager
        -ids: Array
        -callback: Function
        -services: Object
        +show()
    }

    class TransferModel {
        -mode: TransferMode
        -records: Array
        -selectedIds: Set
        -transferConfig: Object
        -stats: Object
        +isRecordValid(record)
        +getRecordInfo(item)
    }

    class TransferEndpointManager {
        -initialized: boolean
        -currentEndpoint: Object
        -endpointManagerList: Array
        -currentSearchToken: string
        -searchTokenIterator: number
        +searchEndpoint(endpoint, searchToken)
        +handlePathInput(searchToken)
    }

    class TransferUIManager {
        -state: Object
        -inputTimer: number
        +initializeComponents()
        +showDialog()
        +handleTransfer()
    }

    TransferDialog --> TransferDialogController
    TransferDialogController --> TransferModel
    TransferDialogController --> TransferEndpointManager
    TransferDialogController --> TransferUIManager
Loading

File-Level Changes

Change Details Files
Replaced calls to dlgStartXfer.show with transferDialog.show.
  • Updated function calls to use the new transferDialog.show method.
  • Removed dependency on dlgStartXfer.js.
web/static/dlg_data_new_edit.js
web/static/util.js
web/static/main_browse_tab.js
Created new component files for the transfer dialog.
  • Created new modules for managing transfer dialog UI, endpoint interactions, and data models.
  • Implemented component logic for handling transfer requests and responses.
web/static/components/transfer/index.js
web/static/components/transfer/transfer-dialog-controller.js
web/static/components/transfer/transfer-endpoint-manager.js
web/static/components/transfer/transfer-templates.js
web/static/components/transfer/transfer-ui-manager.js
web/static/models/transfer-model.js
Updated HTML to include the new transfer dialog component.
  • Replaced the script tag for dlg_start_xfer.js with components/transfer/index.js.
web/views/main.ect
Removed the dlg_start_xfer.js file.
  • Deleted the now-obsolete dlg_start_xfer.js file.
web/static/dlg_start_xfer.js

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time. You can also use
    this command to specify where the summary should be inserted.

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

@AronPerez AronPerez force-pushed the feat/DLT-1110/mapped-collection-endpoint-browse branch from d0215b7 to db9280d Compare January 3, 2025 16:48
@AronPerez AronPerez changed the title [DLT-1110] Mapped Collection Endpoint Browse [DLT-1110] Mapped Collection Endpoint Browse (1/4) Jan 3, 2025
@AronPerez AronPerez marked this pull request as ready for review January 7, 2025 21:44
Copy link

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

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

Hey @AronPerez - I've reviewed your changes and they look great!

Here's what I looked at during the review
  • 🟢 General issues: all looks good
  • 🟢 Security: all looks good
  • 🟢 Testing: all looks good
  • 🟢 Complexity: all looks good
  • 🟢 Documentation: all looks good

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

web/static/components/transfer/transfer-ui-manager.js Outdated Show resolved Hide resolved
web/static/components/transfer/transfer-ui-manager.js Outdated Show resolved Hide resolved
web/static/components/transfer/transfer-ui-manager.js Outdated Show resolved Hide resolved
web/static/components/transfer/transfer-ui-manager.js Outdated Show resolved Hide resolved
web/static/components/transfer/transfer-ui-manager.js Outdated Show resolved Hide resolved
web/static/models/transfer-model.js Outdated Show resolved Hide resolved
web/static/models/transfer-model.js Outdated Show resolved Hide resolved
web/static/models/transfer-model.js Outdated Show resolved Hide resolved
@JoshuaSBrown
Copy link
Collaborator

@sourcery-ai review

@JoshuaSBrown JoshuaSBrown self-requested a review January 8, 2025 13:23
@JoshuaSBrown JoshuaSBrown added the Component: Web UI Relates to web appp user interface label Jan 8, 2025
Copy link

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

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

Hey @AronPerez - I've reviewed your changes and they look great!

Here's what I looked at during the review
  • 🟢 General issues: all looks good
  • 🟢 Security: all looks good
  • 🟢 Testing: all looks good
  • 🟢 Complexity: all looks good
  • 🟢 Documentation: all looks good

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

web/static/components/transfer/transfer-ui-manager.js Outdated Show resolved Hide resolved
web/static/components/transfer/transfer-ui-manager.js Outdated Show resolved Hide resolved
web/static/components/transfer/transfer-ui-manager.js Outdated Show resolved Hide resolved
web/static/components/transfer/transfer-ui-manager.js Outdated Show resolved Hide resolved
web/static/components/transfer/transfer-ui-manager.js Outdated Show resolved Hide resolved
web/static/models/transfer-model.js Outdated Show resolved Hide resolved
web/static/models/transfer-model.js Outdated Show resolved Hide resolved
web/static/models/transfer-model.js Outdated Show resolved Hide resolved
@AronPerez
Copy link
Collaborator Author

All comments from AI are about if statement styling

@AronPerez AronPerez added the Type: Refactor Imlplementation change, same functionality label Jan 8, 2025
Copy link
Collaborator

@t-ramz t-ramz left a comment

Choose a reason for hiding this comment

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

I added a couple of comments, still trying to look through the ui manager and check diffs vs dlg_start_xfer.js

web/static/models/transfer-model.js Outdated Show resolved Hide resolved
Comment on lines 164 to 210
const titleText = `${item.id}&nbsp&nbsp&nbsp<span style='display:inline-block;width:9ch'>${info.info}</span>&nbsp${item.title}`;
return info.selectable ? titleText : `<span style='color:#808080'>${titleText}</span>`;
Copy link
Collaborator

Choose a reason for hiding this comment

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

please run the escapeHTML function on these to prevent injection attacks. title titleText are controlled by the user.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Updated

Copy link
Collaborator

@JoshuaSBrown JoshuaSBrown left a comment

Choose a reason for hiding this comment

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

Excellent addition, minor nitpicks, the only item that is blocking this pr from my point of view, is you need to escape the HTML for some of the userinfo, to avoid injection attacks.

Copy link
Collaborator

Choose a reason for hiding this comment

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

I think it would be helpful to have some visual demonstration such as screenshots or a brief gif to show that the changes are equivalent.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Here's the original uses https://confluence.ccs.ornl.gov/display/DATAFED/OVERVIEW+-+Use+Cases

Will add artifacts soon

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

@AronPerez AronPerez force-pushed the feat/DLT-1110/mapped-collection-endpoint-browse branch 5 times, most recently from db75bd9 to 5a57e0d Compare January 11, 2025 03:00
[DLT-1110] Add controller unit tests
[DLT-1110] Remove debug
[DLT-1110] Correct import statements, endpoint list
[DLT-1110] Refactor out into MVC
[DLT-1110] Add debug
[DLT-1110] Functioning modal, needs refactoring
[DLT-1110] Refactor dlg start transfer using OOO programming. Should be MVC cased on what I'm seeing but we'll see
@AronPerez AronPerez force-pushed the feat/DLT-1110/mapped-collection-endpoint-browse branch from dbe7432 to 3679a4f Compare January 14, 2025 18:46
@AronPerez
Copy link
Collaborator Author

@sourcery-ai review

Copy link

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

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

Hey @AronPerez - I've reviewed your changes - here's some feedback:

Overall Comments:

  • Consider adding unit tests for the new transfer components to ensure the complex transfer logic remains stable as the codebase evolves
Here's what I looked at during the review
  • 🟡 General issues: 1 issue found
  • 🟢 Security: all looks good
  • 🟢 Testing: all looks good
  • 🟢 Complexity: all looks good
  • 🟢 Documentation: all looks good

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

web/static/models/transfer-model.js Outdated Show resolved Hide resolved
web/static/models/transfer-model.js Outdated Show resolved Hide resolved
@AronPerez
Copy link
Collaborator Author

Artifacts

New Data Record

Screen.Recording.2025-01-14.at.2.46.19.PM.mov

Upload/Update Data Record

Screen.Recording.2025-01-14.at.2.48.27.PM.mov

Download/Get Data Record

UpdatedScreen.Recording.2025-01-14.at.1.27.00.PM.mov

Copy link
Collaborator

@JoshuaSBrown JoshuaSBrown left a comment

Choose a reason for hiding this comment

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

Approved on condition of the CI passing.

@AronPerez AronPerez merged commit 48199c5 into devel Jan 14, 2025
6 of 7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: Web UI Relates to web appp user interface Type: Refactor Imlplementation change, same functionality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Web, Globus] - Feature support listing collection contents from mapped collections from web ui
3 participants