From bad530af73c93f822182337bcf8de1cd2959d47e Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 16 Aug 2022 15:49:22 +0200
Subject: [PATCH] remote pull and resolved conflicts

---
 .../Client/CustomFields/CustomFields.js       |   8 +-
 .../components/Client/Webhooks/Webhooks.js    | 121 +++++++++---------
 .../shared/AnimatedSVG/AnimatedSVG.tsx        |   9 ++
 3 files changed, 77 insertions(+), 61 deletions(-)

diff --git a/frontend/app/components/Client/CustomFields/CustomFields.js b/frontend/app/components/Client/CustomFields/CustomFields.js
index d5abbb2c6..1d8c2b2cd 100644
--- a/frontend/app/components/Client/CustomFields/CustomFields.js
+++ b/frontend/app/components/Client/CustomFields/CustomFields.js
@@ -84,8 +84,12 @@ function CustomFields(props) {
                 <NoContent
                     title={
                         <div className="flex flex-col items-center justify-center">
-                            <AnimatedSVG name={ICONS.EMPTY_STATE} size="170" />
-                            <div className="mt-6 text-2xl">No data available.</div>
+                            <AnimatedSVG name={ICONS.NO_METADATA} size={120} />
+                            {/* <div className="mt-4" /> */}
+                            <div className="text-center text-gray-600 my-4">None added yet</div>
+                            <Button icon="plus" variant="text-primary" onClick={() => init()}>
+                                Add
+                            </Button>
                         </div>
                     }
                     size="small"
diff --git a/frontend/app/components/Client/Webhooks/Webhooks.js b/frontend/app/components/Client/Webhooks/Webhooks.js
index 076ed0587..58350809f 100644
--- a/frontend/app/components/Client/Webhooks/Webhooks.js
+++ b/frontend/app/components/Client/Webhooks/Webhooks.js
@@ -13,71 +13,74 @@ import { toast } from 'react-toastify';
 import { useModal } from 'App/components/Modal';
 
 function Webhooks(props) {
-    const { webhooks, loading } = props;
-    const { showModal, hideModal } = useModal();
+  const { webhooks, loading } = props;
+  const { showModal, hideModal } = useModal();
 
-    const noSlackWebhooks = webhooks.filter((hook) => hook.type !== 'slack');
-    useEffect(() => {
-        props.fetchList();
-    }, []);
+  const noSlackWebhooks = webhooks.filter((hook) => hook.type !== 'slack');
+  useEffect(() => {
+    props.fetchList();
+  }, []);
 
-    const init = (v) => {
-        props.init(v);
-        showModal(<WebhookForm onClose={hideModal} onDelete={removeWebhook} />);
-    };
+  const init = (v) => {
+    props.init(v);
+    showModal(<WebhookForm onClose={hideModal} onDelete={removeWebhook} />);
+  };
 
-    const removeWebhook = async (id) => {
-        if (
-            await confirm({
-                header: 'Confirm',
-                confirmButton: 'Yes, delete',
-                confirmation: `Are you sure you want to remove this webhook?`,
-            })
-        ) {
-            props.remove(id).then(() => {
-                toast.success('Webhook removed successfully');
-            });
-            hideModal();
-        }
-    };
+  const removeWebhook = async (id) => {
+    if (
+      await confirm({
+        header: 'Confirm',
+        confirmButton: 'Yes, delete',
+        confirmation: `Are you sure you want to remove this webhook?`,
+      })
+    ) {
+      props.remove(id).then(() => {
+        toast.success('Webhook removed successfully');
+      });
+      hideModal();
+    }
+  };
 
-    return (
-        <div>
-            <div className={styles.tabHeader}>
-                <h3 className={cn(styles.tabTitle, 'text-2xl')}>{'Webhooks'}</h3>
-                <Button rounded={true} icon="plus" variant="outline" onClick={() => init()} />
+  return (
+    <div>
+      <div className={styles.tabHeader}>
+        <h3 className={cn(styles.tabTitle, 'text-2xl')}>{'Webhooks'}</h3>
+        <Button rounded={true} icon="plus" variant="outline" onClick={() => init()} />
+      </div>
+
+      <Loader loading={loading}>
+        <NoContent
+          title={
+            <div className="flex flex-col items-center justify-center">
+              <AnimatedSVG name={ICONS.NO_WEBHOOKS} size={120} />
+              <div className="text-center text-gray-600 my-4">None added yet</div>
+              <Button icon="plus" variant="text-primary" onClick={() => init()}>
+                Add
+              </Button>
             </div>
-
-            <Loader loading={loading}>
-                <NoContent
-                    title={
-                        <div className="flex flex-col items-center justify-center">
-                            <AnimatedSVG name={ICONS.EMPTY_STATE} size="170" />
-                            <div className="mt-6 text-2xl">No webhooks available.</div>
-                        </div>
-                    }
-                    size="small"
-                    show={noSlackWebhooks.size === 0}
-                >
-                    <div className="cursor-pointer">
-                        {noSlackWebhooks.map((webhook) => (
-                            <ListItem key={webhook.key} webhook={webhook} onEdit={() => init(webhook)} />
-                        ))}
-                    </div>
-                </NoContent>
-            </Loader>
-        </div>
-    );
+          }
+          size="small"
+          show={noSlackWebhooks.size === 0}
+        >
+          <div className="cursor-pointer">
+            {noSlackWebhooks.map((webhook) => (
+              <ListItem key={webhook.key} webhook={webhook} onEdit={() => init(webhook)} />
+            ))}
+          </div>
+        </NoContent>
+      </Loader>
+    </div>
+  );
 }
 
 export default connect(
-    (state) => ({
-        webhooks: state.getIn(['webhooks', 'list']),
-        loading: state.getIn(['webhooks', 'loading']),
-    }),
-    {
-        init,
-        fetchList,
-        remove,
-    }
+  (state) => ({
+    webhooks: state.getIn(['webhooks', 'list']),
+    loading: state.getIn(['webhooks', 'loading']),
+  }),
+  {
+    init,
+    fetchList,
+    remove,
+  }
 )(withPageTitle('Webhooks - OpenReplay Preferences')(Webhooks));
diff --git a/frontend/app/components/shared/AnimatedSVG/AnimatedSVG.tsx b/frontend/app/components/shared/AnimatedSVG/AnimatedSVG.tsx
index c1d8b1799..df2fffce8 100644
--- a/frontend/app/components/shared/AnimatedSVG/AnimatedSVG.tsx
+++ b/frontend/app/components/shared/AnimatedSVG/AnimatedSVG.tsx
@@ -10,6 +10,8 @@ import NoBookmarks from '../../../svg/ca-no-bookmarked-session.svg';
 import NoLiveSessions from '../../../svg/ca-no-live-sessions.svg';
 import NoSessions from '../../../svg/ca-no-sessions.svg';
 import NoSessionsInVault from '../../../svg/ca-no-sessions-in-vault.svg';
+import NoWebhooks from '../../../svg/ca-no-webhooks.svg';
+import NoMetadata from '../../../svg/ca-no-metadata.svg';
 import NoIssues from '../../../svg/ca-no-issues.svg';
 
 export enum ICONS {
@@ -24,6 +26,9 @@ export enum ICONS {
     NO_LIVE_SESSIONS = 'ca-no-live-sessions',
     NO_SESSIONS = 'ca-no-sessions',
     NO_SESSIONS_IN_VAULT = 'ca-no-sessions-in-vault',
+    NO_WEBHOOKS = 'ca-no-webhooks',
+    NO_METADATA = 'ca-no-metadata',
+    NO_SESSIONS_IN_VAULT = 'ca-no-sessions-in-vault',
     NO_ISSUES = 'ca-no-issues',
 }
 
@@ -57,6 +62,10 @@ function AnimatedSVG(props: Props) {
                 return <object style={{ width: size + 'px' }} type="image/svg+xml" data={NoSessions} />;
             case ICONS.NO_SESSIONS_IN_VAULT:
                 return <object style={{ width: size + 'px' }} type="image/svg+xml" data={NoSessionsInVault} />;
+            case ICONS.NO_WEBHOOKS:
+                return <object style={{ width: size + 'px' }} type="image/svg+xml" data={NoWebhooks} />;
+            case ICONS.NO_METADATA:
+                return <object style={{ width: size + 'px' }} type="image/svg+xml" data={NoMetadata} />;
             case ICONS.NO_ISSUES:
                 return <object style={{ width: size + 'px' }} type="image/svg+xml" data={NoIssues} />;
             default: