feat: Add view edit icon to views list in sidebar (#2901)

Author: mtrezza

src/components/CategoryList/CategoryList.react.js

@@ -11,6 +11,7 @@ import generatePath from 'lib/generatePath';
 import PropTypes from 'lib/PropTypes';
 import React from 'react';
 import { Link } from 'react-router-dom';
+import Icon from 'components/Icon/Icon.react';
 
 export default class CategoryList extends React.Component {
   static contextType = CurrentApp;
@@ -128,6 +129,17 @@ export default class CategoryList extends React.Component {
                   <span>{count}</span>
                   <span>{c.name}</span>
                 </Link>
+                {c.onEdit && (
+                  <a
+                    className={styles.edit}
+                    onClick={e => {
+                      e.preventDefault();
+                      c.onEdit();
+                    }}
+                  >
+                    <Icon name="edit-solid" width={14} height={14} />
+                  </a>
+                )}
                 {(c.filters || []).length !== 0 && (
                   <a
                     className={styles.expand}

src/components/CategoryList/CategoryList.scss

@@ -86,6 +86,20 @@
       flex-grow: 1
     }
   }
+  .edit {
+    display: flex;
+    align-items: center;
+    margin-right: 6px;
+    cursor: pointer;
+    svg {
+      fill: #8fb9cf;
+    }
+    &:hover {
+      svg {
+        fill: white;
+      }
+    }
+  }
 }
 
 .childLink {

src/dashboard/Data/Views/Views.react.js

@@ -401,10 +401,13 @@ class Views extends TableView {
   }
 
   renderSidebar() {
-    const categories = this.state.views.map(view => ({
+    const categories = this.state.views.map((view, index) => ({
       name: view.name,
       id: view.name,
       count: this.state.counts[view.name],
+      onEdit: () => {
+        this.setState({ editView: view, editIndex: index });
+      },
     }));
     const current = this.props.params.name || '';
     return (