From 523c80f6950a387e5193eca7389703786b5e7a0d Mon Sep 17 00:00:00 2001
From: Rudhra Deep Biswas <98055396+rudeUltra@users.noreply.github.com>
Date: Tue, 13 Aug 2024 13:15:18 +0530
Subject: [PATCH] New add plugins UI (#10538)

* New add plugins UI

* hover and height
---
 .../GlobalDataSourcesPage/index.jsx           | 59 ++++++++++---------
 frontend/src/_styles/global-datasources.scss  | 33 +++++++++++
 2 files changed, 63 insertions(+), 29 deletions(-)

diff --git a/frontend/src/GlobalDatasources/GlobalDataSourcesPage/index.jsx b/frontend/src/GlobalDatasources/GlobalDataSourcesPage/index.jsx
index 0512eadf28..1fddbb5b96 100644
--- a/frontend/src/GlobalDatasources/GlobalDataSourcesPage/index.jsx
+++ b/frontend/src/GlobalDatasources/GlobalDataSourcesPage/index.jsx
@@ -31,7 +31,6 @@ export const GlobalDataSourcesPage = ({ darkMode = false, updateSelectedDatasour
   const [addingDataSource, setAddingDataSource] = useState(false);
   const [suggestingDataSource, setSuggestingDataSource] = useState(false);
   const { t } = useTranslation();
-  const navigate = useNavigate();
   const { admin } = authenticationService.currentSessionValue;
   const marketplaceEnabled = admin && window.public_config?.ENABLE_MARKETPLACE_FEATURE == 'true';
   const [modalProps, setModalProps] = useState({
@@ -296,34 +295,6 @@ export const GlobalDataSourcesPage = ({ darkMode = false, updateSelectedDatasour
   };
 
   const renderCardGroup = (source, type) => {
-    if (type === 'Plugins' && source.length === 0) {
-      return (
-        <div className="add-plugins-container">
-          <div className="warning-container mb-2">
-            <SolidIcon name="warning" />
-          </div>
-          <div className="tj-text-sm font-weight-500 tj-text">No plugins added</div>
-          {admin && (
-            <>
-              <div className="tj-text-xsm font-weight-400 mt-2 mb-3">
-                Browse through plugins in marketplace to add them as a Data Source.{' '}
-              </div>
-              <ButtonSolid
-                onClick={() => {
-                  marketplaceEnabled
-                    ? navigate('/integrations')
-                    : toast.error('Please enable marketplace to add plugins');
-                }}
-                style={{ margin: 'auto' }}
-                variant="secondary"
-              >
-                Add plugins
-              </ButtonSolid>
-            </>
-          )}
-        </div>
-      );
-    }
     const addDataSourceBtn = (item) => (
       <ButtonSolid
         disabled={addingDataSource}
@@ -366,6 +337,36 @@ export const GlobalDataSourcesPage = ({ darkMode = false, updateSelectedDatasour
               titleClassName={'datasource-card-title'}
             />
           ))}
+          {type === 'Plugins' && (
+            <div style={{ height: '122px', width: '164px' }} className={`col-md-2  mb-4 `}>
+              <div
+                className="card add-plugin-card"
+                role="button"
+                onClick={() => {
+                  if (marketplaceEnabled) {
+                    window.open('/integrations', '_blank');
+                  } else {
+                    toast.error('Please enable marketplace to add plugins');
+                  }
+                }}
+                data-cy={`data-source-add-plugin`}
+              >
+                <div className="card-body">
+                  <center style={{ paddingTop: '5px' }}>
+                    <SolidIcon
+                      name="plus"
+                      fill={'var(--icon-default)'}
+                      width={35}
+                      height={35}
+                      style={{ marginBottom: '8px' }}
+                    />
+                    <br></br>
+                    <span className={`datasource-card-title add-plugin-card-title`}>Add plugin</span>
+                  </center>
+                </div>
+              </div>
+            </div>
+          )}
         </div>
       </>
     );
diff --git a/frontend/src/_styles/global-datasources.scss b/frontend/src/_styles/global-datasources.scss
index 6ff16d7f77..1cbaed557b 100644
--- a/frontend/src/_styles/global-datasources.scss
+++ b/frontend/src/_styles/global-datasources.scss
@@ -300,4 +300,37 @@
         border-radius: 6px;
         margin: auto;
     }
+}
+
+
+.add-plugin-card{
+    border: 1px dashed var(--border-default, #CCD1D5);
+    background-color: var(--interactive-weak);
+
+    &:hover{
+        border: 1px dashed var(--border-strong, #CCD1D5);
+        background-color: var(--interactive-default);
+    }
+}
+
+
+
+.add-plugin-card-title{
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 20px;
+    color: var(--text-default);
+}
+
+
+.dark-theme{
+    .add-plugin-card{
+        border: 1px dashed var(--border-default, #CCD1D5);
+    background-color: var(--interactive-weak);
+
+    &:hover{
+        border: 1px dashed var(--border-strong, #CCD1D5);
+        background-color: var(--interactive-default);
+    }
+    }
 }
\ No newline at end of file