From efdaf7ee4368b3e5b23f5b30081f8b355307b6d2 Mon Sep 17 00:00:00 2001
From: Vikrant Gupta <vikrant.thomso@gmail.com>
Date: Fri, 18 Oct 2024 18:18:30 +0530
Subject: [PATCH] chore: make the clear selection view more highlighted (#6216)

* chore: make the clear selection view more highlighted

* chore: address minor design issue
---
 .../ExplorerOptions.styles.scss               |  3 +-
 .../ExplorerOptions/ExplorerOptions.tsx       | 47 ++++++++++---------
 .../ExplorerOptionsHideArea.tsx               |  6 ++-
 3 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss b/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss
index 54e87fa458..9efc053245 100644
--- a/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss
+++ b/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss
@@ -18,7 +18,7 @@
 	display: inline-flex;
 	align-items: center;
 	gap: 12px;
-	padding: 10px 12px;
+	padding: 10px 10px;
 	border-radius: 50px;
 	border: 1px solid var(--bg-slate-400);
 	background: rgba(22, 24, 29, 0.6);
@@ -33,6 +33,7 @@
 		border: 1px solid var(--bg-slate-400);
 		background: var(--bg-slate-500);
 		cursor: pointer;
+		box-shadow: none;
 	}
 
 	.hidden {
diff --git a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx b/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
index e882dd790e..8edd0444bf 100644
--- a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
+++ b/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
@@ -45,7 +45,6 @@ import {
 	PanelBottomClose,
 	Plus,
 	X,
-	XCircle,
 } from 'lucide-react';
 import {
 	CSSProperties,
@@ -515,7 +514,11 @@ function ExplorerOptions({
 
 	return (
 		<div className="explorer-options-container">
-			{isQueryUpdated && !isExplorerOptionHidden && (
+			{
+				// if a viewName is selected and the explorer options are not hidden then
+				// always show the clear option
+			}
+			{!isExplorerOptionHidden && viewName && (
 				<div
 					className={cx(
 						isEditDeleteSupported ? '' : 'hide-update',
@@ -529,18 +532,25 @@ function ExplorerOptions({
 							icon={<X size={14} />}
 						/>
 					</Tooltip>
-					<Divider
-						type="vertical"
-						className={isEditDeleteSupported ? '' : 'hidden'}
-					/>
-					<Tooltip title="Update this view" placement="top">
-						<Button
-							className={cx('action-icon', isEditDeleteSupported ? ' ' : 'hidden')}
-							disabled={isViewUpdating}
-							onClick={onUpdateQueryHandler}
-							icon={<Disc3 size={14} />}
-						/>
-					</Tooltip>
+					{
+						// only show the update view option when the query is updated
+					}
+					{isQueryUpdated && (
+						<>
+							<Divider
+								type="vertical"
+								className={isEditDeleteSupported ? '' : 'hidden'}
+							/>
+							<Tooltip title="Update this view" placement="top">
+								<Button
+									className={cx('action-icon', isEditDeleteSupported ? ' ' : 'hidden')}
+									disabled={isViewUpdating}
+									onClick={onUpdateQueryHandler}
+									icon={<Disc3 size={14} />}
+								/>
+							</Tooltip>
+						</>
+					)}
 				</div>
 			)}
 			{!isExplorerOptionHidden && (
@@ -564,10 +574,7 @@ function ExplorerOptions({
 							}}
 							dropdownStyle={dropdownStyle}
 							className="views-dropdown"
-							allowClear={{
-								clearIcon: <XCircle size={16} style={{ marginTop: '-3px' }} />,
-							}}
-							onClear={handleClearSelect}
+							allowClear={false}
 							ref={ref}
 						>
 							{viewsData?.data?.data?.map((view) => {
@@ -662,8 +669,8 @@ function ExplorerOptions({
 					</div>
 				</div>
 			)}
-
 			<ExplorerOptionsHideArea
+				viewName={viewName}
 				isExplorerOptionHidden={isExplorerOptionHidden}
 				setIsExplorerOptionHidden={setIsExplorerOptionHidden}
 				sourcepage={sourcepage}
@@ -672,7 +679,6 @@ function ExplorerOptions({
 				onUpdateQueryHandler={onUpdateQueryHandler}
 				isEditDeleteSupported={isEditDeleteSupported}
 			/>
-
 			<Modal
 				className="save-view-modal"
 				title={<span className="title">Save this view</span>}
@@ -705,7 +711,6 @@ function ExplorerOptions({
 					/>
 				</div>
 			</Modal>
-
 			<Modal
 				footer={null}
 				onOk={onCancel(false)}
diff --git a/frontend/src/container/ExplorerOptions/ExplorerOptionsHideArea.tsx b/frontend/src/container/ExplorerOptions/ExplorerOptionsHideArea.tsx
index efdaef1cd1..fbe25ed888 100644
--- a/frontend/src/container/ExplorerOptions/ExplorerOptionsHideArea.tsx
+++ b/frontend/src/container/ExplorerOptions/ExplorerOptionsHideArea.tsx
@@ -10,6 +10,7 @@ import { DataSource } from 'types/common/queryBuilder';
 import { setExplorerToolBarVisibility } from './utils';
 
 interface DroppableAreaProps {
+	viewName: string;
 	isQueryUpdated: boolean;
 	isExplorerOptionHidden?: boolean;
 	sourcepage: DataSource;
@@ -20,6 +21,7 @@ interface DroppableAreaProps {
 }
 
 function ExplorerOptionsHideArea({
+	viewName,
 	isQueryUpdated,
 	isExplorerOptionHidden,
 	sourcepage,
@@ -39,7 +41,7 @@ function ExplorerOptionsHideArea({
 		<div className="explorer-option-droppable-container">
 			{isExplorerOptionHidden && (
 				<>
-					{isQueryUpdated && (
+					{viewName && (
 						<div className="explorer-actions-btn">
 							<Tooltip title="Clear this view">
 								<Button
@@ -49,7 +51,7 @@ function ExplorerOptionsHideArea({
 									icon={<X size={14} color={Color.BG_INK_500} />}
 								/>
 							</Tooltip>
-							{isEditDeleteSupported && (
+							{isEditDeleteSupported && isQueryUpdated && (
 								<Tooltip title="Update this View">
 									<Button
 										onClick={onUpdateQueryHandler}