From c37708db6c5be0227e01c91d0d917f9067c7f8af Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 13 Dec 2021 18:06:11 +0530
Subject: [PATCH] change(ui) - disable deleting item

---
 .../components/Client/CustomFields/CustomFields.js    | 11 ++++++-----
 .../app/components/Client/CustomFields/ListItem.js    |  4 ++--
 .../app/components/Client/CustomFields/listItem.css   |  5 +++++
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/frontend/app/components/Client/CustomFields/CustomFields.js b/frontend/app/components/Client/CustomFields/CustomFields.js
index 2b875e439..081f11a58 100644
--- a/frontend/app/components/Client/CustomFields/CustomFields.js
+++ b/frontend/app/components/Client/CustomFields/CustomFields.js
@@ -23,7 +23,7 @@ import { confirm } from 'UI/Confirmation';
 })
 @withPageTitle('Metadata - OpenReplay Preferences')
 class CustomFields extends React.Component {
-  state = { showModal: false, currentSite: this.props.sites.get(0) };
+  state = { showModal: false, currentSite: this.props.sites.get(0), deletingItem: null };
 
   componentWillMount() {
     const activeSite = this.props.sites.get(0);
@@ -60,15 +60,15 @@ class CustomFields extends React.Component {
       confirmation: `Are you sure you want to remove?`
     })) {
       const { currentSite } = this.state;
-      this.props.remove(currentSite.id, field.index).then(() => {
-        
-      });
+      this.setState({ deletingItem: field.index });
+      this.props.remove(currentSite.id, field.index)
+        .then(() => this.setState({ deletingItem: null }));
     }
   }
 
   render() {
     const { fields, field, loading } = this.props;
-    const { showModal, currentSite } = this.state;
+    const { showModal, currentSite, deletingItem } = this.state;
     return (
       <div>
         <SlideModal
@@ -105,6 +105,7 @@ class CustomFields extends React.Component {
             <div className={ styles.list }>
               { fields.filter(i => i.index).map(field => (
                 <ListItem
+                  disabled={deletingItem && deletingItem === field.index}
                   key={ field._key }
                   field={ field }
                   onEdit={ this.init }
diff --git a/frontend/app/components/Client/CustomFields/ListItem.js b/frontend/app/components/Client/CustomFields/ListItem.js
index 95c776fc7..a6841ad7e 100644
--- a/frontend/app/components/Client/CustomFields/ListItem.js
+++ b/frontend/app/components/Client/CustomFields/ListItem.js
@@ -3,9 +3,9 @@ import cn from 'classnames'
 import { Icon } from 'UI';
 import styles from './listItem.css';
 
-const ListItem = ({ field, onEdit, onDelete }) => {
+const ListItem = ({ field, onEdit, onDelete, disabled }) => {
   return (
-    <div className={ cn(styles.wrapper, field.index === 0 ? styles.preDefined : '' ) } onClick={ () => field.index != 0 && onEdit(field) } >
+    <div className={ cn(styles.wrapper, field.index === 0 ? styles.preDefined : '', { [styles.disabled] : disabled} ) } onClick={ () => field.index != 0 && onEdit(field) } >
       <span>{ field.key }</span>      
       <div className={ styles.actions } data-hidden={ field.index === 0}>
         <div className={ styles.button } onClick={ (e) => { e.stopPropagation(); onDelete(field) } }>
diff --git a/frontend/app/components/Client/CustomFields/listItem.css b/frontend/app/components/Client/CustomFields/listItem.css
index a46ac7a73..cc1b0806f 100644
--- a/frontend/app/components/Client/CustomFields/listItem.css
+++ b/frontend/app/components/Client/CustomFields/listItem.css
@@ -47,4 +47,9 @@
   border-radius: 10px;
   background-color: $gray-lightest;
   box-shadow: 0 0 0 1px $gray-light inset;
+}
+
+.disabled {
+  opacity: 0.5;
+  pointer-events: none;
 }
\ No newline at end of file