Columns Block: You should see a prompt that asks you to confirm before you remove the column.

[enejb]

Describe the bug

Currently when you remove a column in the columns block. If the column contains content. The column content gets removed and there doesn't seem to be a way to get that content back.

We should confirm with the user before removing the column in case the action was a mistake. Since it could potentially be pretty destructive.

To Reproduce
Steps to reproduce the behavior:

1. Add a columns block and add third cloumn with content in it.
2. Expand the columns settings and remove the third column by clicking the minus circle.
3. Notice that it doesn't ask you to confirm that you want to remove that column.

Expected behavior
You should see a prompt that asks you to confirm before you remove the column.

Smartphone (please complete the following information):

• Device: iPhone
• OS: iOS 13
• Version 1.31.0

[pinarol]

The column content gets removed and there doesn't seem to be a way to get that content back.

hey Enej 👋 Undo button should bring back the removed content. That applies for everything actually. We don't need to worry much about bringing back the content because it is possible in multiple ways. Both the undo button and autosaved revisions give us options to bring back the content.

[guarani]

Hey @enejb, I came across this while working on writing flow issues. Is this issue still applicable?

Expand the columns settings and remove the third column by clicking the minus circle.

I'm not clear on what the "minus circle" is here. I'm not super familiar with the column block, but I think the UI for deleting blocks in general changed fairly recently. Removing a block used to be one-step: with a block selected, just tap the toolbar trash button. This changed to a two-step process: with a block selected, tap the ••• ellipsis button, then tap "Remove block".

So I'm not sure if this is now a "safer" UI, and therefore we don't need to address this issue anymore.

Also, @pinarol noted above that the undo button should allow any deleted columns to be restored.

[rachelmcr]

I just ran into this while beta testing and using the Columns block in depth for the first time. I'll admit it didn't even occur to me to use the Undo button to try to recover that lost content until I read the comments on this issue. (That said, I have no idea if any end users have the same confusion I did or if the Undo button is usually clear to users in this case.)

[chipsnyder]

@iamthomasbishop @kyleaparker Do either of you have a preference here? I would agree with @pinarol and rely on the undo button but wanted to get other votes before first.

If we do a prompt I think it should apply to all blocks or maybe all blocks that have child blocks.

[iamthomasbishop]

Based on what I've seen in usability tests, most users are able to find the undo button pretty easily, but as @rachelmcr mentioned that doesn't help when they don't think to look for it. With that said, it is a bit harder to accidentally delete a column because it's a more explicit action (you either have to tap the ••• menu and tap Remove block (very obvious) or tap the (-) button in the block settings sheet. We probably want to add at least a little bit of friction on the (-) action.

I spent some time laying out a few options. I'm open to feedback, and leaning towards option 1 in the short-term and option 2 or 4 in the long-term. Curious to hear if y'all think any of these make sense.

Option 1: Add footnote

If we want to keep the behavior as-is but add some clarity, we could add a footnote below the Number of column cell that says Removing a column will also remove its contents. This will help a little bit, but is probably not enough.

Option 2: Add footnote, proactively move content

Another option could be to proactively move the contents of a removed column to the previous column, and make a footnote such as When removing a Column, its contents will be moved to the previous Column.. Similarly, I'm not sure if the effects will always be clear visually, but at least we're not stripping out the contents.

Option 3: Add confirmation dialog

Do as @enejb suggested — add a simple confirmation dialog that essentially asks the user if they'd like to Remove column and its contents?:

• Title: Remove Column and its contents?
• Body: Removing a Column will also remove its contents. Would you like to proceed?
• Action (destructive/red): Remove column and contents
• Action (primary/blue): Cancel

(Note: Option 3 uses the Alert component on iOS because the HIG recommends it ActionSheet when there are ≤ 2 options.)

Option 4: Add dialog with option to keep contents

Continuing on the "proactive" track, we could offer to move the contents to the previous column block when a column is removed. An alert or dialog would make sense here, considering the nature of the action. In this scenario, it would probably make sense to skip the footnote and show a dialog when the user taps the (-) button — with messaging along the lines of:

• Title: Keep contents of Column?
• Body: When the Column is removed, its contents will be moved to the previous Column.
• Action (primary/blue, strong): Keep contents, remove column
• Action (destructive/red): Remove column and contents
• Action (primary/blue): Cancel

(Note: Option 4 uses the ActionSheet component on iOS because the HIG recommends it over Alert when there are ≥ 3 options.)

[kyleaparker]

I'd be in favour of Option 3 here but I think it could be simplified more to say something like:
Remove Column
Removing a column will also remove its contents. Are you sure you want to remove this column?
Cancel | Remove

[iamthomasbishop]

@kyleaparker that copy makes sense to me, definitely clear and more succinct 🙂

[chipsnyder]

Option 3 sounds good to me 👍 I'll add this to our Maintenance board thank you both

[iamthomasbishop]

Thanks, @chipsnyder !