Cards list view table updated using ant component.

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

@@ -30,6 +30,8 @@ function DashboardList({ siteId }: { siteId: string }) {
             title: 'Title',
             dataIndex: 'name',
             width: '25%',
+            sorter: (a, b) => a.name?.localeCompare(b.name),
+            sortDirections: ['ascend', 'descend'],
             render: (t) => <div className="link cap-first">{t}</div>,
         },
         {

frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx

@@ -17,7 +17,7 @@ import {
   WEB_VITALS
 } from 'App/constants/card';
 import { FilterKey } from 'Types/filter/filterType';
-import { Activity, BarChart, TableCellsMerge, TrendingUp } from 'lucide-react';
+import { Activity, BarChart, TableCellsMerge, SearchSlash, TrendingUp } from 'lucide-react';
 import WebVital from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/WebVital';
 import ByIssues from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByIssues';
 import InsightsExample from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/InsightsExample';
@@ -46,7 +46,7 @@ export const CARD_CATEGORIES = [
   { key: CARD_CATEGORY.PRODUCT_ANALYTICS, label: 'Product Analytics', icon: TrendingUp, types: [USER_PATH, ERRORS] },
   { key: CARD_CATEGORY.PERFORMANCE_MONITORING, label: 'Performance Monitoring', icon: Activity, types: [TIMESERIES] },
   { key: CARD_CATEGORY.WEB_ANALYTICS, label: 'Web Analytics', icon: BarChart, types: [TABLE] },
-  { key: CARD_CATEGORY.ERROR_TRACKING, label: 'Errors Tracking', icon: TableCellsMerge, types: [WEB_VITALS] },
+  { key: CARD_CATEGORY.ERROR_TRACKING, label: 'Errors Tracking', icon: SearchSlash, types: [WEB_VITALS] },
   { key: CARD_CATEGORY.WEB_VITALS, label: 'Web Vitals', icon: TableCellsMerge, types: [WEB_VITALS] }
 ];
 

frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import { Icon, Checkbox, confirm, Modal } from 'UI';
-import { Dropdown, Button, Input, Tooltip } from 'antd';
-import { checkForRecent } from 'App/date';
+import { Icon } from 'UI';
+import { Tooltip, Modal, Input, Button, Dropdown, Menu, Tag } from 'antd';
+import { UserOutlined, UserAddOutlined, TeamOutlined, LockOutlined, EditOutlined, DeleteOutlined, MoreOutlined } from '@ant-design/icons';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 import { withSiteId } from 'App/routes';
 import { TYPES } from 'App/constants/card';
@@ -16,6 +16,7 @@ interface Props extends RouteComponentProps {
   selected?: boolean;
   toggleSelection?: any;
   disableSelection?: boolean;
+  renderColumn: string;
 }
 
 function MetricTypeIcon({ type }: any) {
@@ -28,21 +29,21 @@ function MetricTypeIcon({ type }: any) {
   return (
     <Tooltip title={<div className="capitalize">{card.title}</div>}>
       <div className="w-9 h-9 rounded-full bg-tealx-lightest flex items-center justify-center mr-2">
-        {card.icon && <Icon name={card.icon} size="16" color="tealx" />}
+      {card.icon && <Icon name={card.icon} size="16" color="tealx" />}
       </div>
     </Tooltip>
   );
 }
 
-function MetricListItem(props: Props) {
-  const {
-    metric,
-    history,
-    siteId,
-    selected,
-    toggleSelection = () => {},
-    disableSelection = false,
-  } = props;
+const MetricListItem: React.FC<Props> = ({
+  metric,
+  siteId,
+  history,
+  selected,
+  toggleSelection = () => {},
+  disableSelection = false,
+  renderColumn
+}) => {
   const { metricStore } = useStore();
   const [isEdit, setIsEdit] = useState(false);
   const [newName, setNewName] = useState(metric.name);
@@ -57,111 +58,103 @@ function MetricListItem(props: Props) {
 
   const onMenuClick = async ({ key }: { key: string }) => {
     if (key === 'delete') {
-      if (await confirm({
-        header: 'Confirm',
-        confirmButton: 'Yes, delete',
-        confirmation: `Are you sure you want to permanently delete this card?`
-      })) {
-        await metricStore.delete(metric)
-        // toast.success('Card deleted');
-      }
+      Modal.confirm({
+        title: 'Confirm',
+        content: 'Are you sure you want to permanently delete this card?',
+        okText: 'Yes, delete',
+        cancelText: 'No',
+        onOk: async () => {
+          await metricStore.delete(metric);
+        },
+      });
     }
     if (key === 'rename') {
       setIsEdit(true);
     }
-  }
+  };
+
   const onRename = async () => {
     try {
       metric.updateKey('name', newName);
       await metricStore.save(metric);
-      void metricStore.fetchList()
-      setIsEdit(false)
+      metricStore.fetchList();
+      setIsEdit(false);
     } catch (e) {
-      console.log(e)
+      console.log(e);
       toast.error('Failed to rename card');
-    }}
+    }
+  };
 
-  return (
-    <>
-      <Modal open={isEdit} onClose={() => setIsEdit(false)}>
-        <Modal.Header>Rename Card</Modal.Header>
-        <Modal.Content>
-          <Input
-            placeholder="Enter new card title"
-            value={newName}
-            onChange={(e) => setNewName(e.target.value)}
-          />
-        </Modal.Content>
-        <Modal.Footer>
-          <Button
-            onClick={onRename}
-            type={'primary'}
-            className="mr-2"
-          >
-            Save
-          </Button>
-
-          <Button
-            onClick={() => setIsEdit(false)}
-          >
-            Cancel
-          </Button>
-        </Modal.Footer>
-      </Modal>
-      <div
-        className="grid grid-cols-12 py-4 border-t select-none items-center hover:bg-active-blue cursor-pointer px-6"
-        onClick={onItemClick}
-      >
-        <div className="col-span-4 flex items-center">
-          {!disableSelection && (
-            <Checkbox
-              name="slack"
-              className="mr-4"
-              type="checkbox"
-              checked={selected}
-              onClick={toggleSelection}
-            />
-          )}
-
-          <div className="flex items-center">
-            <MetricTypeIcon type={metric.metricType} />
-            <div className={cn('capitalize-first', { link: disableSelection })}>{metric.name}</div>
-          </div>
-        </div>
-        <div className="col-span-2">{metric.owner}</div>
-        <div className="col-span-2">
-          <div className="flex items-center">
-            <Icon name={metric.isPublic ? 'user-friends' : 'person-fill'} className="mr-2" />
-            <span>{metric.isPublic ? 'Team' : 'Private'}</span>
-          </div>
-        </div>
-        <div className="col-span-2">
-          {metric.lastModified && checkForRecent(metric.lastModified, 'LLL dd, yyyy, hh:mm a')}
-        </div>
-        <div className={'col-span-2'} onClick={e => e.stopPropagation()}>
-          <Dropdown menu={{
-            items: [
-              {
-                label: "Rename",
-                key: "rename",
-                icon: <Icon name={'pencil'} size="16" />,
-              },
-              {
-                label: "Delete",
-                key: "delete",
-                icon: <Icon name={'trash'} size="16" />
-              }
-            ],
-            onClick: onMenuClick,
-          }}>
-          <div className={'ml-auto p-2 rounded border border-transparent w-fit hover:border-gray-light'}>
-            <Icon name="ellipsis-v" size="16" />
-          </div>
-          </Dropdown>
-        </div>
-      </div>
-    </>
+  const renderModal = () => (
+    <Modal
+      title="Rename Card"
+      visible={isEdit}
+      onCancel={() => setIsEdit(false)}
+      footer={[
+        <Button key="back" onClick={() => setIsEdit(false)}>
+          Cancel
+        </Button>,
+        <Button key="submit" type="primary" onClick={onRename}>
+          Save
+        </Button>,
+      ]}
+    >
+      <Input
+        placeholder="Enter new card title"
+        value={newName}
+        onChange={(e) => setNewName(e.target.value)}
+      />
+    </Modal>
   );
-}
+
+  switch (renderColumn) {
+    case 'title':
+      return (
+        <>
+          <div className="flex items-center cursor-pointer" onClick={onItemClick}>
+            <MetricTypeIcon type={metric.metricType} />
+            <div className="capitalize-first link block">{metric.name}</div>
+          </div>
+          {renderModal()}
+        </>
+      );
+    case 'owner':
+      return <div>{metric.owner}</div>;
+    case 'visibility':
+      return (
+        <div className="flex items-center">
+          <Tag className='rounded-lg' bordered={false}>
+            {metric.isPublic ? <TeamOutlined className="mr-2" /> : <LockOutlined className="mr-2" />}
+            {metric.isPublic ? 'Team' : 'Private'}
+          </Tag>
+        </div>
+      );
+    case 'lastModified':
+      return new Date(metric.lastModified).toLocaleString();
+    case 'options':
+      return (
+        <>
+          <Dropdown
+            overlay={
+              <Menu onClick={onMenuClick}>
+                <Menu.Item key="rename" icon={<EditOutlined />}>
+                  Rename
+                </Menu.Item>
+                <Menu.Item key="delete" icon={<DeleteOutlined />}>
+                  Delete
+                </Menu.Item>
+              </Menu>
+            }
+            trigger={['click']}
+          >
+            <Button type="default" icon={<MoreOutlined />} />
+          </Dropdown>
+          {renderModal()}
+        </>
+      );
+    default:
+      return null;
+  }
+};
 
 export default withRouter(observer(MetricListItem));

frontend/app/components/Dashboard/components/MetricsList/ListView.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
+import { Checkbox, Table } from 'antd';
 import MetricListItem from '../MetricListItem';
-import { Checkbox } from 'UI';
 
 interface Props {
   list: any;
@@ -9,48 +9,126 @@ interface Props {
   toggleSelection?: (metricId: any) => void;
   toggleAll?: (e: any) => void;
   disableSelection?: boolean;
-  allSelected?: boolean
+  allSelected?: boolean;
   existingCardIds?: number[];
 }
-function ListView(props: Props) {
-  const { siteId, list, selectedList, toggleSelection, disableSelection = false, allSelected = false } = props;
-  return (
-    <div>
-      <div className="grid grid-cols-12 py-2 font-medium px-6">
-        <div className="col-span-4 flex items-center">
+
+const ListView: React.FC<Props> = (props: Props) => {
+  const { siteId, list, selectedList, toggleSelection, disableSelection = false, allSelected = false, toggleAll } = props;
+
+  const columns = [
+    {
+      title: (
+        <div className="flex items-center">
           {!disableSelection && (
             <Checkbox
               name="slack"
               className="mr-4"
-              type="checkbox"
               checked={allSelected}
-              // onClick={() => selectedList(list.map((i: any) => i.metricId))}
-              onClick={props.toggleAll}
+              onClick={toggleAll}
             />
           )}
           <span>Title</span>
         </div>
-
-        <div className="col-span-2">Owner</div>
-        <div className="col-span-2">Visibility</div>
-        <div className="col-span-2">Last Modified</div>
-        <div className={'col-span-2 text-right invisible'}>Options</div>
-      </div>
-      {list.map((metric: any) => (
+      ),
+      dataIndex: 'name',
+      key: 'title',
+      sorter: (a: any, b: any) => a.name.localeCompare(b.name),
+      render: (text: any, metric: any) => (
         <MetricListItem
           key={metric.metricId}
-          disableSelection={disableSelection}
           metric={metric}
           siteId={siteId}
+          disableSelection={disableSelection}
           selected={selectedList.includes(parseInt(metric.metricId))}
           toggleSelection={(e: any) => {
             e.stopPropagation();
             toggleSelection && toggleSelection(parseInt(metric.metricId));
           }}
+          renderColumn="title"
         />
-      ))}
-    </div>
+      ),
+    },
+    {
+      title: 'Owner',
+      dataIndex: 'owner',
+      key: 'owner',
+      sorter: (a: any, b: any) => a.owner.localeCompare(b.owner),
+      render: (text: any, metric: any) => (
+        <MetricListItem
+          key={metric.metricId}
+          metric={metric}
+          siteId={siteId}
+          renderColumn="owner"
+        />
+      ),
+    },
+    {
+      title: 'Visibility',
+      dataIndex: 'visibility',
+      key: 'visibility',
+      render: (text: any, metric: any) => (
+        <MetricListItem
+          key={metric.metricId}
+          metric={metric}
+          siteId={siteId}
+          renderColumn="visibility"
+        />
+      ),
+    },
+    {
+      title: 'Last Modified',
+      dataIndex: 'lastModified',
+      key: 'lastModified',
+      sorter: (a: any, b: any) => new Date(a.lastModified).getTime() - new Date(b.lastModified).getTime(),
+      render: (text: any, metric: any) => (
+        <MetricListItem
+          key={metric.metricId}
+          metric={metric}
+          siteId={siteId}
+          renderColumn="lastModified"
+        />
+      ),
+    },
+    {
+      title: 'Options',
+      key: 'options',
+      render: (text: any, metric: any) => (
+        <MetricListItem
+          key={metric.metricId}
+          metric={metric}
+          siteId={siteId}
+          renderColumn="options"
+        />
+      ),
+    },
+  ];
+
+  const data = list.map((metric: any) => ({
+    ...metric,
+    key: metric.metricId,
+  }));
+
+  return (
+    <Table
+      columns={columns}
+      dataSource={data}
+      rowKey="metricId"
+      rowSelection={
+        !disableSelection
+          ? {
+              selectedRowKeys: selectedList.map((id: any) => id.toString()),
+              onChange: (selectedRowKeys) => {
+                selectedRowKeys.forEach((key) => {
+                  toggleSelection && toggleSelection(parseInt(key));
+                });
+              },
+            }
+          : undefined
+      }
+      pagination={false}
+    />
   );
-}
+};
 
 export default ListView;

frontend/app/components/Session/playerContext.ts

@@ -6,32 +6,29 @@ import {
   IWebPlayerStore,
   IWebLivePlayer,
   IWebLivePlayerStore,
-} from 'Player'
+} from 'Player';
 
 export interface IOSPlayerContext {
-  player: IIosPlayer
-  store: IIOSPlayerStore
+  player: IIosPlayer;
+  store: IIOSPlayerStore;
 }
 
 export interface IPlayerContext {
-  player: IWebPlayer
-  store: IWebPlayerStore,
+  player: IWebPlayer;
+  store: IWebPlayerStore;
 }
 
 export interface ILivePlayerContext {
-  player: IWebLivePlayer
-  store: IWebLivePlayerStore
+  player: IWebLivePlayer;
+  store: IWebLivePlayerStore;
 }
 
-type WebContextType =
-  | IPlayerContext
-  | ILivePlayerContext
+type WebContextType = IPlayerContext | ILivePlayerContext;
+type MobileContextType = IOSPlayerContext;
 
-type MobileContextType = IOSPlayerContext
-
-export const defaultContextValue = { player: undefined, store: undefined }
+export const defaultContextValue = { player: undefined, store: undefined };
 
 const ContextProvider = createContext<Partial<WebContextType | MobileContextType>>(defaultContextValue);
 
-export const PlayerContext = ContextProvider as Context<WebContextType>
-export const MobilePlayerContext = ContextProvider as Context<MobileContextType>
+export const PlayerContext = ContextProvider as Context<WebContextType>;
+export const MobilePlayerContext = ContextProvider as Context<MobileContextType>;

frontend/app/components/Session_/Player/Overlay/AutoplayTimer.module.css

@@ -1,3 +1,3 @@
 .overlayBg {
   background-color: rgba(255, 255, 255, 0.8);
-}
+}

frontend/app/components/shared/AutoplayToggle/AutoplayToggle.css

@@ -0,0 +1,30 @@
+.ant-switch.custom-switch .ant-switch-inner-unchecked .switch-icon {
+    position: absolute;
+    left: 5px;
+    top: 5px;
+    color: grey;
+  }
+
+  .ant-switch.custom-switch .ant-switch-inner-checked .switch-icon{
+    position: relative;
+    left: 20px;
+    color: blue;
+    top: .05rem;
+  }
+
+  .ant-switch.custom-switch[aria-checked="false"]  .ant-switch-inner-checked .switch-icon{
+    visibility: hidden;
+  }
+
+  .ant-switch.custom-switch[aria-checked="true"]  .ant-switch-inner-checked .switch-icon{
+    visibility: visible;
+  }
+
+  .ant-switch.custom-switch[aria-checked="true"] .ant-switch-inner-unchecked .switch-icon{
+    visibility: hidden;
+  }
+
+  .ant-switch.custom-switch[aria-checked="false"] .ant-switch-inner-unchecked .switch-icon{
+    visibility: visible;
+  }
+

frontend/app/components/shared/AutoplayToggle/AutoplayToggle.tsx

@@ -1,15 +1,35 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { PlayerContext } from 'App/components/Session/playerContext';
 import { observer } from 'mobx-react-lite';
-import { Switch } from 'antd'
+import { Switch, Tooltip, message } from 'antd';
+import { CaretRightOutlined, PauseOutlined } from '@ant-design/icons';
+import './AutoplayToggle.css';
 
-function AutoplayToggle() {
-  const { player, store } = React.useContext(PlayerContext)
-  const { autoplay } = store.get()
+const AutoplayToggle: React.FC = () => {
+  const { player, store } = useContext(PlayerContext);
+  const { autoplay } = store.get();
+
+  const handleToggle = () => {
+    player.toggleAutoplay();
+    if (!autoplay) {
+      message.success('Autoplay is ON');
+    } else {
+      message.info('Autoplay is OFF');
+    }
+  };
 
   return (
-      <Switch onChange={() => player.toggleAutoplay()} checked={autoplay} unCheckedChildren="Auto" checkedChildren="Auto" />
+    <Tooltip title="Toggle Autoplay" placement="bottom">
+      <Switch
+        className="custom-switch"
+        onChange={handleToggle}
+        checked={autoplay}
+        checkedChildren={<CaretRightOutlined className="switch-icon" />}
+        unCheckedChildren={<PauseOutlined className="switch-icon" />}
+      />
+    </Tooltip>
   );
-}
+};
+
 
 export default observer(AutoplayToggle);

frontend/app/styles/general.css

@@ -415,3 +415,4 @@ p {
 .dashboardDataPeriodSelector .dashboardMoreOptionsLabel{
   display: none;
 }
+