From 8b49be81b05ea089a9b4e334d70c0b9ba00c3153 Mon Sep 17 00:00:00 2001 From: Sudheer Salavadi Date: Thu, 27 Jun 2024 12:55:30 +0200 Subject: [PATCH] Dashboards redesign - improvments (#2313) * Various minor style updates * Various style improvements * Update ExampleCards.tsx * various minor improvements in dashbaords. * revised dashboard widget header --- .../Dashboard/components/CreateCardButton.tsx | 9 +- .../DashboardEditModal/DashboardEditModal.tsx | 4 +- .../DashboardHeader/DashboardHeader.tsx | 15 +-- .../NewDashModal/Examples/ExCard.tsx | 6 +- .../DashboardOptions/DashboardOptions.tsx | 3 +- .../DashboardWidgetGrid.tsx | 2 +- .../shared/MainSearchBar/MainSearchBar.tsx | 9 +- .../MainSearchBar/components/TagList.tsx | 14 ++- .../shared/SavedSearch/SavedSearch.tsx | 10 +- .../SelectDateRange/SelectDateRange.tsx | 67 ++++++------- .../app/components/ui/Icons/pdf_download.tsx | 2 +- frontend/app/components/ui/Icons/pencil.tsx | 2 +- frontend/app/components/ui/Icons/trash.tsx | 2 +- frontend/app/components/ui/Icons/users.tsx | 3 +- .../app/components/ui/ItemMenu/ItemMenu.tsx | 99 +++++++++---------- .../ui/ItemMenu/itemMenu.module.css | 5 +- .../app/components/ui/Popover/Popover.tsx | 6 +- frontend/app/styles/general.css | 18 ++++ frontend/app/svg/icons/trash.svg | 5 +- yarn.lock | 4 + 20 files changed, 156 insertions(+), 129 deletions(-) create mode 100644 yarn.lock diff --git a/frontend/app/components/Dashboard/components/CreateCardButton.tsx b/frontend/app/components/Dashboard/components/CreateCardButton.tsx index 665191956..faaff2ec0 100644 --- a/frontend/app/components/Dashboard/components/CreateCardButton.tsx +++ b/frontend/app/components/Dashboard/components/CreateCardButton.tsx @@ -1,5 +1,7 @@ import React from "react"; -import {Button, Tooltip} from "UI"; +import {Tooltip} from "UI"; +import {Button} from "antd"; +import { PlusOutlined } from '@ant-design/icons'; import AddCardSelectionModal from "Components/Dashboard/components/AddCardSelectionModal"; import {useStore} from "App/mstore"; @@ -15,11 +17,10 @@ function CreateCardButton() { diff --git a/frontend/app/components/Dashboard/components/DashboardEditModal/DashboardEditModal.tsx b/frontend/app/components/Dashboard/components/DashboardEditModal/DashboardEditModal.tsx index da0e49935..8666ffbdb 100644 --- a/frontend/app/components/Dashboard/components/DashboardEditModal/DashboardEditModal.tsx +++ b/frontend/app/components/Dashboard/components/DashboardEditModal/DashboardEditModal.tsx @@ -57,7 +57,7 @@ function DashboardEditModal(props: Props) { /> - + {/* - + */}
diff --git a/frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx b/frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx index 174a97fba..837315497 100644 --- a/frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx +++ b/frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx @@ -20,6 +20,7 @@ interface IProps { renderReport?: any; } + type Props = IProps & RouteComponentProps; const MAX_CARDS = 29; @@ -43,7 +44,7 @@ function DashboardHeader(props: Props) { const onDelete = async () => { if ( await confirm({ - header: 'Confirm', + header: 'Delete Dashboard', confirmButton: 'Yes, delete', confirmation: `Are you sure you want to permanently delete this Dashboard?`, }) @@ -82,11 +83,11 @@ function DashboardHeader(props: Props) { className="mr-3 select-none border-b border-b-borderColor-transparent hover:border-dotted hover:border-gray-medium cursor-pointer" />
-
+
-
+
dashboardStore.setPeriod(period)} right={true} + isAnt={true} + useButtonStyle={true} />
-
+
onEdit(false)} > - {dashboard?.description || 'Describe the purpose of this dashboard'} + {/* {dashboard?.description || 'Describe the purpose of this dashboard'} */}
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard.tsx index f741e4073..5294648a2 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard.tsx @@ -19,9 +19,9 @@ function ExCard({ style={{width: '100%', height: height || 286}} >
{title}
-
onCard(type)}>{children}
+
onCard(type)}>{children}
); } diff --git a/frontend/app/components/Dashboard/components/DashboardOptions/DashboardOptions.tsx b/frontend/app/components/Dashboard/components/DashboardOptions/DashboardOptions.tsx index 0c170a9f8..bd8860c16 100644 --- a/frontend/app/components/Dashboard/components/DashboardOptions/DashboardOptions.tsx +++ b/frontend/app/components/Dashboard/components/DashboardOptions/DashboardOptions.tsx @@ -14,7 +14,7 @@ function DashboardOptions(props: Props) { const { editHandler, deleteHandler, renderReport, isEnterprise, isTitlePresent } = props; const menuItems = [ { icon: 'pencil', text: 'Rename', onClick: () => editHandler(true) }, - { icon: 'text-paragraph', text: `${!isTitlePresent ? 'Add' : 'Edit'} Description`, onClick: () => editHandler(false) }, + // { icon: 'text-paragraph', text: `${!isTitlePresent ? 'Add' : 'Edit'} Description`, onClick: () => editHandler(false) }, { icon: 'users', text: 'Visibility & Access', onClick: editHandler }, { icon: 'trash', text: 'Delete', onClick: deleteHandler }, { icon: 'pdf-download', text: 'Download Report', onClick: renderReport, disabled: !isEnterprise, tooltipTitle: ENTERPRISE_REQUEIRED } @@ -23,7 +23,6 @@ function DashboardOptions(props: Props) { return ( ); diff --git a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx index bbd945f0b..b318855ef 100644 --- a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx +++ b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx @@ -42,7 +42,7 @@ function DashboardWidgetGrid(props: Props) { show={list?.length === 0} icon="no-metrics-chart" title={ -
+
There are no cards in this dashboard diff --git a/frontend/app/components/shared/MainSearchBar/MainSearchBar.tsx b/frontend/app/components/shared/MainSearchBar/MainSearchBar.tsx index ef2240e78..821c94959 100644 --- a/frontend/app/components/shared/MainSearchBar/MainSearchBar.tsx +++ b/frontend/app/components/shared/MainSearchBar/MainSearchBar.tsx @@ -2,7 +2,8 @@ import React from 'react'; import SessionSearchField from 'Shared/SessionSearchField'; import AiSessionSearchField from 'Shared/SessionSearchField/AiSessionSearchField'; import SavedSearch from 'Shared/SavedSearch'; -import { Button } from 'UI'; +// import { Button } from 'UI'; +import { Button } from 'antd'; import { connect } from 'react-redux'; import { clearSearch } from 'Duck/search'; import TagList from './components/TagList'; @@ -41,10 +42,12 @@ const MainSearchBar = (props: Props) => { diff --git a/frontend/app/components/shared/MainSearchBar/components/TagList.tsx b/frontend/app/components/shared/MainSearchBar/components/TagList.tsx index 0f1bdbc92..983622a32 100644 --- a/frontend/app/components/shared/MainSearchBar/components/TagList.tsx +++ b/frontend/app/components/shared/MainSearchBar/components/TagList.tsx @@ -7,8 +7,8 @@ import { useStore } from 'App/mstore'; import { observer } from 'mobx-react-lite'; import { FilterKey } from 'Types/filter/filterType'; import { addOptionsToFilter } from 'Types/filter/newFilter'; -import { Button, Icon, confirm } from 'UI'; -import { Typography } from 'antd'; +import { Icon, confirm } from 'UI'; +import { Button, Typography } from 'antd'; import { toast } from 'react-toastify'; function TagList(props: { @@ -44,9 +44,15 @@ function TagList(props: { }); }; return ( - ); } diff --git a/frontend/app/components/shared/SavedSearch/SavedSearch.tsx b/frontend/app/components/shared/SavedSearch/SavedSearch.tsx index f5cdfb889..5770d5e76 100644 --- a/frontend/app/components/shared/SavedSearch/SavedSearch.tsx +++ b/frontend/app/components/shared/SavedSearch/SavedSearch.tsx @@ -1,5 +1,6 @@ import React, { useEffect } from 'react'; -import { Button, Icon } from 'UI'; +import { Icon } from 'UI'; +import { Button } from 'antd'; import { connect } from 'react-redux'; import { fetchList as fetchListSavedSearch } from 'Duck/search'; import cn from 'classnames'; @@ -27,11 +28,14 @@ function SavedSearch(props: Props) { return (
{ savedSearch.exists() && ( diff --git a/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx b/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx index 706f2d0fc..b1173b315 100644 --- a/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx +++ b/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx @@ -1,6 +1,6 @@ import { DownOutlined } from '@ant-design/icons'; import Period from 'Types/app/period'; -import { Dropdown, DatePicker } from 'antd'; +import { Dropdown, Button } from 'antd'; import cn from 'classnames'; import { observer } from 'mobx-react-lite'; import React from 'react'; @@ -20,14 +20,14 @@ interface Props { timezone?: string; isAnt?: boolean; small?: boolean; + useButtonStyle?: boolean; // New prop to control button style [x: string]: any; } function SelectDateRange(props: Props) { const [isCustom, setIsCustom] = React.useState(false); - const [isCustomOpen, setIsCustomOpen] = React.useState(false); - const { right = false, period, disableCustom = false, timezone } = props; + const { right = false, period, disableCustom = false, timezone, useButtonStyle = false } = props; let selectedValue = DATE_RANGE_OPTIONS.find( (obj: any) => obj.value === period.rangeName ); @@ -41,13 +41,11 @@ function SelectDateRange(props: Props) { setIsCustom(true); }, 1); } else { - // @ts-ignore props.onChange(new Period({ rangeName: value })); } }; const onApplyDateRange = (value: any) => { - // @ts-ignore const range = new Period({ rangeName: CUSTOM_RANGE, start: value.start, @@ -61,34 +59,31 @@ function SelectDateRange(props: Props) { const customRange = isCustomRange ? period.rangeFormatted() : ''; if (props.isAnt) { - const onAntUpdate = (val: any) => { - onChange(val); + const menuProps = { + items: options.map((opt) => ({ + label: opt.label, + key: opt.value, + })), + defaultSelectedKeys: selectedValue?.value ? [selectedValue.value] : undefined, + onClick: (e: any) => { + onChange(e.key); + }, }; + return (
- ({ - label: opt.label, - key: opt.value, - })), - defaultSelectedKeys: selectedValue?.value - ? [selectedValue.value] - : undefined, - onClick: (e: any) => { - onChange(e.key); - }, - }} - onChange={onAntUpdate} - style={{ width: 170 }} - defaultValue={selectedValue?.value ?? undefined} - > -
-
{isCustomRange ? customRange : selectedValue?.label}
- -
+ + {useButtonStyle ? ( + + ) : ( +
+ {isCustomRange ? customRange : selectedValue?.label} + +
+ )} {isCustom && (
); } + return (