[ISSUE#1397] Fix file explorer opening when clicking on HeroCard button

[denscollo]

Fixes #1397

Description

Added validation to check the value of the URL before using it because if it's empty, the file explorer will open by default.

Specific changes

• Add URL validation when hyperlink is open

Testing

We used the user hero card to test the fix.

[justinwilaby]

There is nothing wrong with this approach however, I'm confident this logic should be reviewed for incorporation into WebChat at this location. It seems like an enhancement that could have value there.

[justinwilaby]

This is related to #1504 and #368 in webchat.

@cwhitten - can you please provide definitive guidance on an action item here? Although not ideal, we can adopt this PR as an interim solution until a WebChat solution is available or I can work with @compulim and @corinagum to revive #1604

[cwhitten]

The window.open ponyfill in WebChat landed here.

[justinwilaby]

I'm seeing that just now. It looks like we want to implement the cardActionMiddleware in the Emulator and then perform the checks when a URL is opened.

@denscollo - From the information @cwhitten provided, you should work towards the implementation listed in this example as it represents a more idiomatic approach to this solution.

[justinwilaby]

Please use this example to solve this defect. Feel free to reach out if you need help.

[denscollo]

@justinwilaby @cwhitten thanks for the feedback! We'll be working by using the example and let you know as soon as we have the new solution.

[cwhitten]

@denscollo is this ready for review? At the moment we're seeing an extremely small diff.

[tonyanziano]

@denscollo I believe what Justin meant by using that example, is that we want to implement the cardActionMiddleware in the Emulator and then pass it into the Web Chat component as a prop when we render it here.

So it would look something like:

chat.tsx

const cardActionMiddleware = () => next => async ({ cardAction, getSignInUrl }) => {
  // your fix
};

public render() {

  <ReactWebChat
    cardActionMiddleware={cardActionMiddleware}
    ...
  />

[justinwilaby]

Thank you for providing this clarification @tonyanziano

[denscollo]

@justinwilaby @tonyanziano Thanks for the clarification! This is still a WIP, we are working on it. We are reviewing the changes on our fork and then we'll push them.

[denscollo]

@justinwilaby @tonyanziano the PR is now ready for review!

[justinwilaby]

Sorry to have to do this again. It's our fault for not being specific on the original github issue. I'm requesting changes to remove confirm and use a custom dialog using the DialogService. This will maintain consistency across the app and prevent possible side-effects from a blocking operation.

Also, since this is new functionality, unit tests need to accompany this PR.

[justinwilaby]

We typically favor custom dialogs over native since UX continuity is better across the app. Also, confirm is thread-blocking and may have side-effects if the main process sends IPC messages during the display of this confirmation modal.

I realize this is more work to create a custom prompt using the DialogService but I believe it's the right thing to do. Please feel free to reach out to me if you need guidance on implementing this.

[denscollo]

@justinwilaby Ok, we'll be working on this approach and let you know if we have doubts. Thanks!

Stale

[denscollo]

@justinwilaby we finished applying the feedback, so it's ready for review!

[tonyanziano]

Going to pull the branch down and test it out locally. I had some minor comments.

[tonyanziano]

Looks great now!