feat(ui): move create metric button to the grid

frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx

@@ -3,6 +3,8 @@ import WidgetWrapper from '../WidgetWrapper';
 import { useObserver } from 'mobx-react-lite';
 import cn from 'classnames';
 import { useStore } from 'App/mstore';
+import stl from 'App/components/Dashboard/components/WidgetWrapper/widgetWrapper.css';
+import ownStl from './dashboardMetricSelection.css';
 
 function WidgetCategoryItem({ category, isSelected, onClick, selectedWidgetIds }) {
     const selectedCategoryWidgetsCount = useObserver(() => {
@@ -24,7 +26,12 @@ function WidgetCategoryItem({ category, isSelected, onClick, selectedWidgetIds }
     );
 }
 
-function DashboardMetricSelection(props) {
+interface IProps {
+    handleCreateNew?: () => void;
+    isDashboardExists?: boolean;
+}
+
+function DashboardMetricSelection(props: IProps) {
     const { dashboardStore } = useStore();
     let widgetCategories: any[] = useObserver(() => dashboardStore.widgetCategories);
     const [activeCategory, setActiveCategory] = React.useState<any>();
@@ -67,8 +74,7 @@ function DashboardMetricSelection(props) {
                                 <span className="text-2xl color-gray-medium ml-2">{activeCategory.widgets.length}</span>
                             </div>
 
-                            <div className="ml-auto flex items-center">
-                                <span className="color-gray-medium">Past 7 days data</span>
+                            <div className="ml-auto">
                                 <label className="flex items-center ml-3 cursor-pointer select-none">
                                     <input type="checkbox" onChange={toggleAllWidgets} checked={selectAllCheck} />
                                     <div className="ml-2">Select All</div>
@@ -107,6 +113,22 @@ function DashboardMetricSelection(props) {
                                 onClick={() => dashboardStore.toggleWidgetSelection(widget)}
                             />
                         ))}
+                        {props.isDashboardExists && activeCategory?.name === 'custom' && (
+                             <div
+                                className={
+                                    cn(
+                                        "relative rounded border col-span-1 flex items-center justify-center",
+                                        stl.hoverableWidget,
+                                        stl.hoverBlue,
+                                        ownStl.addNew,
+                                    )
+                                }
+                                style={{ height: '100%', textAlign: 'center' }}
+                                onClick={props.handleCreateNew}
+                            >
+                                Create Metric
+                            </div>
+                        )}
                     </div>
                 </div>
             </div>

frontend/app/components/Dashboard/components/DashboardMetricSelection/dashboardMetricSelection.css

@@ -0,0 +1,11 @@
+.addNew {
+    text-align: center;
+    color: $teal;
+    cursor: pointer;
+    background-color: white;
+
+    &:hover {
+        background-color: $active-blue;
+        transition: all 0.2s;
+    }
+}

frontend/app/components/Dashboard/components/DashboardModal/DashboardModal.tsx

@@ -12,6 +12,7 @@ interface Props {
     history: any
     siteId?: string
     dashboardId?: string
+    onMetricAdd?: () => void;
 }
 function DashboardModal(props) {
     const { history, siteId, dashboardId } = props;
@@ -34,6 +35,7 @@ function DashboardModal(props) {
 
     const handleCreateNew = () => {
         const path = withSiteId(dashboardMetricCreate(dashboardId), siteId);
+        props.onMetricAdd();
         history.push(path);
         hideModal();
     }
@@ -52,7 +54,7 @@ function DashboardModal(props) {
                         </h1>
                     </div>
                     <div>
-                        {isDashboardExists && <Button outline size="small" onClick={handleCreateNew}>Create New</Button>}
+                        <span className="text-xl">Past 7 days data</span>
                     </div>
                 </div>
                 { !isDashboardExists && (
@@ -61,7 +63,7 @@ function DashboardModal(props) {
                         <p>Create new dashboard by choosing from the range of predefined metrics that you care about. You can always add your custom metrics later.</p>
                     </>
                 )}
-                <DashboardMetricSelection isDashboardExists={isDashboardExists} />
+                <DashboardMetricSelection handleCreateNew={handleCreateNew} isDashboardExists={isDashboardExists} />
 
                 <div className="flex items-center absolute bottom-0 left-0 right-0 bg-white border-t p-3">
                     <Button

frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx

@@ -6,7 +6,7 @@ import { withSiteId } from 'App/routes';
 import withModal from 'App/components/Modal/withModal';
 import DashboardWidgetGrid from '../DashboardWidgetGrid';
 import { confirm } from 'UI/Confirmation';
-import { withRouter } from 'react-router-dom';
+import { withRouter, RouteComponentProps } from 'react-router-dom';
 import { useModal } from 'App/components/Modal';
 import DashboardModal from '../DashboardModal';
 import DashboardEditModal from '../DashboardEditModal';
@@ -18,36 +18,52 @@ import DashboardOptions from '../DashboardOptions';
 
 interface Props {
     siteId: number;
-    history: any
-    match: any
     dashboardId: any
     renderReport?: any
 }
-function DashboardView(props: Props) {
+function DashboardView(props: RouteComponentProps<Props>) {
     const { siteId, dashboardId } = props;
     const { dashboardStore } = useStore();
+    const [focusTitle, setFocusedInput] = React.useState(true);
+    const [showEditModal, setShowEditModal] = React.useState(false);
     const { showModal } = useModal();
+
     const showAlertModal = dashboardStore.showAlertModal;
     const loading = dashboardStore.fetchingDashboard;
     const dashboards = dashboardStore.dashboards;
     const dashboard: any = dashboardStore.selectedDashboard;
     const period = dashboardStore.period;
-    const [showEditModal, setShowEditModal] = React.useState(false);
-    const [focusTitle, setFocusedInput] = React.useState(true);
+
+    const queryParams = new URLSearchParams(props.location.search)
 
     useEffect(() => {
         if (!dashboard || !dashboard.dashboardId) return;
         dashboardStore.fetch(dashboard.dashboardId)
     }, [dashboard]);
 
+    const trimQuery = () => {
+        if (!queryParams.has('modal')) return;
+        queryParams.delete('modal')
+        props.history.replace({
+            search: queryParams.toString(),
+        })
+    }
+    const pushQuery = () => {
+        if (!queryParams.has('modal')) props.history.push('?modal=addMetric')
+    }
+
     useEffect(() => {
-        if (dashboardId) return;
-        dashboardStore.selectDefaultDashboard();
+        if (!dashboardId) dashboardStore.selectDefaultDashboard();
+        console.log(dashboardId)
+        if (queryParams.has('modal')) {
+            onAddWidgets();
+            trimQuery();
+        }
     }, []);
 
     const onAddWidgets = () => {
         dashboardStore.initDashboard(dashboard)
-        showModal(<DashboardModal siteId={siteId} dashboardId={dashboardId} />, { right: true })
+        showModal(<DashboardModal siteId={siteId} onMetricAdd={pushQuery} dashboardId={dashboardId} />, { right: true })
     }
 
     const onEdit = (isTitle) => {

frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx

@@ -31,11 +31,7 @@ function WidgetView(props: Props) {
     }, [])
 
     const onBackHandler = () => {
-        if (dashboardId) {
-            props.history.push(withSiteId(`/dashboard/${dashboardId}`, siteId));
-        } else {
-            props.history.push(withSiteId(`/metrics`, siteId));
-        }
+        props.history.goBack();
     }
 
     const openEdit = () => {