From 4abed7321912e857cbfd552326fead048642dadd Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Wed, 26 Jun 2024 14:15:09 +0200
Subject: [PATCH] change(ui): examples

---
 .../Examples/SessionsBy/Component.tsx         | 70 +++++++++++--------
 .../NewDashModal/NewDashboardModal.tsx        |  3 +
 .../DashboardList/NewDashModal/SelectCard.tsx | 13 ++--
 .../components/WidgetForm/CardBuilder.tsx     |  6 +-
 4 files changed, 54 insertions(+), 38 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/Component.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/Component.tsx
index eda89c46f..2300ddeb2 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/Component.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/Component.tsx
@@ -1,5 +1,6 @@
 import ExCard from '../ExCard'
 import React from 'react'
+import CardSessionsByList from "Components/Dashboard/Widgets/CardSessionsByList";
 
 function ByComponent({title, rows, lineWidth, onCard, type}: {
     title: string
@@ -13,6 +14,11 @@ function ByComponent({title, rows, lineWidth, onCard, type}: {
     type: string
     lineWidth: number
 }) {
+    const _rows = rows.map((r) => ({
+        ...r,
+        name: r.label,
+        sessionCount: r.value,
+    })).slice(0, 4)
     return (
         <ExCard
             title={title}
@@ -20,37 +26,39 @@ function ByComponent({title, rows, lineWidth, onCard, type}: {
             type={type}
         >
             <div className={'flex gap-1 flex-col'}>
-                {rows.map((r) => (
-                    <div
-                        className={
-                            'flex items-center gap-2 border-b border-dotted py-2 last:border-0 first:pt-0 last:pb-0'
-                        }
-                    >
-                        <div>{r.icon}</div>
-                        <div>{r.label}</div>
-                        <div
-                            style={{marginLeft: 'auto', marginRight: 20, display: 'flex'}}
-                        >
-                            <div
-                                style={{
-                                    height: 2,
-                                    width: lineWidth * (0.01 * r.progress),
-                                    background: '#394EFF',
-                                }}
-                                className={'rounded-l'}
-                            />
-                            <div
-                                style={{
-                                    height: 2,
-                                    width: lineWidth - lineWidth * (0.01 * r.progress),
-                                    background: '#E2E4F6',
-                                }}
-                                className={'rounded-r'}
-                            />
-                        </div>
-                        <div className={'min-w-8'}>{r.value}</div>
-                    </div>
-                ))}
+                <CardSessionsByList list={_rows} selected={''} onClickHandler={() => null}/>
+
+                {/*{rows.map((r) => (*/}
+                {/*    <div*/}
+                {/*        className={*/}
+                {/*            'flex items-center gap-2 border-b border-dotted py-2 last:border-0 first:pt-0 last:pb-0'*/}
+                {/*        }*/}
+                {/*    >*/}
+                {/*        <div>{r.icon}</div>*/}
+                {/*        <div>{r.label}</div>*/}
+                {/*        <div*/}
+                {/*            style={{marginLeft: 'auto', marginRight: 20, display: 'flex'}}*/}
+                {/*        >*/}
+                {/*            <div*/}
+                {/*                style={{*/}
+                {/*                    height: 2,*/}
+                {/*                    width: lineWidth * (0.01 * r.progress),*/}
+                {/*                    background: '#394EFF',*/}
+                {/*                }}*/}
+                {/*                className={'rounded-l'}*/}
+                {/*            />*/}
+                {/*            <div*/}
+                {/*                style={{*/}
+                {/*                    height: 2,*/}
+                {/*                    width: lineWidth - lineWidth * (0.01 * r.progress),*/}
+                {/*                    background: '#E2E4F6',*/}
+                {/*                }}*/}
+                {/*                className={'rounded-r'}*/}
+                {/*            />*/}
+                {/*        </div>*/}
+                {/*        <div className={'min-w-8'}>{r.value}</div>*/}
+                {/*    </div>*/}
+                {/*))}*/}
             </div>
         </ExCard>
     )
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/NewDashboardModal.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/NewDashboardModal.tsx
index ed17b8217..ae48e05af 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/NewDashboardModal.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/NewDashboardModal.tsx
@@ -15,6 +15,7 @@ const NewDashboardModal: React.FC<NewDashboardModalProps> = ({
                                                                  isAddingFromLibrary = false,
                                                              }) => {
     const [step, setStep] = React.useState<number>(0);
+    const [selectedCategory, setSelectedCategory] = React.useState<string>('product-analytics');
 
     useEffect(() => {
         return () => {
@@ -28,6 +29,8 @@ const NewDashboardModal: React.FC<NewDashboardModalProps> = ({
                 <div>
                     <div className="flex flex-col gap-4">
                         {step === 0 && <SelectCard onClose={onClose}
+                                                   selected={selectedCategory}
+                                                   setSelectedCategory={setSelectedCategory}
                                                    onCard={() => setStep(step + 1)}
                                                    isLibrary={isAddingFromLibrary}/>}
                         {step === 1 && <CreateCard onBack={() => setStep(0)}/>}
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx
index 72ca572e2..6483f9a44 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx
@@ -9,11 +9,12 @@ interface SelectCardProps {
     onClose: (refresh?: boolean) => void;
     onCard: () => void;
     isLibrary?: boolean;
+    selected?: string;
+    setSelectedCategory?: React.Dispatch<React.SetStateAction<string>>;
 }
 
 const SelectCard: React.FC<SelectCardProps> = (props: SelectCardProps) => {
-    const {onCard, isLibrary = false} = props;
-    const [selected, setSelected] = React.useState<string>('product-analytics');
+    const {onCard, isLibrary = false, selected, setSelectedCategory} = props;
     const [selectedCards, setSelectedCards] = React.useState<number[]>([]);
     const {metricStore, dashboardStore} = useStore();
     const dashboardId = window.location.pathname.split('/')[3];
@@ -83,7 +84,7 @@ const SelectCard: React.FC<SelectCardProps> = (props: SelectCardProps) => {
                 )}
             </Space>
 
-            {!isLibrary && <CategorySelector setSelected={setSelected}/>}
+            {!isLibrary && <CategorySelector setSelected={setSelectedCategory} selected={selected}/>}
             {isLibrary ? <CardsLibrary query={libraryQuery} selectedList={selectedCards} category={selected}
                                        onCard={onCardClick}/> :
                 <ExampleCardsGrid items={cardItems}/>}
@@ -111,15 +112,17 @@ const SelectCard: React.FC<SelectCardProps> = (props: SelectCardProps) => {
 // );
 
 interface CategorySelectorProps {
-    setSelected: React.Dispatch<React.SetStateAction<string>>;
+    setSelected?: React.Dispatch<React.SetStateAction<string>>;
+    selected?: string;
 }
 
-const CategorySelector: React.FC<CategorySelectorProps> = ({setSelected}) => (
+const CategorySelector: React.FC<CategorySelectorProps> = ({setSelected, selected}) => (
     <Segmented
         options={CARD_CATEGORIES.map(({key, label, icon}) => ({
             label: <Option key={key} label={label} Icon={icon}/>,
             value: key,
         }))}
+        value={selected}
         onChange={setSelected}
     />
 );
diff --git a/frontend/app/components/Dashboard/components/WidgetForm/CardBuilder.tsx b/frontend/app/components/Dashboard/components/WidgetForm/CardBuilder.tsx
index 205e66d2d..10778d064 100644
--- a/frontend/app/components/Dashboard/components/WidgetForm/CardBuilder.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetForm/CardBuilder.tsx
@@ -296,8 +296,10 @@ const CardBuilder = observer((props: CardBuilderProps) => {
             {/*    metric={metric}*/}
             {/*    writeOption={writeOption}*/}
             {/*/>*/}
-            <MetricTabs metric={metric}
-                        writeOption={writeOption}/>
+
+            {/*<MetricTabs metric={metric}*/}
+            {/*            writeOption={writeOption}/>*/}
+
             {metric.metricType === USER_PATH && <PathAnalysisFilter metric={metric}/>}
             {isPredefined && <PredefinedMessage/>}
             {testingKey && (