From 27ce296b54e9893c147f819a5ac8b01984014ce8 Mon Sep 17 00:00:00 2001
From: Prakhar Porwal <49529937+prakharporwal@users.noreply.github.com>
Date: Fri, 12 Nov 2021 03:33:28 +0530
Subject: [PATCH] [GH-1655] Card Delete :  added Confirmation Dialog  (#1684)

* Made confirmationDialogBox from existing dialog component

* Used ConfirmationDialogBox to raise warning before deletion of card property

* fixes as ci checks did not pass

* fixes to pass ci tests

* Flash Message now visible (changed its z-index)

* Confirmation Dialog shows the property name.

* fixes for eslint test failure

* fixes for eslint test fail

* fixes for eslint test failure

* fix for eslint test failure

* fixed a wrong subtext string

* fixed eslint issues in scss

* i18n en.json for localisation updated

* `en.json;`-wrong file generated by `npm run i18n-extract ` command removed

* On Property Type or Name Change raises warning

* On Property Type or Name Change raises Confirmation dialog

Confirmation dialog box generalized for use

* The affected num of cards calculation added.

* If prop value not filled change after confirmation

* fixes after ci eslint failure

* fixes after ci eslint failure

* In cardDetailProperty test considered dialog box confirmation

* Added test for confirmationDialogBox

* npm run fix and fixed test failure

* snapshot files updated : `npm run updatesnapshot`

* ran i18n-extract script

* Added memo to Confirm dialog component

* reverted the addition of React.memo() as the feature breaks

* added confirmation for card  delete

* default export of Confirmation Dialog Component

* improved cardDialog test considering dialog box opening

* Added memo and useCallback for cnfrm dialog component

* eslint formating

* eslint formatting

* added confirm dialog for kanban and dialog card .

* updated snapshot . cardDetailProperty test failing

* updated snapshot

* Merge branch 'prop-update-warning-1140' into card-delete-warning-1655

* eslint formatting

* Merge branch 'prop-update-warning-1140' into card-delete-warning-1655

* removed unwanted comments

* imported library for failing test

* Updating card modal scss

* Addressed @sbishel comments

* fixed duplicate width in css

* updated comment in kanbanCard

* fixed failing snapshot test

* updated kanbanCard unit test

* npm run fix

* removed useState hook for confirmDialogProps

* removed useState hook from cardDialog and kanbanCard for confirmDialogProps.

* npm run fix

* removed duplicate declaration

Co-authored-by: Prakhar <>
Co-authored-by: prakharporwal <prakharporwal99@gmail.com>
Co-authored-by: Scott Bishel <scott.bishel@mattermost.com>
Co-authored-by: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
---
 webapp/i18n/en.json                           |  10 +-
 .../__snapshots__/cardDialog.test.tsx.snap    | 409 ++++++++++++++++++
 .../confirmationDialogBox.test.tsx.snap       | 137 ++++++
 .../components/calculations/calculations.ts   |   1 +
 .../cardDetailProperties.test.tsx.snap        | 248 +++++++++++
 .../cardDetail/cardDetailProperties.test.tsx  | 179 +++++---
 .../cardDetail/cardDetailProperties.tsx       | 117 +++--
 webapp/src/components/cardDialog.test.tsx     |  50 +++
 webapp/src/components/cardDialog.tsx          |  65 ++-
 .../src/components/confirmationDialogBox.scss |  34 +-
 .../components/confirmationDialogBox.test.tsx |  93 ++++
 .../src/components/confirmationDialogBox.tsx  |  49 ++-
 .../src/components/kanban/kanbanCard.test.tsx |  13 +-
 webapp/src/components/kanban/kanbanCard.tsx   |  97 +++--
 webapp/src/widgets/buttons/button.scss        |   3 +-
 15 files changed, 1338 insertions(+), 167 deletions(-)
 create mode 100644 webapp/src/components/__snapshots__/confirmationDialogBox.test.tsx.snap
 create mode 100644 webapp/src/components/confirmationDialogBox.test.tsx

diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 8411b0e69..72a82c3ae 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -51,9 +51,16 @@
   "CardDetail.addCardText": "add card text",
   "CardDetail.moveContent": "move card content",
   "CardDetail.new-comment-placeholder": "Add a comment...",
-  "CardDetailProperty.confirm-delete": "Confirm Delete Property",
+  "CardDetailProperty.confirm-delete-heading": "Confirm Delete Property",
   "CardDetailProperty.confirm-delete-subtext": "Are you sure you want to delete the property \"{propertyName}\"? Deleting it will delete the property from all cards in this board.",
+  "CardDetailProperty.confirm-property-name-change-subtext": "Are you sure you want to change property \"{propertyName}\" {customText}? This will affect value(s) across {numOfCards} card(s) in this board, and can result in data loss.",
+  "CardDetailProperty.confirm-property-type-change": "Confirm Property Type Change!",
+  "CardDetailProperty.delete-action-button": "Delete",
+  "CardDetailProperty.property-change-action-button": "Change Property",
+  "CardDetailProperty.property-changed": "Changed property successfully!",
   "CardDetailProperty.property-deleted": "Deleted {propertyName} Successfully!",
+  "CardDetailProperty.property-name-change-subtext": "type from \"{oldPropType}\" to \"{newPropType}\"",
+  "CardDetailProperty.property-type-change-subtext": "name to \"{newPropName}\"",
   "CardDialog.copiedLink": "Copied!",
   "CardDialog.copyLink": "Copy link",
   "CardDialog.editing-template": "You're editing a template.",
@@ -62,6 +69,7 @@
   "Comment.delete": "Delete",
   "CommentsList.send": "Send",
   "ConfirmationDialog.cancel-action": "Cancel",
+  "ConfirmationDialog.confirm-action": "Confirm",
   "ConfirmationDialog.delete-action": "Delete",
   "ContentBlock.Delete": "Delete",
   "ContentBlock.DeleteAction": "delete",
diff --git a/webapp/src/components/__snapshots__/cardDialog.test.tsx.snap b/webapp/src/components/__snapshots__/cardDialog.test.tsx.snap
index 18f72c003..de5404f94 100644
--- a/webapp/src/components/__snapshots__/cardDialog.test.tsx.snap
+++ b/webapp/src/components/__snapshots__/cardDialog.test.tsx.snap
@@ -592,6 +592,415 @@ exports[`components/cardDialog return cardDialog menu content 1`] = `
 </div>
 `;
 
+exports[`components/cardDialog return cardDialog menu content and cancel delete confirmation do nothing 1`] = `
+<div>
+  <div
+    class="Dialog dialog-back undefined"
+  >
+    <div
+      class="wrapper"
+    >
+      <div
+        class="dialog"
+      >
+        <div
+          class="toolbar"
+        >
+          <button
+            aria-label="Close dialog"
+            class="Button IconButton IconButton--large"
+            title="Close dialog"
+            type="button"
+          >
+            <i
+              class="CompassIcon icon-close CloseIcon"
+            />
+          </button>
+          <div
+            aria-label="menuwrapper"
+            class="MenuWrapper"
+            role="button"
+          >
+            <button
+              class="Button IconButton IconButton--large"
+              type="button"
+            >
+              <i
+                class="CompassIcon icon-dots-horizontal OptionsIcon"
+              />
+            </button>
+          </div>
+        </div>
+        <div
+          class="CardDetail content"
+        >
+          <div
+            class="BlockIconSelector"
+          >
+            <div
+              aria-label="menuwrapper"
+              class="MenuWrapper"
+              role="button"
+            >
+              <div
+                class="octo-icon size-l"
+              >
+                <span>
+                  i
+                </span>
+              </div>
+            </div>
+          </div>
+          <div
+            class="EditableAreaWrap"
+          >
+            <textarea
+              class="EditableArea Editable title"
+              height="0"
+              placeholder="Untitled"
+              rows="1"
+              spellcheck="true"
+              title="title"
+            >
+              title
+            </textarea>
+            <div
+              class="EditableAreaContainer"
+            >
+              <textarea
+                aria-hidden="true"
+                class="EditableAreaReference Editable title"
+                dir="auto"
+                disabled=""
+                rows="1"
+              >
+                title
+              </textarea>
+            </div>
+          </div>
+          <div
+            class="octo-propertylist CardDetailProperties"
+          >
+            <div
+              class="octo-propertyname add-property"
+            >
+              <div
+                aria-label="menuwrapper"
+                class="MenuWrapper"
+                role="button"
+              >
+                <button
+                  type="button"
+                >
+                  <span>
+                    + Add a property
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+          <hr />
+          <div
+            class="CommentsList"
+          >
+            <div
+              class="commentrow"
+            >
+              <img
+                class="comment-avatar"
+                src="data:image/svg+xml,<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 100 100\\" style=\\"fill: rgb(192, 192, 192);\\"><rect width=\\"100\\" height=\\"100\\" /></svg>"
+              />
+              <div
+                class="MarkdownEditor octo-editor newcomment "
+              >
+                <div
+                  class="octo-editor-preview octo-placeholder"
+                />
+                <div
+                  class="octo-editor-active Editor"
+                  style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
+                >
+                  <div
+                    id="test-id-wrapper"
+                  >
+                    <textarea
+                      id="test-id"
+                      style="display: none;"
+                    />
+                    <div
+                      class="EasyMDEContainer"
+                    >
+                      <div
+                        class="CodeMirror cm-s-easymde CodeMirror-wrap"
+                      >
+                        <div
+                          style="overflow: hidden; position: relative; width: 3px; height: 0px;"
+                        >
+                          <textarea
+                            autocapitalize="off"
+                            autocorrect="off"
+                            spellcheck="false"
+                            style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"
+                            tabindex="0"
+                          />
+                        </div>
+                        <div
+                          class="CodeMirror-vscrollbar"
+                          cm-not-content="true"
+                          tabindex="-1"
+                        >
+                          <div
+                            style="min-width: 1px;"
+                          />
+                        </div>
+                        <div
+                          class="CodeMirror-hscrollbar"
+                          cm-not-content="true"
+                          tabindex="-1"
+                        >
+                          <div
+                            style="height: 100%; min-height: 1px;"
+                          />
+                        </div>
+                        <div
+                          class="CodeMirror-scrollbar-filler"
+                          cm-not-content="true"
+                        />
+                        <div
+                          class="CodeMirror-gutter-filler"
+                          cm-not-content="true"
+                        />
+                        <div
+                          class="CodeMirror-scroll"
+                          style="min-height: 10px;"
+                          tabindex="-1"
+                        >
+                          <div
+                            class="CodeMirror-sizer"
+                            style="margin-left: 0px;"
+                          >
+                            <div
+                              style="position: relative;"
+                            >
+                              <div
+                                class="CodeMirror-lines"
+                                role="presentation"
+                              >
+                                <div
+                                  role="presentation"
+                                  style="position: relative; outline: none;"
+                                >
+                                  <div
+                                    class="CodeMirror-measure"
+                                  >
+                                    <pre
+                                      class="CodeMirror-line-like"
+                                    >
+                                      <span>
+                                        xxxxxxxxxx
+                                      </span>
+                                    </pre>
+                                  </div>
+                                  <div
+                                    class="CodeMirror-measure"
+                                  />
+                                  <div
+                                    style="position: relative; z-index: 1;"
+                                  />
+                                  <div
+                                    class="CodeMirror-cursors"
+                                  />
+                                  <div
+                                    class="CodeMirror-code"
+                                    role="presentation"
+                                  />
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            style="position: absolute; height: 50px; width: 1px;"
+                          />
+                          <div
+                            class="CodeMirror-gutters"
+                            style="display: none;"
+                          />
+                        </div>
+                      </div>
+                      <div
+                        class="editor-preview-side editor-preview"
+                      />
+                    </div>
+                    <div
+                      class="EasyMDEContainer"
+                    >
+                      <div
+                        class="CodeMirror cm-s-easymde CodeMirror-wrap"
+                      >
+                        <div
+                          style="overflow: hidden; position: relative; width: 3px; height: 0px;"
+                        >
+                          <textarea
+                            autocapitalize="off"
+                            autocorrect="off"
+                            spellcheck="false"
+                            style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"
+                            tabindex="0"
+                          />
+                        </div>
+                        <div
+                          class="CodeMirror-vscrollbar"
+                          cm-not-content="true"
+                          tabindex="-1"
+                        >
+                          <div
+                            style="min-width: 1px;"
+                          />
+                        </div>
+                        <div
+                          class="CodeMirror-hscrollbar"
+                          cm-not-content="true"
+                          tabindex="-1"
+                        >
+                          <div
+                            style="height: 100%; min-height: 1px;"
+                          />
+                        </div>
+                        <div
+                          class="CodeMirror-scrollbar-filler"
+                          cm-not-content="true"
+                        />
+                        <div
+                          class="CodeMirror-gutter-filler"
+                          cm-not-content="true"
+                        />
+                        <div
+                          class="CodeMirror-scroll"
+                          style="min-height: 10px;"
+                          tabindex="-1"
+                        >
+                          <div
+                            class="CodeMirror-sizer"
+                            style="margin-left: 0px;"
+                          >
+                            <div
+                              style="position: relative;"
+                            >
+                              <div
+                                class="CodeMirror-lines"
+                                role="presentation"
+                              >
+                                <div
+                                  role="presentation"
+                                  style="position: relative; outline: none;"
+                                >
+                                  <div
+                                    class="CodeMirror-measure"
+                                  >
+                                    <pre
+                                      class="CodeMirror-line-like"
+                                    >
+                                      <span>
+                                        xxxxxxxxxx
+                                      </span>
+                                    </pre>
+                                  </div>
+                                  <div
+                                    class="CodeMirror-measure"
+                                  />
+                                  <div
+                                    style="position: relative; z-index: 1;"
+                                  />
+                                  <div
+                                    class="CodeMirror-cursors"
+                                  />
+                                  <div
+                                    class="CodeMirror-code"
+                                    role="presentation"
+                                  />
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            style="position: absolute; height: 50px; width: 1px;"
+                          />
+                          <div
+                            class="CodeMirror-gutters"
+                            style="display: none;"
+                          />
+                        </div>
+                      </div>
+                      <div
+                        class="editor-preview-side editor-preview"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              
+            </div>
+            <hr />
+          </div>
+        </div>
+        <div
+          class="CardDetail content fullwidth content-blocks"
+        >
+          <div
+            class="octo-content CardDetailContents"
+          >
+            <div
+              class="octo-block"
+            >
+              <div
+                class="octo-block-margin"
+              />
+              <div
+                class="MarkdownEditor octo-editor  "
+              >
+                <div
+                  class="octo-editor-preview octo-placeholder"
+                />
+                <div
+                  class="octo-editor-active Editor"
+                  style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
+                >
+                  <div
+                    id="test-id-wrapper"
+                  >
+                    <textarea
+                      id="test-id"
+                      style="display: none;"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardDetailContentsMenu content add-content"
+          >
+            <div
+              aria-label="menuwrapper"
+              class="MenuWrapper"
+              role="button"
+            >
+              <button
+                type="button"
+              >
+                <span>
+                  Add content
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`components/cardDialog should match snapshot 1`] = `
 <div>
   <div
diff --git a/webapp/src/components/__snapshots__/confirmationDialogBox.test.tsx.snap b/webapp/src/components/__snapshots__/confirmationDialogBox.test.tsx.snap
new file mode 100644
index 000000000..f98fc85e4
--- /dev/null
+++ b/webapp/src/components/__snapshots__/confirmationDialogBox.test.tsx.snap
@@ -0,0 +1,137 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`/components/confirmationDialogBox confirmDialog should match snapshot 1`] = `
+<div>
+  <div
+    class="Dialog dialog-back confirmation-dialog-box"
+  >
+    <div
+      class="wrapper"
+    >
+      <div
+        class="dialog"
+      >
+        <div
+          class="toolbar"
+        >
+          <button
+            aria-label="Close dialog"
+            class="Button IconButton IconButton--large"
+            title="Close dialog"
+            type="button"
+          >
+            <i
+              class="CompassIcon icon-close CloseIcon"
+            />
+          </button>
+        </div>
+        <div
+          class="box-area"
+          title="Confirmation Dialog Box"
+        >
+          <h3
+            class="text-heading5"
+          >
+            test-heading
+          </h3>
+          <div
+            class="sub-text"
+          >
+            test-sub-text
+          </div>
+          <div
+            class="action-buttons"
+          >
+            <button
+              class="Button emphasis--tertiary size--medium"
+              title="Cancel"
+              type="button"
+            >
+              <span>
+                Cancel
+              </span>
+            </button>
+            <button
+              class="Button emphasis--danger size--medium"
+              title="test-btn-text"
+              type="submit"
+            >
+              <span>
+                test-btn-text
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`/components/confirmationDialogBox confirmDialog with Confirm Button Text should match snapshot 1`] = `
+<div>
+  <div
+    class="Dialog dialog-back confirmation-dialog-box"
+  >
+    <div
+      class="wrapper"
+    >
+      <div
+        class="dialog"
+      >
+        <div
+          class="toolbar"
+        >
+          <button
+            aria-label="Close dialog"
+            class="Button IconButton IconButton--large"
+            title="Close dialog"
+            type="button"
+          >
+            <i
+              class="CompassIcon icon-close CloseIcon"
+            />
+          </button>
+        </div>
+        <div
+          class="box-area"
+          title="Confirmation Dialog Box"
+        >
+          <h3
+            class="text-heading5"
+          >
+            test-heading
+          </h3>
+          <div
+            class="sub-text"
+          >
+            test-sub-text
+          </div>
+          <div
+            class="action-buttons"
+          >
+            <button
+              class="Button emphasis--tertiary size--medium"
+              title="Cancel"
+              type="button"
+            >
+              <span>
+                Cancel
+              </span>
+            </button>
+            <button
+              class="Button emphasis--danger size--medium"
+              title="test-btn-text"
+              type="submit"
+            >
+              <span>
+                test-btn-text
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/webapp/src/components/calculations/calculations.ts b/webapp/src/components/calculations/calculations.ts
index 655661d5e..fadfe8aab 100644
--- a/webapp/src/components/calculations/calculations.ts
+++ b/webapp/src/components/calculations/calculations.ts
@@ -57,6 +57,7 @@ function countEmpty(cards: readonly Card[], property: IPropertyTemplate): string
     return String(cards.length - cardsWithValue(cards, property).length)
 }
 
+// return count of card which have this property value as not null \\ undefined \\ ''
 function countNotEmpty(cards: readonly Card[], property: IPropertyTemplate): string {
     return String(cardsWithValue(cards, property).length)
 }
diff --git a/webapp/src/components/cardDetail/__snapshots__/cardDetailProperties.test.tsx.snap b/webapp/src/components/cardDetail/__snapshots__/cardDetailProperties.test.tsx.snap
index 814a4f13f..80ea0e040 100644
--- a/webapp/src/components/cardDetail/__snapshots__/cardDetailProperties.test.tsx.snap
+++ b/webapp/src/components/cardDetail/__snapshots__/cardDetailProperties.test.tsx.snap
@@ -1,5 +1,193 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`components/cardDetail/CardDetailProperties cancel button in TypeorNameChange dialog should do nothing 1`] = `
+<div>
+  <div
+    class="octo-propertylist CardDetailProperties"
+  >
+    <div
+      class="octo-propertyrow"
+    >
+      <div
+        aria-label="menuwrapper"
+        class="MenuWrapper"
+        role="button"
+      >
+        <div
+          class="octo-propertyname"
+        >
+          <button
+            class="Button"
+            type="button"
+          >
+            <span>
+              Owner
+            </span>
+          </button>
+        </div>
+      </div>
+      <div
+        class="octo-propertyvalue"
+        data-testid="select-non-editable"
+        tabindex="0"
+      >
+        <span
+          class="Label propColorDefault "
+        >
+          <span
+            class="Label-text"
+          >
+            Jean-Luc Picard
+          </span>
+        </span>
+      </div>
+    </div>
+    <div
+      class="octo-propertyrow"
+    >
+      <div
+        aria-label="menuwrapper"
+        class="MenuWrapper"
+        role="button"
+      >
+        <div
+          class="octo-propertyname"
+        >
+          <button
+            class="Button"
+            type="button"
+          >
+            <span>
+              MockStatus
+            </span>
+          </button>
+        </div>
+      </div>
+      <input
+        class="Editable octo-propertyvalue"
+        placeholder="Empty"
+        spellcheck="false"
+        style="width: 5px;"
+        title="1234"
+        value="1234"
+      />
+    </div>
+    <div
+      class="octo-propertyname add-property"
+    >
+      <div
+        aria-label="menuwrapper"
+        class="MenuWrapper"
+        role="button"
+      >
+        <button
+          class="Button"
+          type="button"
+        >
+          <span>
+            + Add a property
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`components/cardDetail/CardDetailProperties cancel on delete dialog should do nothing 1`] = `
+<div>
+  <div
+    class="octo-propertylist CardDetailProperties"
+  >
+    <div
+      class="octo-propertyrow"
+    >
+      <div
+        aria-label="menuwrapper"
+        class="MenuWrapper"
+        role="button"
+      >
+        <div
+          class="octo-propertyname"
+        >
+          <button
+            class="Button"
+            type="button"
+          >
+            <span>
+              Owner
+            </span>
+          </button>
+        </div>
+      </div>
+      <div
+        class="octo-propertyvalue"
+        data-testid="select-non-editable"
+        tabindex="0"
+      >
+        <span
+          class="Label propColorDefault "
+        >
+          <span
+            class="Label-text"
+          >
+            Jean-Luc Picard
+          </span>
+        </span>
+      </div>
+    </div>
+    <div
+      class="octo-propertyrow"
+    >
+      <div
+        aria-label="menuwrapper"
+        class="MenuWrapper"
+        role="button"
+      >
+        <div
+          class="octo-propertyname"
+        >
+          <button
+            class="Button"
+            type="button"
+          >
+            <span>
+              MockStatus
+            </span>
+          </button>
+        </div>
+      </div>
+      <input
+        class="Editable octo-propertyvalue"
+        placeholder="Empty"
+        spellcheck="false"
+        style="width: 5px;"
+        title="1234"
+        value="1234"
+      />
+    </div>
+    <div
+      class="octo-propertyname add-property"
+    >
+      <div
+        aria-label="menuwrapper"
+        class="MenuWrapper"
+        role="button"
+      >
+        <button
+          class="Button"
+          type="button"
+        >
+          <span>
+            + Add a property
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`components/cardDetail/CardDetailProperties should match snapshot 1`] = `
 <div>
   <div
@@ -42,6 +230,36 @@ exports[`components/cardDetail/CardDetailProperties should match snapshot 1`] =
         </span>
       </div>
     </div>
+    <div
+      class="octo-propertyrow"
+    >
+      <div
+        aria-label="menuwrapper"
+        class="MenuWrapper"
+        role="button"
+      >
+        <div
+          class="octo-propertyname"
+        >
+          <button
+            class="Button"
+            type="button"
+          >
+            <span>
+              MockStatus
+            </span>
+          </button>
+        </div>
+      </div>
+      <input
+        class="Editable octo-propertyvalue"
+        placeholder="Empty"
+        spellcheck="false"
+        style="width: 5px;"
+        title="1234"
+        value="1234"
+      />
+    </div>
     <div
       class="octo-propertyname add-property"
     >
@@ -106,6 +324,36 @@ exports[`components/cardDetail/CardDetailProperties should show property types m
         </span>
       </div>
     </div>
+    <div
+      class="octo-propertyrow"
+    >
+      <div
+        aria-label="menuwrapper"
+        class="MenuWrapper"
+        role="button"
+      >
+        <div
+          class="octo-propertyname"
+        >
+          <button
+            class="Button"
+            type="button"
+          >
+            <span>
+              MockStatus
+            </span>
+          </button>
+        </div>
+      </div>
+      <input
+        class="Editable octo-propertyvalue"
+        placeholder="Empty"
+        spellcheck="false"
+        style="width: 5px;"
+        title="1234"
+        value="1234"
+      />
+    </div>
     <div
       class="octo-propertyname add-property"
     >
diff --git a/webapp/src/components/cardDetail/cardDetailProperties.test.tsx b/webapp/src/components/cardDetail/cardDetailProperties.test.tsx
index 10a481033..f8a5950f3 100644
--- a/webapp/src/components/cardDetail/cardDetailProperties.test.tsx
+++ b/webapp/src/components/cardDetail/cardDetailProperties.test.tsx
@@ -1,21 +1,19 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
-import React from 'react'
 
+import React from 'react'
 import {render, screen, act} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import '@testing-library/jest-dom'
 import {mocked} from 'ts-jest/utils'
-
+import '@testing-library/jest-dom'
 import {createIntl} from 'react-intl'
 
+import {PropertyType} from '../../blocks/board'
 import {wrapIntl} from '../../testUtils'
 import {TestBlockFactory} from '../../test/testBlockFactory'
 import mutator from '../../mutator'
 import {propertyTypesList, typeDisplayName} from '../../widgets/propertyMenu'
 
-import {PropertyType} from '../../blocks/board'
-
 import CardDetailProperties from './cardDetailProperties'
 
 jest.mock('../../mutator')
@@ -46,6 +44,12 @@ describe('components/cardDetail/CardDetailProperties', () => {
                 },
             ],
         },
+        {
+            id: 'property_id_2',
+            name: 'MockStatus',
+            type: 'number',
+            options: [],
+        },
     ]
 
     const view = TestBlockFactory.createBoardView(board)
@@ -56,53 +60,37 @@ describe('components/cardDetail/CardDetailProperties', () => {
 
     const card = TestBlockFactory.createCard(board)
     card.fields.properties.property_id_1 = 'property_value_id_1'
+    card.fields.properties.property_id_2 = '1234'
+
+    const cardTemplate = TestBlockFactory.createCard(board)
+    cardTemplate.fields.isTemplate = true
+
     const cards = [card]
 
-    const cardDetailProps = {
-        board,
-        card,
-        cards,
-        contents: [],
-        comments: [],
-        activeView: view,
-        views,
-        readonly: false,
+    function renderComponent() {
+        const component = wrapIntl((
+            <CardDetailProperties
+                board={board!}
+                card={card}
+                cards={[card]}
+                contents={[]}
+                comments={[]}
+                activeView={view}
+                views={views}
+                readonly={false}
+            />
+        ))
+
+        return render(component)
     }
 
     it('should match snapshot', async () => {
-        const {container} = render(
-            wrapIntl(
-                <CardDetailProperties {...cardDetailProps}/>,
-            ),
-        )
+        const {container} = renderComponent()
         expect(container).toMatchSnapshot()
     })
 
-    it('should rename existing select property', async () => {
-        render(
-            wrapIntl(
-                <CardDetailProperties {...cardDetailProps}/>,
-            ),
-        )
-
-        const menuElement = screen.getByRole('button', {name: 'Owner'})
-        userEvent.click(menuElement)
-
-        const newName = 'Owner - Renamed'
-        const propertyNameInput = screen.getByRole('textbox')
-        userEvent.type(propertyNameInput, `${newName}{enter}`)
-
-        const propertyTemplate = board.fields.cardProperties[0]
-        expect(mockedMutator.changePropertyTypeAndName).toHaveBeenCalledTimes(1)
-        expect(mockedMutator.changePropertyTypeAndName).toHaveBeenCalledWith(board, cards, propertyTemplate, 'select', newName)
-    })
-
     it('should show confirmation dialog when deleting existing select property', () => {
-        render(
-            wrapIntl(
-                <CardDetailProperties {...cardDetailProps}/>,
-            ),
-        )
+        renderComponent()
 
         const menuElement = screen.getByRole('button', {name: 'Owner'})
         userEvent.click(menuElement)
@@ -116,11 +104,7 @@ describe('components/cardDetail/CardDetailProperties', () => {
 
     it('should show property types menu', () => {
         const intl = createIntl({locale: 'en'})
-        const {container} = render(
-            wrapIntl(
-                <CardDetailProperties {...cardDetailProps}/>,
-            ),
-        )
+        const {container} = renderComponent()
 
         const menuElement = screen.getByRole('button', {name: /add a property/i})
         userEvent.click(menuElement)
@@ -135,12 +119,26 @@ describe('components/cardDetail/CardDetailProperties', () => {
         })
     })
 
+    test('rename select property and confirm button on dialog should rename property', async () => {
+        const result = renderComponent()
+
+        // rename to "Owner-Renamed"
+        onPropertyRenameOpenConfirmationDialog(result.container)
+
+        const propertyTemplate = board.fields.cardProperties[0]
+
+        const confirmButton = result.getByTitle('Change Property')
+        expect(confirmButton).toBeDefined()
+
+        userEvent.click(confirmButton!)
+
+        // should be called once on confirming renaming the property
+        expect(mockedMutator.changePropertyTypeAndName).toBeCalledTimes(1)
+        expect(mockedMutator.changePropertyTypeAndName).toHaveBeenCalledWith(board, cards, propertyTemplate, 'select', 'Owner - Renamed')
+    })
+
     it('should add new number property', async () => {
-        render(
-            wrapIntl(
-                <CardDetailProperties {...cardDetailProps}/>,
-            ),
-        )
+        renderComponent()
 
         const menuElement = screen.getByRole('button', {name: /add a property/i})
         userEvent.click(menuElement)
@@ -151,10 +149,85 @@ describe('components/cardDetail/CardDetailProperties', () => {
         })
 
         expect(mockedMutator.insertPropertyTemplate).toHaveBeenCalledTimes(1)
+
         const args = mockedMutator.insertPropertyTemplate.mock.calls[0]
         const template = args[3]
         expect(template).toBeTruthy()
         expect(template!.name).toMatch(/number/i)
         expect(template!.type).toBe('number')
     })
+
+    it('cancel button in TypeorNameChange dialog should do nothing', () => {
+        const result = renderComponent()
+        const container = result.container
+        onPropertyRenameOpenConfirmationDialog(container)
+
+        const cancelButton = result.getByTitle('Cancel')
+        expect(cancelButton).toBeDefined()
+
+        userEvent.click(cancelButton!)
+
+        expect(container).toMatchSnapshot()
+    })
+
+    it('confirmation on delete dialog should delete the property', () => {
+        const result = renderComponent()
+        const container = result.container
+
+        openDeleteConfirmationDialog(container)
+
+        const propertyTemplate = board.fields.cardProperties[0]
+
+        const confirmButton = result.getByTitle('Delete')
+        expect(confirmButton).toBeDefined()
+
+        //click delete button
+        userEvent.click(confirmButton!)
+
+        // should be called once on confirming delete
+        expect(mockedMutator.deleteProperty).toBeCalledTimes(1)
+        expect(mockedMutator.deleteProperty).toBeCalledWith(board, views, cards, propertyTemplate.id)
+    })
+
+    it('cancel on delete dialog should do nothing', () => {
+        const result = renderComponent()
+        const container = result.container
+
+        openDeleteConfirmationDialog(container)
+
+        const cancelButton = result.getByTitle('Cancel')
+        expect(cancelButton).toBeDefined()
+
+        userEvent.click(cancelButton!)
+        expect(container).toMatchSnapshot()
+    })
+
+    function openDeleteConfirmationDialog(container:HTMLElement) {
+        const propertyLabel = container.querySelector('.MenuWrapper')
+        expect(propertyLabel).toBeDefined()
+        userEvent.click(propertyLabel!)
+
+        const deleteOption = container.querySelector('.MenuOption.TextOption')
+        expect(propertyLabel).toBeDefined()
+        userEvent.click(deleteOption!)
+
+        const confirmDialog = container.querySelector('.dialog.confirmation-dialog-box')
+        expect(confirmDialog).toBeDefined()
+    }
+
+    function onPropertyRenameOpenConfirmationDialog(container:HTMLElement) {
+        const propertyLabel = container.querySelector('.MenuWrapper')
+        expect(propertyLabel).toBeDefined()
+        userEvent.click(propertyLabel!)
+
+        // write new name in the name text box
+        const propertyNameInput = container.querySelector('.PropertyMenu.menu-textbox')
+        expect(propertyNameInput).toBeDefined()
+        userEvent.type(propertyNameInput!, 'Owner - Renamed{enter}')
+        userEvent.click(propertyLabel!)
+
+        const confirmDialog = container.querySelector('.dialog.confirmation-dialog-box')
+        expect(confirmDialog).toBeDefined()
+    }
 })
+
diff --git a/webapp/src/components/cardDetail/cardDetailProperties.tsx b/webapp/src/components/cardDetail/cardDetailProperties.tsx
index 293c4d1a8..b585707f7 100644
--- a/webapp/src/components/cardDetail/cardDetailProperties.tsx
+++ b/webapp/src/components/cardDetail/cardDetailProperties.tsx
@@ -8,13 +8,15 @@ import {Card} from '../../blocks/card'
 import {BoardView} from '../../blocks/boardView'
 import {ContentBlock} from '../../blocks/contentBlock'
 import {CommentBlock} from '../../blocks/commentBlock'
+
 import mutator from '../../mutator'
 import Button from '../../widgets/buttons/button'
 import MenuWrapper from '../../widgets/menuWrapper'
 import PropertyMenu, {PropertyTypes, typeDisplayName} from '../../widgets/propertyMenu'
 
+import Calculations from '../calculations/calculations'
 import PropertyValueElement from '../propertyValueElement'
-import {ConfirmationDialogBox} from '../confirmationDialogBox'
+import ConfirmationDialogBox, {ConfirmationDialogBoxProps} from '../confirmationDialogBox'
 import {sendFlashMessage} from '../flashMessages'
 import Menu from '../../widgets/menu'
 import {IDType, Utils} from '../../utils'
@@ -42,9 +44,93 @@ const CardDetailProperties = React.memo((props: Props) => {
         }
     }, [newTemplateId, board.fields.cardProperties])
 
+    const [confirmationDialogBox, setConfirmationDialogBox] = useState<ConfirmationDialogBoxProps>({heading: '', onConfirm: () => {}, onClose: () => {}})
     const [showConfirmationDialog, setShowConfirmationDialog] = useState<boolean>(false)
-    const [deletingPropId, setDeletingPropId] = useState<string>('')
-    const [deletingPropName, setDeletingPropName] = useState<string>('')
+
+    function onPropertyChangeSetAndOpenConfirmationDialog(newType: PropertyType, newName: string, propertyTemplate:IPropertyTemplate) {
+        const oldType = propertyTemplate.type
+
+        // do nothing if no change
+        if (oldType === newType && propertyTemplate.name === newName) {
+            return
+        }
+
+        const affectsNumOfCards:string = Calculations.countNotEmpty(cards, propertyTemplate, intl)
+
+        // if no card has this value set delete the property directly without warning
+        if (affectsNumOfCards === '0') {
+            mutator.changePropertyTypeAndName(board, cards, propertyTemplate, newType, newName)
+            return
+        }
+
+        let subTextString = intl.formatMessage({
+            id: 'CardDetailProperty.property-name-change-subtext',
+            defaultMessage: 'type from "{oldPropType}" to "{newPropType}"',
+        }, {oldPropType: oldType, newPropType: newType})
+
+        if (propertyTemplate.name !== newName) {
+            subTextString = intl.formatMessage({
+                id: 'CardDetailProperty.property-type-change-subtext',
+                defaultMessage: 'name to "{newPropName}"',
+            }, {newPropName: newName})
+        }
+
+        setConfirmationDialogBox({
+            heading: intl.formatMessage({id: 'CardDetailProperty.confirm-property-type-change', defaultMessage: 'Confirm Property Type Change!'}),
+            subText: intl.formatMessage({
+                id: 'CardDetailProperty.confirm-property-name-change-subtext',
+                defaultMessage: 'Are you sure you want to change property "{propertyName}" {customText}? This will affect value(s) across {numOfCards} card(s) in this board, and can result in data loss.',
+            },
+            {
+                propertyName: propertyTemplate.name,
+                customText: subTextString,
+                numOfCards: affectsNumOfCards,
+            }),
+
+            confirmButtonText: intl.formatMessage({id: 'CardDetailProperty.property-change-action-button', defaultMessage: 'Change Property'}),
+            onConfirm: async () => {
+                setShowConfirmationDialog(false)
+                try {
+                    await mutator.changePropertyTypeAndName(board, cards, propertyTemplate, newType, newName)
+                } catch (err:any) {
+                    Utils.logError(`Error Changing Property And Name:${propertyTemplate.name}: ${err?.toString()}`)
+                }
+                sendFlashMessage({content: intl.formatMessage({id: 'CardDetailProperty.property-changed', defaultMessage: 'Changed property successfully!'}), severity: 'high'})
+            },
+            onClose: () => setShowConfirmationDialog(false),
+        })
+
+        // open confirmation dialog for property type or name change
+        setShowConfirmationDialog(true)
+    }
+
+    function onPropertyDeleteSetAndOpenConfirmationDialog(propertyTemplate:IPropertyTemplate) {
+        // set ConfirmationDialogBox Props
+        setConfirmationDialogBox({
+            heading: intl.formatMessage({id: 'CardDetailProperty.confirm-delete-heading', defaultMessage: 'Confirm Delete Property'}),
+            subText: intl.formatMessage({
+                id: 'CardDetailProperty.confirm-delete-subtext',
+                defaultMessage: 'Are you sure you want to delete the property "{propertyName}"? Deleting it will delete the property from all cards in this board.',
+            },
+            {propertyName: propertyTemplate.name}),
+            confirmButtonText: intl.formatMessage({id: 'CardDetailProperty.delete-action-button', defaultMessage: 'Delete'}),
+            onConfirm: async () => {
+                const deletingPropName = propertyTemplate.name
+                setShowConfirmationDialog(false)
+                try {
+                    await mutator.deleteProperty(board, views, cards, propertyTemplate.id)
+                    sendFlashMessage({content: intl.formatMessage({id: 'CardDetailProperty.property-deleted', defaultMessage: 'Deleted {propertyName} Successfully!'}, {propertyName: deletingPropName}), severity: 'high'})
+                } catch (err:any) {
+                    Utils.logError(`Error Deleting Property!: Could Not delete Property -" + ${deletingPropName} ${err?.toString()}`)
+                }
+            },
+
+            onClose: () => setShowConfirmationDialog(false),
+        })
+
+        // open confirmation dialog property delete
+        setShowConfirmationDialog(true)
+    }
 
     return (
         <div className='octo-propertylist CardDetailProperties'>
@@ -63,13 +149,8 @@ const CardDetailProperties = React.memo((props: Props) => {
                                     propertyId={propertyTemplate.id}
                                     propertyName={propertyTemplate.name}
                                     propertyType={propertyTemplate.type}
-                                    onTypeAndNameChanged={(newType: PropertyType, newName: string) => mutator.changePropertyTypeAndName(board, cards, propertyTemplate, newType, newName)}
-                                    onDelete={(id: string) => {
-                                        setDeletingPropId(id)
-                                        setDeletingPropName(propertyTemplate.name)
-                                        setShowConfirmationDialog(true)
-                                    }
-                                    }
+                                    onTypeAndNameChanged={(newType: PropertyType, newName: string) => onPropertyChangeSetAndOpenConfirmationDialog(newType, newName, propertyTemplate)}
+                                    onDelete={() => onPropertyDeleteSetAndOpenConfirmationDialog(propertyTemplate)}
                                 />
                             </MenuWrapper>
                         }
@@ -88,21 +169,7 @@ const CardDetailProperties = React.memo((props: Props) => {
 
             {showConfirmationDialog && (
                 <ConfirmationDialogBox
-                    propertyId={deletingPropId}
-                    onClose={() => setShowConfirmationDialog(false)}
-                    onConfirm={() => {
-                        mutator.deleteProperty(board, views, cards, deletingPropId)
-                        setShowConfirmationDialog(false)
-                        sendFlashMessage({content: intl.formatMessage({id: 'CardDetailProperty.property-deleted', defaultMessage: 'Deleted {propertyName} Successfully!'}, {propertyName: deletingPropName}), severity: 'high'})
-                    }}
-
-                    heading={intl.formatMessage({id: 'CardDetailProperty.confirm-delete', defaultMessage: 'Confirm Delete Property'})}
-                    subText={intl.formatMessage({
-                        id: 'CardDetailProperty.confirm-delete-subtext',
-                        defaultMessage: 'Are you sure you want to delete the property "{propertyName}"? Deleting it will delete the property from all cards in this board.',
-                    },
-                    {propertyName: deletingPropName})
-                    }
+                    dialogBox={confirmationDialogBox}
                 />
             )}
 
diff --git a/webapp/src/components/cardDialog.test.tsx b/webapp/src/components/cardDialog.test.tsx
index 7f9614579..321e2e8e8 100644
--- a/webapp/src/components/cardDialog.test.tsx
+++ b/webapp/src/components/cardDialog.test.tsx
@@ -159,8 +159,58 @@ describe('components/cardDialog', () => {
         userEvent.click(buttonMenu)
         const buttonDelete = screen.getByRole('button', {name: 'Delete'})
         userEvent.click(buttonDelete)
+
+        const confirmDialog = screen.getByTitle('Confirmation Dialog Box')
+        expect(confirmDialog).toBeDefined()
+
+        const confirmButton = screen.getByTitle('Delete')
+        expect(confirmButton).toBeDefined()
+
+        //click delete button
+        userEvent.click(confirmButton!)
+
+        // should be called once on confirming delete
         expect(mockedMutator.deleteBlock).toBeCalledTimes(1)
     })
+
+    test('return cardDialog menu content and cancel delete confirmation do nothing', async () => {
+        let container
+        await act(async () => {
+            const result = render(wrapDNDIntl(
+                <ReduxProvider store={store}>
+                    <CardDialog
+                        board={board}
+                        activeView={boardView}
+                        views={[boardView]}
+                        cards={[card]}
+                        cardId={card.id}
+                        onClose={jest.fn()}
+                        showCard={jest.fn()}
+                        readonly={false}
+                    />
+                </ReduxProvider>,
+            ))
+            container = result.container
+        })
+
+        const buttonMenu = screen.getAllByRole('button', {name: 'menuwrapper'})[0]
+        userEvent.click(buttonMenu)
+        const buttonDelete = screen.getByRole('button', {name: 'Delete'})
+        userEvent.click(buttonDelete)
+
+        const confirmDialog = screen.getByTitle('Confirmation Dialog Box')
+        expect(confirmDialog).toBeDefined()
+
+        const cancelButton = screen.getByTitle('Cancel')
+        expect(cancelButton).toBeDefined()
+
+        //click delete button
+        userEvent.click(cancelButton!)
+
+        // should do nothing  on cancel delete dialog
+        expect(container).toMatchSnapshot()
+    })
+
     test('return cardDialog menu content and do a New template from card', async () => {
         await act(async () => {
             render(wrapDNDIntl(
diff --git a/webapp/src/components/cardDialog.tsx b/webapp/src/components/cardDialog.tsx
index 98e9e3c5a..67300478e 100644
--- a/webapp/src/components/cardDialog.tsx
+++ b/webapp/src/components/cardDialog.tsx
@@ -1,6 +1,6 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
-import React from 'react'
+import React, {useState} from 'react'
 import {FormattedMessage, useIntl} from 'react-intl'
 
 import {Board} from '../blocks/board'
@@ -17,6 +17,8 @@ import DeleteIcon from '../widgets/icons/delete'
 import LinkIcon from '../widgets/icons/Link'
 import Menu from '../widgets/menu'
 
+import ConfirmationDialogBox, {ConfirmationDialogBoxProps} from '../components/confirmationDialogBox'
+
 import CardDetail from './cardDetail/cardDetail'
 import Dialog from './dialog'
 import {sendFlashMessage} from './flashMessages'
@@ -39,6 +41,7 @@ const CardDialog = (props: Props): JSX.Element => {
     const comments = useAppSelector(getCardComments(props.cardId))
     const intl = useIntl()
 
+    const [showConfirmationDialogBox, setShowConfirmationDialogBox] = useState<boolean>(false)
     const makeTemplateClicked = async () => {
         if (!card) {
             Utils.assertFailure('card')
@@ -59,6 +62,36 @@ const CardDialog = (props: Props): JSX.Element => {
             },
         )
     }
+    const handleDeleteCard = async () => {
+        if (!card) {
+            Utils.assertFailure()
+            return
+        }
+        TelemetryClient.trackEvent(TelemetryCategory, TelemetryActions.DeleteCard, {board: props.board.id, view: props.activeView.id, card: card.id})
+        await mutator.deleteBlock(card, 'delete card')
+        props.onClose()
+    }
+
+    const confirmDialogProps: ConfirmationDialogBoxProps = {
+        heading: intl.formatMessage({id: 'CardDialog.delete-confirmation-dialog-heading', defaultMessage: 'Confirm card delete!'}),
+        confirmButtonText: intl.formatMessage({id: 'CardDialog.delete-confirmation-dialog-button-text', defaultMessage: 'Delete'}),
+        onConfirm: handleDeleteCard,
+        onClose: () => {
+            setShowConfirmationDialogBox(false)
+        },
+    }
+
+    const handleDeleteButtonOnClick = () => {
+        // use may be renaming a card title
+        // and accidently delete the card
+        // so adding des
+        if (card?.title === '' && card?.fields.contentOrder.length === 0) {
+            handleDeleteCard()
+            return
+        }
+
+        setShowConfirmationDialogBox(true)
+    }
 
     const menu = (
         <Menu position='left'>
@@ -66,15 +99,7 @@ const CardDialog = (props: Props): JSX.Element => {
                 id='delete'
                 icon={<DeleteIcon/>}
                 name='Delete'
-                onClick={async () => {
-                    if (!card) {
-                        Utils.assertFailure()
-                        return
-                    }
-                    TelemetryClient.trackEvent(TelemetryCategory, TelemetryActions.DeleteCard, {board: props.board.id, view: props.activeView.id, card: props.cardId})
-                    await mutator.deleteBlock(card, 'delete card')
-                    props.onClose()
-                }}
+                onClick={handleDeleteButtonOnClick}
             />
             <Menu.Text
                 icon={<LinkIcon/>}
@@ -101,11 +126,12 @@ const CardDialog = (props: Props): JSX.Element => {
         </Menu>
     )
     return (
-        <Dialog
-            onClose={props.onClose}
-            toolsMenu={!props.readonly && menu}
-        >
-            {card && card.fields.isTemplate &&
+        <>
+            <Dialog
+                onClose={props.onClose}
+                toolsMenu={!props.readonly && menu}
+            >
+                {card && card.fields.isTemplate &&
                 <div className='banner'>
                     <FormattedMessage
                         id='CardDialog.editing-template'
@@ -113,7 +139,7 @@ const CardDialog = (props: Props): JSX.Element => {
                     />
                 </div>}
 
-            {card &&
+                {card &&
                 <CardDetail
                     board={board}
                     activeView={activeView}
@@ -125,14 +151,17 @@ const CardDialog = (props: Props): JSX.Element => {
                     readonly={props.readonly}
                 />}
 
-            {!card &&
+                {!card &&
                 <div className='banner error'>
                     <FormattedMessage
                         id='CardDialog.nocard'
                         defaultMessage="This card doesn't exist or is inaccessible."
                     />
                 </div>}
-        </Dialog>
+            </Dialog>
+
+            {showConfirmationDialogBox && <ConfirmationDialogBox dialogBox={confirmDialogProps}/>}
+        </>
     )
 }
 
diff --git a/webapp/src/components/confirmationDialogBox.scss b/webapp/src/components/confirmationDialogBox.scss
index f9dd34de4..d5b6509a2 100644
--- a/webapp/src/components/confirmationDialogBox.scss
+++ b/webapp/src/components/confirmationDialogBox.scss
@@ -1,10 +1,11 @@
 .confirmation-dialog-box {
-    .dialog {   
+    .dialog {
+        max-width: 512px;
+        width: 100%;
         position: fixed;
         top: 30%;
         left: 50%;
         transform: translate(-50%, -50%);
-        width: max-content;
         height: max-content;
         z-index: 300;
 
@@ -25,36 +26,27 @@
             padding: 16px;
         }
     }
-   
+
 }
 
 .box-area {
     display: grid;
     place-items: center;
+    padding: 48px 40px;
 
-    .heading {
-        margin-top: 2rem;
-        padding: 2px 4px;      
+
+    .text-heading5 {
+        margin: 0 0 8px;
     }
 
     .sub-text {
-        width: 26rem;
-        word-wrap: normal;
-        margin: 0.5rem 3rem;
-        padding: 2px;
-
-        @media screen and (max-width: 400px) {
-            width: 12rem;
-        }
+        text-align: center;
     }
 }
 
 .action-buttons {
-    display: flex;
-    margin: 1rem;
-    justify-content: space-between;
-
-    .Button {
-        margin: 2px 1rem;
-    }
+    display: grid;
+    grid-gap: 10px;
+    grid-template-columns: repeat(2, 1fr);
+    margin-top: 32px;
 }
diff --git a/webapp/src/components/confirmationDialogBox.test.tsx b/webapp/src/components/confirmationDialogBox.test.tsx
new file mode 100644
index 000000000..e83f57afb
--- /dev/null
+++ b/webapp/src/components/confirmationDialogBox.test.tsx
@@ -0,0 +1,93 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import '@testing-library/jest-dom'
+import {act, render} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import React from 'react'
+
+import {wrapDNDIntl} from '../testUtils'
+
+import ConfirmationDialogBox from './confirmationDialogBox'
+
+describe('/components/confirmationDialogBox', () => {
+    const dialogPropsWithCnfrmBtnText = {
+        heading: 'test-heading',
+        subText: 'test-sub-text',
+        confirmButtonText: 'test-btn-text',
+        onConfirm: jest.fn(),
+        onClose: jest.fn(),
+    }
+
+    const dialogProps = {
+        heading: 'test-heading',
+        onConfirm: jest.fn(),
+        onClose: jest.fn(),
+    }
+
+    it('confirmDialog should match snapshot', async () => {
+        let container
+
+        await act(async () => {
+            const result = render(
+                wrapDNDIntl(
+                    <ConfirmationDialogBox
+                        dialogBox={dialogPropsWithCnfrmBtnText}
+                    />,
+                ),
+            )
+            container = result.container
+        })
+        expect(container).toMatchSnapshot()
+    })
+
+    it('confirmDialog with Confirm Button Text should match snapshot', async () => {
+        let containerWithCnfrmBtnText
+        await act(async () => {
+            const result = render(
+                wrapDNDIntl(
+                    <ConfirmationDialogBox
+                        dialogBox={dialogPropsWithCnfrmBtnText}
+                    />,
+                ),
+            )
+            containerWithCnfrmBtnText = result.container
+        })
+        expect(containerWithCnfrmBtnText).toMatchSnapshot()
+    })
+
+    it('confirm button click, run onConfirm Function once', () => {
+        const result = render(
+            wrapDNDIntl(<ConfirmationDialogBox dialogBox={dialogProps}/>),
+        )
+
+        userEvent.click(result.getByTitle('Confirm'))
+        expect(dialogProps.onConfirm).toBeCalledTimes(1)
+    })
+
+    it('confirm button (with passed prop text), run onConfirm Function once', () => {
+        const resultWithConfirmBtnText = render(
+            wrapDNDIntl(
+                <ConfirmationDialogBox
+                    dialogBox={dialogPropsWithCnfrmBtnText}
+                />,
+            ),
+        )
+
+        userEvent.click(
+            resultWithConfirmBtnText.getByTitle(dialogPropsWithCnfrmBtnText.confirmButtonText),
+        )
+
+        expect(dialogPropsWithCnfrmBtnText.onConfirm).toBeCalledTimes(1)
+    })
+
+    it('cancel button click runs onClose function', () => {
+        const result = render(wrapDNDIntl(
+            <ConfirmationDialogBox
+                dialogBox={dialogProps}
+            />,
+        ))
+
+        userEvent.click(result.getByTitle('Cancel'))
+        expect(dialogProps.onClose).toBeCalledTimes(1)
+    })
+})
diff --git a/webapp/src/components/confirmationDialogBox.tsx b/webapp/src/components/confirmationDialogBox.tsx
index 1632a6a2b..204827fd3 100644
--- a/webapp/src/components/confirmationDialogBox.tsx
+++ b/webapp/src/components/confirmationDialogBox.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react'
+import React, {useCallback} from 'react'
 import {FormattedMessage} from 'react-intl'
 
 import Button from '../widgets/buttons/button'
@@ -9,29 +9,40 @@ import Button from '../widgets/buttons/button'
 import Dialog from './dialog'
 import './confirmationDialogBox.scss'
 
+type ConfirmationDialogBoxProps = {
+    heading: string
+    subText?: string
+    confirmButtonText?: string
+    onConfirm: () => void
+    onClose: () => void
+}
+
 type Props = {
-    propertyId: string;
-    onClose: () => void;
-    onConfirm: () => void;
-    heading: string;
-    subText?: string;
+    dialogBox: ConfirmationDialogBoxProps
 }
 
 export const ConfirmationDialogBox = (props: Props) => {
+    const handleOnClose = useCallback(props.dialogBox.onClose, [])
+    const handleOnConfirm = useCallback(props.dialogBox.onConfirm, [])
+
     return (
         <Dialog
             className='confirmation-dialog-box'
-            onClose={props.onClose}
+            onClose={handleOnClose}
         >
-            <div className='box-area'>
-                <h3 className='heading'>{props.heading}</h3>
-                <p className='sub-text'>{props.subText}</p>
+            <div
+                className='box-area'
+                title='Confirmation Dialog Box'
+            >
+                <h3 className='text-heading5'>{props.dialogBox.heading}</h3>
+                <div className='sub-text'>{props.dialogBox.subText}</div>
 
                 <div className='action-buttons'>
                     <Button
                         title='Cancel'
-                        active={true}
-                        onClick={props.onClose}
+                        size='medium'
+                        emphasis='tertiary'
+                        onClick={handleOnClose}
                     >
                         <FormattedMessage
                             id='ConfirmationDialog.cancel-action'
@@ -39,18 +50,24 @@ export const ConfirmationDialogBox = (props: Props) => {
                         />
                     </Button>
                     <Button
-                        title='Delete'
+                        title={props.dialogBox.confirmButtonText || 'Confirm'}
+                        size='medium'
                         submit={true}
                         emphasis='danger'
-                        onClick={props.onConfirm}
+                        onClick={handleOnConfirm}
                     >
+                        { props.dialogBox.confirmButtonText ||
                         <FormattedMessage
-                            id='ConfirmationDialog.delete-action'
-                            defaultMessage='Delete'
+                            id='ConfirmationDialog.confirm-action'
+                            defaultMessage='Confirm'
                         />
+                        }
                     </Button>
                 </div>
             </div>
         </Dialog>
     )
 }
+
+export default ConfirmationDialogBox
+export {ConfirmationDialogBoxProps}
diff --git a/webapp/src/components/kanban/kanbanCard.test.tsx b/webapp/src/components/kanban/kanbanCard.test.tsx
index 340ba7171..fb9675443 100644
--- a/webapp/src/components/kanban/kanbanCard.test.tsx
+++ b/webapp/src/components/kanban/kanbanCard.test.tsx
@@ -91,7 +91,7 @@ describe('src/components/kanban/kanbanCard', () => {
         expect(container).toMatchSnapshot()
     })
     test('return kanbanCard and click on delete menu ', () => {
-        const {container} = render(wrapDNDIntl(
+        const result = render(wrapDNDIntl(
             <ReduxProvider store={store}>
                 <KanbanCard
                     card={card}
@@ -105,6 +105,9 @@ describe('src/components/kanban/kanbanCard', () => {
                 />
             </ReduxProvider>,
         ))
+
+        const {container} = result
+
         const elementMenuWrapper = screen.getByRole('button', {name: 'menuwrapper'})
         expect(elementMenuWrapper).not.toBeNull()
         userEvent.click(elementMenuWrapper)
@@ -112,8 +115,16 @@ describe('src/components/kanban/kanbanCard', () => {
         const elementButtonDelete = within(elementMenuWrapper).getByRole('button', {name: 'Delete'})
         expect(elementButtonDelete).not.toBeNull()
         userEvent.click(elementButtonDelete)
+
+        const confirmDialog = screen.getByTitle('Confirmation Dialog Box')
+        expect(confirmDialog).toBeDefined()
+        const confirmButton = within(confirmDialog).getByRole('button', {name: 'Delete'})
+        expect(confirmButton).toBeDefined()
+        userEvent.click(confirmButton)
+
         expect(mockedMutator.deleteBlock).toBeCalledWith(card, 'delete card')
     })
+
     test('return kanbanCard and click on duplicate menu ', () => {
         const {container} = render(wrapDNDIntl(
             <ReduxProvider store={store}>
diff --git a/webapp/src/components/kanban/kanbanCard.tsx b/webapp/src/components/kanban/kanbanCard.tsx
index 3647dca9a..8c8e8dab3 100644
--- a/webapp/src/components/kanban/kanbanCard.tsx
+++ b/webapp/src/components/kanban/kanbanCard.tsx
@@ -1,6 +1,6 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
-import React from 'react'
+import React, {useState} from 'react'
 import {useIntl} from 'react-intl'
 
 import {Board, IPropertyTemplate} from '../../blocks/board'
@@ -22,6 +22,8 @@ import MenuWrapper from '../../widgets/menuWrapper'
 import Tooltip from '../../widgets/tooltip'
 import {sendFlashMessage} from '../flashMessages'
 import PropertyValueElement from '../propertyValueElement'
+
+import ConfirmationDialogBox, {ConfirmationDialogBoxProps} from '../confirmationDialogBox'
 import './kanbanCard.scss'
 
 type Props = {
@@ -49,15 +51,44 @@ const KanbanCard = React.memo((props: Props) => {
     const contents = useAppSelector(getCardContents(card.id))
     const comments = useAppSelector(getCardComments(card.id))
 
+    const [showConfirmationDialogBox, setShowConfirmationDialogBox] = useState<boolean>(false)
+    const handleDeleteCard = async () => {
+        if (!card) {
+            Utils.assertFailure()
+            return
+        }
+        TelemetryClient.trackEvent(TelemetryCategory, TelemetryActions.DeleteCard, {board: board.id, card: card.id})
+        await mutator.deleteBlock(card, 'delete card')
+    }
+    const confirmDialogProps: ConfirmationDialogBoxProps = {
+        heading: intl.formatMessage({id: 'CardDialog.delete-confirmation-dialog-heading', defaultMessage: 'Confirm card delete!'}),
+        confirmButtonText: intl.formatMessage({id: 'CardDialog.delete-confirmation-dialog-button-text', defaultMessage: 'Delete'}),
+        onConfirm: handleDeleteCard,
+        onClose: () => {
+            setShowConfirmationDialogBox(false)
+        },
+    }
+    const handleDeleteButtonOnClick = () => {
+        // user trying to delete a card with blank name
+        // but content present cannot be deleted without
+        // confirmation dialog
+        if (card?.title === '' && card?.fields.contentOrder.length === 0) {
+            handleDeleteCard()
+            return
+        }
+        setShowConfirmationDialogBox(true)
+    }
+
     return (
-        <div
-            ref={props.readonly ? () => null : cardRef}
-            className={className}
-            draggable={!props.readonly}
-            style={{opacity: isDragging ? 0.5 : 1}}
-            onClick={props.onClick}
-        >
-            {!props.readonly &&
+        <>
+            <div
+                ref={props.readonly ? () => null : cardRef}
+                className={className}
+                draggable={!props.readonly}
+                style={{opacity: isDragging ? 0.5 : 1}}
+                onClick={props.onClick}
+            >
+                {!props.readonly &&
                 <MenuWrapper
                     className='optionsMenu'
                     stopPropagationOnToggle={true}
@@ -68,7 +99,7 @@ const KanbanCard = React.memo((props: Props) => {
                             icon={<DeleteIcon/>}
                             id='delete'
                             name={intl.formatMessage({id: 'KanbanCard.delete', defaultMessage: 'Delete'})}
-                            onClick={() => mutator.deleteBlock(card, 'delete card')}
+                            onClick={handleDeleteButtonOnClick}
                         />
                         <Menu.Text
                             icon={<DuplicateIcon/>}
@@ -107,29 +138,33 @@ const KanbanCard = React.memo((props: Props) => {
                         />
                     </Menu>
                 </MenuWrapper>
-            }
+                }
 
-            <div className='octo-icontitle'>
-                { card.fields.icon ? <div className='octo-icon'>{card.fields.icon}</div> : undefined }
-                <div key='__title'>{card.title || intl.formatMessage({id: 'KanbanCard.untitled', defaultMessage: 'Untitled'})}</div>
+                <div className='octo-icontitle'>
+                    { card.fields.icon ? <div className='octo-icon'>{card.fields.icon}</div> : undefined }
+                    <div key='__title'>{card.title || intl.formatMessage({id: 'KanbanCard.untitled', defaultMessage: 'Untitled'})}</div>
+                </div>
+                {visiblePropertyTemplates.map((template) => (
+                    <Tooltip
+                        key={template.id}
+                        title={template.name}
+                    >
+                        <PropertyValueElement
+                            board={board}
+                            readOnly={true}
+                            card={card}
+                            contents={contents}
+                            comments={comments}
+                            propertyTemplate={template}
+                            showEmptyPlaceholder={false}
+                        />
+                    </Tooltip>
+                ))}
             </div>
-            {visiblePropertyTemplates.map((template) => (
-                <Tooltip
-                    key={template.id}
-                    title={template.name}
-                >
-                    <PropertyValueElement
-                        board={board}
-                        readOnly={true}
-                        card={card}
-                        contents={contents}
-                        comments={comments}
-                        propertyTemplate={template}
-                        showEmptyPlaceholder={false}
-                    />
-                </Tooltip>
-            ))}
-        </div>
+
+            {showConfirmationDialogBox && <ConfirmationDialogBox dialogBox={confirmDialogProps}/>}
+
+        </>
     )
 })
 
diff --git a/webapp/src/widgets/buttons/button.scss b/webapp/src/widgets/buttons/button.scss
index 91fb1435e..6c4f7e578 100644
--- a/webapp/src/widgets/buttons/button.scss
+++ b/webapp/src/widgets/buttons/button.scss
@@ -74,8 +74,8 @@
     }
 
     &.emphasis--tertiary {
+        background: rgba(var(--button-bg-rgb), 0.08);
         color: rgb(var(--button-bg-rgb));
-        background-color: rgb(var(--button-bg-rgb), 0.08);
 
         &:hover {
             background-color: rgb(var(--button-bg-rgb), 0.12);
@@ -108,6 +108,7 @@
 
     &.size--medium {
         font-size: 14px;
+        font-weight: 600;
         padding: 0 20px;
         height: 40px;
     }