api-services-portal icon indicating copy to clipboard operation
api-services-portal copied to clipboard

UX/UI Confirmation Messages for Namespace Decommissioning

Open elisafw-ux opened this issue 3 years ago • 13 comments

UX for Delete Namespace and Delete Environment to show messaging for the warning, impact and confirmation UX for Delete Authorization Profile and Delete Product to block deletion based on above requirements

elisafw-ux avatar Jul 13 '22 14:07 elisafw-ux

GIVEN I have namespaces AND the namespaces currently have active consumers WHEN I go to delete those namespaces THEN I see a message informing me why my namespace was not deleted

GIVEN I have namespaces AND the namespaces currently have (?) WHEN I go to delete those namespaces THEN I see a message informing me why my namespace was not deleted

@ikethecoder did I understand the scenarios correctly?

@ikethecoder please review the updated changes

elisafw-ux avatar Jan 02 '23 18:01 elisafw-ux

@elisafw-ux I don't think the link is valid anymore - do you have an updated one?

ikethecoder avatar Jan 31 '23 22:01 ikethecoder

@ikethecoder I sent you a Figma invite to your email. Once you accept it, click on this https://www.figma.com/file/00SZt0Ezx1DGz1x1tlcNLL/APS-Portal-Designs?node-id=28532%3A15765&t=LGPxFB4qWqI4oRA8-1 to view the mockup.

elisafw-ux avatar Feb 03 '23 22:02 elisafw-ux

Sorry, @elisafw-ux can you send a new link?

ikethecoder avatar Feb 13 '23 22:02 ikethecoder

@ikethecoder it's the same link but you have to accept my invite first bc only invited people can see it.

elisafw-ux avatar Feb 13 '23 22:02 elisafw-ux

@elisafw-ux I reviewed the Figma designs - all looks great.

ikethecoder avatar Feb 18 '23 01:02 ikethecoder

@ikethecoder we probably need to brainstorm this again when you get a chance.

The criteria is going to be: If there are active services and consumer credentials in a namespace, users cannot delete it and they would need to contact us.

I adjusted the designs to reflect this but this creates a cascading problem where every time a user wants to delete an environment or a product, they would also need to contact us and I am not sure that's good UX and it also defeats the purpose of self-serve.

elisafw-ux avatar Feb 24 '23 19:02 elisafw-ux

@elisafw-ux do you want to propose an alternative more in line with guiding principles, or should we discuss as a team?

Requirements:

  • The confirmation modal will prevent users from deleting a namespace, a product, a product environment, or an authorization profile if there are consumer credentials associated with it.

  • If the user tries to delete any of these with linked consumers, they will see a message asking them to remove all consumers before proceeding with the deletion.

  • For authorization profiles, the user needs to delete any associated product environments before they can delete the profile.

  • However, the confirmation modal will let users delete a namespace, a product, a product environment, or an authorization profile if there are no consumer credentials associated with it.

  • By clicking on the "Manage Consumers" or "Manage Product Environments" actions, users will be taken to the respective pages (Consumers, Products pages) to remove the linked consumers or product environments.

Designs Could you please review the messages on the confirmation modals. If good to go I'll pass it on for implementation @ikethecoder @chrsamp 

elisafw-ux avatar Mar 22 '23 22:03 elisafw-ux

Thanks, @elisafw-ux! This looks great to me.

chrsamp avatar Mar 24 '23 17:03 chrsamp

@Jonesy ready to implement. Requirements above. Let me know if you have any questions!

elisafw-ux avatar Mar 24 '23 17:03 elisafw-ux

@ikethecoder I have a simple proof of concept set up and am using the Environments section of the Products page to test it out. When the user clicks Delete Environment... the modal will make a GraphQL request like this:

  query CheckDeleteEnvironment($id: ID!) {
    deleteEnvironmentPermissions(id: $id) {
      allowed
      reason
    }
  }

and get back something like this if they're not allowed:

{
    "data": {
        "deleteEnvironmentPermissions": {
            "allowed": false,
            "reason": "The PharmaNet Electronic Prescribing other environment cannot be deleted as there are consumer credentials associated with it. Please remove all consumers linked to this environment before proceeding with the deletion."
        }
    }
}

and obviously an allowed: true if it's all good would have the danger red confirmation button as per the designs. Open to suggestions or additional API/GraphQL composition or naming.

@elisafw-ux one catch where I might not be able to completely match the design is highlighting the product name and environment with bold text and a label if the entire reason is returned back as a string from the API. But if we get parts back I could probably compose something that would be able to match it correctly.

Jonesy avatar Apr 04 '23 23:04 Jonesy