From b730c46a18c09cc3b8870748f293d345228e1147 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Wed, 18 Jan 2023 15:06:55 +0100
Subject: [PATCH] feat(ui) - insights - toggle for own cards

---
 .../MetricViewHeader/MetricViewHeader.tsx     | 19 ++++++++++++++++---
 .../components/ui/Toggler/toggler.module.css  |  2 +-
 frontend/app/mstore/metricStore.ts            |  4 +++-
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/MetricViewHeader/MetricViewHeader.tsx b/frontend/app/components/Dashboard/components/MetricViewHeader/MetricViewHeader.tsx
index ea5311082..b9e62cb12 100644
--- a/frontend/app/components/Dashboard/components/MetricViewHeader/MetricViewHeader.tsx
+++ b/frontend/app/components/Dashboard/components/MetricViewHeader/MetricViewHeader.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon, PageTitle, Button, Link } from 'UI';
+import { Icon, PageTitle, Button, Link, Toggler } from 'UI';
 import MetricsSearch from '../MetricsSearch';
 import Select from 'Shared/Select';
 import { useStore } from 'App/mstore';
@@ -33,11 +33,22 @@ function MetricViewHeader() {
         <ListViewToggler />
 
         <div className="items-center flex gap-4">
+          <Toggler
+            label="My Cards"
+            checked={filter.showMine}
+            name="test"
+            className="font-medium mr-2"
+            onChange={() =>
+              metricStore.updateKey('filter', { ...filter, showMine: !filter.showMine })
+            }
+          />
           <Select
             options={[{ label: 'All Types', value: 'all' }, ...DROPDOWN_OPTIONS]}
             name="type"
             defaultValue={filter.type}
-            onChange={({ value }) => metricStore.updateKey('filter', { ...filter, type: value.value})}
+            onChange={({ value }) =>
+              metricStore.updateKey('filter', { ...filter, type: value.value })
+            }
             plain={true}
             isSearchable={true}
           />
@@ -55,7 +66,9 @@ function MetricViewHeader() {
 
           <DashboardDropdown
             plain={true}
-            onChange={(value: any) => metricStore.updateKey('filter', { ...filter, dashboard: value})}
+            onChange={(value: any) =>
+              metricStore.updateKey('filter', { ...filter, dashboard: value })
+            }
           />
         </div>
       </div>
diff --git a/frontend/app/components/ui/Toggler/toggler.module.css b/frontend/app/components/ui/Toggler/toggler.module.css
index 26d82880c..0b2d7ac68 100644
--- a/frontend/app/components/ui/Toggler/toggler.module.css
+++ b/frontend/app/components/ui/Toggler/toggler.module.css
@@ -13,7 +13,7 @@
 
   & span {
     padding-left: 10px;
-    color: $gray-medium;
+    /* color: $gray-dark; */
   }
 }
 .switch input {
diff --git a/frontend/app/mstore/metricStore.ts b/frontend/app/mstore/metricStore.ts
index af7050955..cfcb5f19f 100644
--- a/frontend/app/mstore/metricStore.ts
+++ b/frontend/app/mstore/metricStore.ts
@@ -6,7 +6,6 @@ import Error from './types/error';
 import {
   TIMESERIES,
   TABLE,
-
   FUNNEL,
   ERRORS,
   RESOURCE_MONITORING,
@@ -61,6 +60,9 @@ export default class MetricStore {
     return this.metrics
       .filter(
         (card) =>
+          (this.filter.showMine
+            ? card.owner === JSON.parse(localStorage.getItem('user')!).account.email
+            : true) &&
           (this.filter.type === 'all' || card.metricType === this.filter.type) &&
           (!dbIds.length ||
             card.dashboards.map((i) => i.dashboardId).some((id) => dbIds.includes(id))) &&