From 762d0fad539508547a525d6da5d1e1847fdcf60a Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Wed, 10 Aug 2022 14:23:51 +0200
Subject: [PATCH] change(ui) - site dropdown form

---
 .../NewProjectButton/NewProjectButton.tsx     |  31 ++--
 .../app/components/Header/SiteDropdown.js     | 156 +++++++++---------
 2 files changed, 96 insertions(+), 91 deletions(-)

diff --git a/frontend/app/components/Header/NewProjectButton/NewProjectButton.tsx b/frontend/app/components/Header/NewProjectButton/NewProjectButton.tsx
index 695139fa3..9c438c50f 100644
--- a/frontend/app/components/Header/NewProjectButton/NewProjectButton.tsx
+++ b/frontend/app/components/Header/NewProjectButton/NewProjectButton.tsx
@@ -3,26 +3,35 @@ import { Icon } from 'UI';
 import cn from 'classnames';
 import { useStore } from 'App/mstore';
 import { useObserver } from 'mobx-react-lite';
-
-function NewProjectButton({ onClick, isAdmin = false }: any) {
+import { useModal } from 'App/components/Modal';
+import NewSiteForm from 'App/components/Client/Sites/NewSiteForm';
+import { init } from 'Duck/site';
+import { connect } from 'react-redux';
+interface Props {
+    isAdmin?: boolean;
+    init?: (data: any) => void;
+}
+function NewProjectButton(props: Props) {
+    const { isAdmin = false } = props;
     const { userStore } = useStore();
     const limtis = useObserver(() => userStore.limits);
     const canAddProject = useObserver(() => isAdmin && (limtis.projects === -1 || limtis.projects > 0));
+    const { showModal, hideModal } = useModal();
+
+    const onClick = () => {
+        props.init({});
+        showModal(<NewSiteForm onClose={hideModal} />, { right: true });
+    };
 
     return (
         <div
-            className={cn('flex items-center justify-center py-3 cursor-pointer hover:bg-active-blue ', { 'disabled' : !canAddProject })}
+            className={cn('flex items-center justify-center py-3 cursor-pointer hover:bg-active-blue ', { disabled: !canAddProject })}
             onClick={onClick}
-          >
-            <Icon 
-              name="plus"
-              size={12}
-              className="mr-2"
-              color="teal"
-            /> 
+        >
+            <Icon name="plus" size={12} className="mr-2" color="teal" />
             <span className="color-teal">Add New Project</span>
         </div>
     );
 }
 
-export default NewProjectButton;
\ No newline at end of file
+export default connect(null, { init })(NewProjectButton);
diff --git a/frontend/app/components/Header/SiteDropdown.js b/frontend/app/components/Header/SiteDropdown.js
index 228190111..87fe2a0c2 100644
--- a/frontend/app/components/Header/SiteDropdown.js
+++ b/frontend/app/components/Header/SiteDropdown.js
@@ -2,104 +2,100 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { setSiteId } from 'Duck/site';
 import { withRouter } from 'react-router-dom';
-import { hasSiteId, siteChangeAvaliable, isRoute } from 'App/routes';
+import { hasSiteId, siteChangeAvaliable } from 'App/routes';
 import { STATUS_COLOR_MAP, GREEN } from 'Types/site';
-import { Icon, SlideModal } from 'UI';
-import { pushNewSite } from 'Duck/user'
+import { Icon } from 'UI';
+import { pushNewSite } from 'Duck/user';
 import { init } from 'Duck/site';
 import styles from './siteDropdown.module.css';
 import cn from 'classnames';
-import NewSiteForm from '../Client/Sites/NewSiteForm';
 import { clearSearch } from 'Duck/search';
 import { clearSearch as clearSearchLive } from 'Duck/liveSearch';
 import { fetchList as fetchIntegrationVariables } from 'Duck/customField';
-import { withStore } from 'App/mstore'
+import { withStore } from 'App/mstore';
 import AnimatedSVG, { ICONS } from '../shared/AnimatedSVG/AnimatedSVG';
 import NewProjectButton from './NewProjectButton';
 
 @withStore
 @withRouter
-@connect(state => ({  
-  sites: state.getIn([ 'site', 'list' ]),
-  siteId: state.getIn([ 'site', 'siteId' ]),
-  account: state.getIn([ 'user', 'account' ]),
-}), {
-  setSiteId,
-  pushNewSite,
-  init,
-  clearSearch,
-  clearSearchLive,
-  fetchIntegrationVariables,
-})
+@connect(
+    (state) => ({
+        sites: state.getIn(['site', 'list']),
+        siteId: state.getIn(['site', 'siteId']),
+        account: state.getIn(['user', 'account']),
+    }),
+    {
+        setSiteId,
+        pushNewSite,
+        init,
+        clearSearch,
+        clearSearchLive,
+        fetchIntegrationVariables,
+    }
+)
 export default class SiteDropdown extends React.PureComponent {
-  state = { showProductModal: false }
+    state = { showProductModal: false };
 
-  closeModal = (e, newSite) => {
-    this.setState({ showProductModal: false })    
-  };
+    closeModal = (e, newSite) => {
+        this.setState({ showProductModal: false });
+    };
 
-  newSite = () => {
-    this.props.init({})
-    this.setState({showProductModal: true})
-  }
+    newSite = () => {
+        this.props.init({});
+        this.setState({ showProductModal: true });
+    };
 
-  switchSite = (siteId) => {
-    const { mstore, location } = this.props
+    switchSite = (siteId) => {
+        const { mstore, location } = this.props;
 
-    this.props.setSiteId(siteId);
-    this.props.fetchIntegrationVariables();
-    this.props.clearSearch(location.pathname.includes('/sessions'));
-    this.props.clearSearchLive();
+        this.props.setSiteId(siteId);
+        this.props.fetchIntegrationVariables();
+        this.props.clearSearch(location.pathname.includes('/sessions'));
+        this.props.clearSearchLive();
 
-    mstore.initClient();
-  }
+        mstore.initClient();
+    };
 
-  render() {
-    const { sites, siteId, account, location: { pathname } } = this.props;
-    const { showProductModal } = this.state;
-    const isAdmin = account.admin || account.superAdmin;
-    const activeSite = sites.find(s => s.id == siteId);
-    const disabled = !siteChangeAvaliable(pathname);
-    const showCurrent = hasSiteId(pathname) || siteChangeAvaliable(pathname);
-    // const canAddSites = isAdmin && account.limits.projects && account.limits.projects.remaining !== 0;
+    render() {
+        const {
+            sites,
+            siteId,
+            account,
+            location: { pathname },
+        } = this.props;
+        const { showProductModal } = this.state;
+        const isAdmin = account.admin || account.superAdmin;
+        const activeSite = sites.find((s) => s.id == siteId);
+        const disabled = !siteChangeAvaliable(pathname);
+        const showCurrent = hasSiteId(pathname) || siteChangeAvaliable(pathname);
+        // const canAddSites = isAdmin && account.limits.projects && account.limits.projects.remaining !== 0;
 
-    return (
-      <div className={ styles.wrapper }>
-        {
-          showCurrent ?
-            (activeSite && activeSite.status === GREEN) ? <AnimatedSVG name={ICONS.SIGNAL_GREEN} size="10" /> : <AnimatedSVG name={ICONS.SIGNAL_RED} size="10" /> :
-            <Icon name="window-alt" size="14" marginRight="10" />
-        }
-        <div className={ cn(styles.currentSite, 'ml-2')}>{ showCurrent && activeSite ? activeSite.host : 'All Projects' }</div>
-        <Icon className={ styles.drodownIcon } color="gray-light" name="chevron-down" size="16" />
-        <div className={styles.menu}>
-          <ul data-can-disable={ disabled }>
-            { !showCurrent && <li>{ 'Does not require domain selection.' }</li>}
-            {
-              sites.map(site => (
-                <li key={ site.id } onClick={() => this.switchSite(site.id)}>
-                  <Icon 
-                    name="circle"
-                    size="8"
-                    marginRight="10" 
-                    color={ STATUS_COLOR_MAP[ site.status ] } 
-                  /> 
-                  { site.host }
-                </li>
-              ))
-            }
-          </ul>
-          <NewProjectButton onClick={this.newSite} isAdmin={isAdmin} />
-        </div>
-
-        <SlideModal
-          title="New Project"
-          size="small"
-          isDisplayed={ showProductModal }
-          content={ showProductModal && <NewSiteForm onClose={ this.closeModal } /> }
-          onClose={ this.closeModal }          
-        />
-      </div>
-    );
-  }
+        return (
+            <div className={styles.wrapper}>
+                {showCurrent ? (
+                    activeSite && activeSite.status === GREEN ? (
+                        <AnimatedSVG name={ICONS.SIGNAL_GREEN} size="10" />
+                    ) : (
+                        <AnimatedSVG name={ICONS.SIGNAL_RED} size="10" />
+                    )
+                ) : (
+                    <Icon name="window-alt" size="14" marginRight="10" />
+                )}
+                <div className={cn(styles.currentSite, 'ml-2')}>{showCurrent && activeSite ? activeSite.host : 'All Projects'}</div>
+                <Icon className={styles.drodownIcon} color="gray-light" name="chevron-down" size="16" />
+                <div className={styles.menu}>
+                    <ul data-can-disable={disabled}>
+                        {!showCurrent && <li>{'Does not require domain selection.'}</li>}
+                        {sites.map((site) => (
+                            <li key={site.id} onClick={() => this.switchSite(site.id)}>
+                                <Icon name="circle" size="8" marginRight="10" color={STATUS_COLOR_MAP[site.status]} />
+                                {site.host}
+                            </li>
+                        ))}
+                    </ul>
+                    <NewProjectButton onClick={this.newSite} isAdmin={isAdmin} />
+                </div>
+            </div>
+        );
+    }
 }