tdm-calculator icon indicating copy to clipboard operation
tdm-calculator copied to clipboard

Design: prevent accidental deletion of submitted snapshots

Open ExperimentsInHonesty opened this issue 7 months ago • 7 comments

Overview

We need to prevent the accidental deletions of submitted snapshots so that we can maintain all records for submitted projects.

Details

Snapshots can currently be deleted on the My Projects Page and Page 5

Example from My Projects

The menus are identical on My Projects page and Page 5 Image

Remove delete option (do not grey out)

Action Items

  • [x] Assign yourself to this issue.
  • [x] Move the issue from Prioritized Backlog to In Progress.
  • [x] In Figma, move a blank page to the Design section.
  • [x] Change the Figma page's title to have the format "#Issue Number | Title | Assignee Name".
  • [x] Copy contents from the Figma Template page to this issue's Figma page.
  • [x] Include a link to this issue's Figma page in the Figma section below.
  • [x] Use the Figma page to design solutions for this issue.
  • Once this issue is ready to be reviewed:
    • [x] Add a comment tagging the team design lead that explains the design.
    • [x] Move it to the Visual Review column.
    • [x] Add the "ready for Design lead-[team]" label specific to your team.
    • [ ] Once you have received feedback from the team lead, implement feedback as necessary.
  • [ ] Use presentation structure to review proposed designs with the design director. Implement feedback as necessary.
  • [ ] Use presentation structure to review proposed designs with the product, development, and research teams. Implement feedback as necessary.
  • [ ] Create a new slide (or edit one if it already exists) in staging and add images and appropriate text
  • [ ] Receive design approval from stakeholders. Implement feedback as necessary.
  • [ ] Add any annotations to the Figma design that would help the developer with implementation.
  • [ ] Create a Ready for Dev section around the final designs on the Figma page.
  • [ ] Update the Figma Design System with changes resulting from the issue's final design, if applicable.
  • [ ] Update the Style Guide Presentation, if applicable.
  • [ ] Add a comment to the issue that references the final design and adds any annotations that would help the developer with implementation.
  • [ ] Create a development handoff issue that references the comment.
  • [ ] Move the Figma page to the Development section of the Figma file.
  • [ ] Add the development issue's number in parentheses at the beginning of the title of the Figma page.
  • [ ] Include the development handoff issue number in the GitHub section below.
  • [ ] Reassign any previous assignees to this issue.
  • [ ] Close this issue.

Resources

GitHub

Figma

Dev Site

Staging and Release decks

  • Staging Deck
    • [Staging slide, 2568]
  • Release Deck
    • [2025-MM-DD Release deck, slide ISSUE NUMBER]

ExperimentsInHonesty avatar Jun 11 '25 22:06 ExperimentsInHonesty

Last week @hDenison noticed this issue might not apply anymore and/or it's been completed. After we reviewed it during our design team meeting last week we all agree that's probably the case. Can you confirm? @Rabia2219

Maarimar avatar Nov 11 '25 21:11 Maarimar

@Maarimar @hDenison

@Maarimar said on 2025-11-11 at 1:58 PM: Last week @hDenison noticed this issue might not apply anymore and/or it's been completed. After we reviewed it during our design team meeting last week we all agree that's probably the case.

This is still needed

  1. on the dev site (which is why this design issue is needed)

  2. in the style guide (that the menu item exist or are conditional). The kebab menu is mentioned on Style Guide, Iconography from Material UI, but no where else in the document does it talk about the paterns of the kebab menu. Kebab menus can potentially exist anywhere that there is a project table (not all tables will need them).

  3. In the design system User Facing Screens The Figma Page: User Facing Screens

    Where and what is missing on My Projects

    The My Project's page section has no detail images of the kebab menu, with what menu items it has and what conditions each menu item might have to display or not to display. Image

    Where and what is missing on Page 5

    The Page 5 page section Has no "ACTION" button on it (the mockup is old), and also does not have the detail images of the action menu, with what menu items it has and what conditions each menu item might have to display or not to display. Image

ExperimentsInHonesty avatar Nov 12 '25 19:11 ExperimentsInHonesty

@ExperimentsInHonesty @Rabia2219 @Maarimar @AshishDes

Update #2568

Overview:

The issue asks to remove the delete option in the pop-over menu when clicking either the kabob menu on My Projects or action button on Page 5 to avoid accidental deletion of snapshots.

Progress:

Thank you for clarifying above. Currently, I have updated the new pop-over menu and removed the delete option. I also updated mocks for My Projects and CP Page 5 to match the current dev site and show this pop-over in use without -delete-.

Once everything gets approval, all documentation can be updated.

See Screenshots below

Screenshots

Pop Over Image Image Image
My Projects Image Image
CP Page 5 Image Image Image

hDenison avatar Nov 13 '25 01:11 hDenison

Update #2568

Figma Link

Overview:

The issue asks to remove the delete option in the pop-over when clicking either the kabob menu on My Projects or action button on Page 5 to avoid accidental deletion of snapshots.

Progress:

After 11/12/25, all hands meeting we clarified what's left and the decisions that need to be made to complete this issue.

  1. Choose new design for pop-over component without -delete- line item. We are looking at icon size, border color, and contrast of items. (see screenshots below)
Pop Over Designs Image Image Image Image Image
New Pop Over's In Use Image Image

Contrast:

I also ran a quick contrast check for these color combinations used for the component to make sure it's all accessible. This is based on the current bg color we use and the suggested design changes.

Dark Blue and White BG Image
Dark Navy and White BG Image

Closing Note:

*In the new Figma Mocks, I updated the icon color for CSV icon in the toolbar on 'My Projects' from black to 'dark navy' as discussed.

Note that icons are being audited in the background, and once we view the state of everything, we can make final decisions and updates for consistency.

hDenison avatar Nov 13 '25 19:11 hDenison

@hDenison we will review this tonight

ExperimentsInHonesty avatar Nov 19 '25 20:11 ExperimentsInHonesty

ExperimentsInHonesty avatar Nov 20 '25 02:11 ExperimentsInHonesty

Notes from meeting 11/19/25

@hDenison will implement the following:

  1. Update all icons to be dark navy
  2. Suggest icon size adjustments based on research findings and update Pop Over design
  3. Use search box grey for border color

hDenison avatar Nov 20 '25 02:11 hDenison

@hDenison Please provide update

Instructions
  1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
  2. Blockers: "Difficulties or errors encountered."
  3. Availability: "How much time will you have this week to work on this issue?"
  4. ETA: "When do you expect this issue to be completed?"
  5. Pictures (if necessary): "Add any pictures that will help illustrate what you are working on."

You can use this template

1. Progress: 
2. Blockers: 
3. Availability:
4. ETA:
5. Pictures (if necessary): 

Rabia2219 avatar Jan 14 '26 20:01 Rabia2219