From 066825ac30b67e67b50561de8a45d56c1f8d601a Mon Sep 17 00:00:00 2001
From: Anant Jain <anant.j2409@gmail.com>
Date: Sun, 21 Jul 2024 23:38:19 -0700
Subject: [PATCH] Add show/hide option

---
 src/common/MetaRow/MetaRow.js  | 17 ++++++++++++-----
 src/common/MetaRow/styles.less |  5 +++++
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/common/MetaRow/MetaRow.js b/src/common/MetaRow/MetaRow.js
index 7d023202a..b6226802d 100644
--- a/src/common/MetaRow/MetaRow.js
+++ b/src/common/MetaRow/MetaRow.js
@@ -13,6 +13,7 @@ const styles = require('./styles');
 
 const MetaRow = ({ className, title, catalog, message, itemComponent, notifications }) => {
     const t = useTranslate();
+    const [isHidden, setIsHidden] = React.useState(false);
 
     const catalogTitle = React.useMemo(() => {
         return title ?? t.catalogTitle(catalog);
@@ -37,10 +38,16 @@ const MetaRow = ({ className, title, catalog, message, itemComponent, notificati
                 }
                 {
                     href ?
-                        <Button className={styles['see-all-container']} title={t.string('BUTTON_SEE_ALL')} href={href} tabIndex={-1}>
-                            <div className={styles['label']}>{ t.string('BUTTON_SEE_ALL') }</div>
-                            <Icon className={styles['icon']} name={'chevron-forward'} />
-                        </Button>
+                        <div className={styles['meta-row-actions-container']}>
+                            <Button className={styles['see-all-container']} onClick={() => setIsHidden(!isHidden)}>
+                                <div className={styles['label']}>{isHidden ? 'Show' : 'Hide'}</div>
+                                <Icon className={styles['icon']} name={isHidden ? 'eye' : 'eye-off'} />
+                            </Button>
+                            <Button className={styles['see-all-container']} title={t.string('BUTTON_SEE_ALL')} href={href} tabIndex={-1}>
+                                <div className={styles['label']}>{t.string('BUTTON_SEE_ALL')}</div>
+                                <Icon className={styles['icon']} name={'chevron-forward'} />
+                            </Button>
+                        </div>
                         :
                         null
                 }
@@ -49,7 +56,7 @@ const MetaRow = ({ className, title, catalog, message, itemComponent, notificati
                 typeof message === 'string' && message.length > 0 ?
                     <div className={styles['message-container']} title={message}>{message}</div>
                     :
-                    <div className={styles['meta-items-container']}>
+                    !isHidden && <div className={styles['meta-items-container']}>
                         {
                             ReactIs.isValidElementType(itemComponent) ?
                                 items.slice(0, CONSTANTS.CATALOG_PREVIEW_SIZE).map((item, index) => {
diff --git a/src/common/MetaRow/styles.less b/src/common/MetaRow/styles.less
index 863601be8..80cbf0a5c 100644
--- a/src/common/MetaRow/styles.less
+++ b/src/common/MetaRow/styles.less
@@ -84,6 +84,11 @@
             }
         }
     }
+
+    .meta-row-actions-container {
+        display: flex;
+        flex-direction: row;
+    }
 }
 
 @media only screen and (max-width: @minimum) {