api-services-portal
api-services-portal copied to clipboard
UX/UI Confirmation Messages for Namespace Decommissioning
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
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 I don't think the link is valid anymore - do you have an updated one?
@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.
Sorry, @elisafw-ux can you send a new link?
@ikethecoder it's the same link but you have to accept my invite first bc only invited people can see it.
@elisafw-ux I reviewed the Figma designs - all looks great.
@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 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
Thanks, @elisafw-ux! This looks great to me.
@Jonesy ready to implement. Requirements above. Let me know if you have any questions!
@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.