change(ui) - cards and dashboard

frontend/app/components/Dashboard/components/DashboardList/Header.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Button, PageTitle } from 'UI';
+import { Button, PageTitle, Toggler, Icon } from 'UI';
 import Select from 'Shared/Select';
 import DashboardSearch from './DashboardSearch';
 import { useStore } from 'App/mstore';
-import { useObserver } from 'mobx-react-lite';
+import { observer, useObserver } from 'mobx-react-lite';
 import { withSiteId } from 'App/routes';
 
 function Header({ history, siteId }: { history: any; siteId: string }) {
@@ -20,7 +20,7 @@ function Header({ history, siteId }: { history: any; siteId: string }) {
 
   return (
     <>
-      <div className="flex items-center mb-4 justify-between px-6">
+      <div className="flex items-center justify-between px-6">
         <div className="flex items-baseline mr-3">
           <PageTitle title="Dashboards" />
         </div>
@@ -34,8 +34,24 @@ function Header({ history, siteId }: { history: any; siteId: string }) {
           </div>
         </div>
       </div>
+      <div className="text-base text-disabled-text flex items-center px-6">
+        <Icon name="info-circle-fill" className="mr-2" size={16} />
+        A Dashboard is a collection of Metrics that can be shared across teams.
+      </div>
       <div className="border-y px-3 py-1 mt-2 flex items-center w-full justify-end gap-4">
-        <Select
+        <Toggler
+          label="Private Dashboards"
+          checked={dashboardStore.filter.showMine}
+          name="test"
+          className="font-medium mr-2"
+          onChange={() =>
+            dashboardStore.updateKey('filter', {
+              ...dashboardStore.filter,
+              showMine: !dashboardStore.filter.showMine,
+            })
+          }
+        />
+        {/* <Select
           options={[
             { label: 'Visibility - All', value: 'all' },
             { label: 'Visibility - Private', value: 'private' },
@@ -49,7 +65,7 @@ function Header({ history, siteId }: { history: any; siteId: string }) {
               visibility: value.value,
             })
           }
-        />
+        /> */}
 
         <Select
           options={[
@@ -65,4 +81,4 @@ function Header({ history, siteId }: { history: any; siteId: string }) {
   );
 }
 
-export default Header;
+export default observer(Header);

frontend/app/components/Dashboard/components/DashboardSideMenu/DashboardSideMenu.tsx

@@ -39,7 +39,7 @@ function DashboardSideMenu(props: Props) {
           active={isMetric}
           id="menu-manage-alerts"
           title="Cards"
-          iconName="bar-chart-line"
+          iconName="card-text"
           onClick={() => redirect(withSiteId(metrics(), siteId))}
         />
       </div>

frontend/app/components/Dashboard/components/MetricViewHeader/MetricViewHeader.tsx

@@ -12,7 +12,7 @@ function MetricViewHeader() {
 
   return (
     <div>
-      <div className="flex items-center mb-4 justify-between px-6">
+      <div className="flex items-center justify-between px-6">
         <div className="flex items-baseline mr-3">
           <PageTitle title="Cards" className="" />
         </div>

frontend/app/constants/filterOptions.js

@@ -120,9 +120,9 @@ export const issueOptions = [
 
 export const issueCategories = [
   { label: 'Resources', value: IssueCategory.RESOURCES },
-  { label: 'Network', value: IssueCategory.NETWORK },
+  { label: 'Network Request', value: IssueCategory.NETWORK },
-  { label: 'Rage', value: IssueCategory.RAGE },
+  { label: 'Click Rage', value: IssueCategory.RAGE },
-  { label: 'Errors', value: IssueCategory.ERRORS },
+  { label: 'JS Errors', value: IssueCategory.ERRORS },
 ]
 
 export const issueCategoriesMap = issueCategories.reduce((acc, {value, label}) => {

frontend/app/mstore/dashboardStore.ts

@@ -9,7 +9,7 @@ import { getRE } from 'App/utils';
 
 interface DashboardFilter {
   query?: string;
-  visibility?: string;
+  showMine?: boolean;
 }
 export default class DashboardStore {
   siteId: any = null;
@@ -27,7 +27,7 @@ export default class DashboardStore {
   endTimestamp: number = 0;
   pendingRequests: number = 0;
 
-  filter: DashboardFilter = { visibility: 'all', query: '' };
+  filter: DashboardFilter = { showMine: false, query: '' };
 
   // Metrics
   metricsPage: number = 1;
@@ -70,8 +70,7 @@ export default class DashboardStore {
     return this.dashboards
       .filter(
         (dashboard) =>
-          (this.filter.visibility === 'all' ||
+          (this.filter.showMine ? !dashboard.isPublic : dashboard.isPublic) &&
-            (this.filter.visibility === 'team' ? dashboard.isPublic : !dashboard.isPublic)) &&
           (!filterRE ||
             // @ts-ignore
             ['name', 'owner', 'description'].some((key) => filterRE.test(dashboard[key])))
@@ -394,7 +393,7 @@ export default class DashboardStore {
   }
 
   toggleAlertModal(val: boolean) {
-     this.showAlertModal = val
+    this.showAlertModal = val;
   }
 
   fetchMetricChartData(

frontend/app/svg/icons/card-text.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-card-text" viewBox="0 0 16 16">
+  <path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/>
+  <path d="M3 5.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3 8a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 8zm0 2.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"/>
+</svg>