feat ui: add options to metric list (#2101)

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

@@ -1,10 +1,14 @@
 import React, { useEffect, useState } from 'react';
-import { Icon, Checkbox, Tooltip } from 'UI';
+import { Icon, Checkbox, Tooltip, confirm, Modal } from 'UI';
+import { Dropdown, Button, Input } from 'antd';
 import { checkForRecent } from 'App/date';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 import { withSiteId } from 'App/routes';
 import { TYPES } from 'App/constants/card';
 import cn from 'classnames';
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
+import { toast } from 'react-toastify';
 
 interface Props extends RouteComponentProps {
   metric: any;
@@ -39,6 +43,9 @@ function MetricListItem(props: Props) {
     toggleSelection = () => {},
     disableSelection = false,
   } = props;
+  const { metricStore } = useStore();
+  const [isEdit, setIsEdit] = useState(false);
+  const [newName, setNewName] = useState(metric.name);
 
   const onItemClick = (e: React.MouseEvent) => {
     if (!disableSelection) {
@@ -48,39 +55,113 @@ function MetricListItem(props: Props) {
     history.push(path);
   };
 
-  return (
-    <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}
-          />
-        )}
+  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');
+      }
+    }
+    if (key === 'rename') {
+      setIsEdit(true);
+    }
+  }
+  const onRename = async () => {
+    try {
+      metric.updateKey('name', newName);
+      await metricStore.save(metric);
+      void metricStore.fetchList()
+      setIsEdit(false)
+    } catch (e) {
+      console.log(e)
+      toast.error('Failed to rename card');
+    }}
 
-        <div className="flex items-center">
-          <MetricTypeIcon type={metric.metricType} />
-          <div className={cn('capitalize-first', { link: disableSelection })}>{metric.name}</div>
+  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>
-      <div className="col-span-4">{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 text-right">
-        {metric.lastModified && checkForRecent(metric.lastModified, 'LLL dd, yyyy, hh:mm a')}
-      </div>
-    </div>
+    </>
   );
 }
 
-export default withRouter(MetricListItem);
+export default withRouter(observer(MetricListItem));

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

@@ -31,9 +31,10 @@ function ListView(props: Props) {
           <span>Title</span>
         </div>
 
-        <div className="col-span-4">Owner</div>
+        <div className="col-span-2">Owner</div>
         <div className="col-span-2">Visibility</div>
-        <div className="col-span-2 text-right">Last Modified</div>
+        <div className="col-span-2">Last Modified</div>
+        <div className={'col-span-2 text-right'}>Options</div>
       </div>
       {list.map((metric: any) => (
         <MetricListItem