From a2ea0b00319da1381aef38dbcfa1bc84a2618a06 Mon Sep 17 00:00:00 2001
From: Rudra <rudra21ultra@gmail.com>
Date: Wed, 16 Oct 2024 17:51:15 +0530
Subject: [PATCH] ws dropdown

---
 .../OrganizationManager/CustomSelect.jsx      | 24 ++---------
 .../_components/OrganizationManager/List.jsx  | 41 +++++++++++--------
 frontend/src/_ui/Icon/solidIcons/NewTab.jsx   | 21 ++++++++++
 frontend/src/_ui/Icon/solidIcons/index.js     |  3 ++
 4 files changed, 53 insertions(+), 36 deletions(-)
 create mode 100644 frontend/src/_ui/Icon/solidIcons/NewTab.jsx

diff --git a/frontend/src/_components/OrganizationManager/CustomSelect.jsx b/frontend/src/_components/OrganizationManager/CustomSelect.jsx
index e070d1e97c..52930f08c7 100644
--- a/frontend/src/_components/OrganizationManager/CustomSelect.jsx
+++ b/frontend/src/_components/OrganizationManager/CustomSelect.jsx
@@ -26,14 +26,13 @@ const Menu = (props) => {
               <div className="col-10">Workspaces ({props.options.length})</div>
               {admin && (
                 <ToolTip message={'Add new workspace'} position="top">
-                  <div className="col-1 tj-secondary-btn org-edit-icon" onClick={props.selectProps.setShowCreateOrg}>
-                    {/* <SolidIcon name="editrectangle" width="14" fill="#3E63DD" /> */}
+                  <div className="col-1" style={{ paddingRight: '24px' }} onClick={props.selectProps.setShowCreateOrg}>
                     <SolidIcon
                       name="plus"
-                      fill="#3E63DD"
-                      className="add-new-workspace-icon"
+                      fill="var(--icon-strong)"
+                      className=""
                       dataCy="add-new-workspace-link"
-                      width="18"
+                      width="14"
                     />
                   </div>
                 </ToolTip>
@@ -43,21 +42,6 @@ const Menu = (props) => {
         </>
 
         <div className={`${darkMode && 'dark-theme'}`}>{props.children}</div>
-
-        <div
-          className="cursor-pointer d-flex align-items-center add-workspace-button"
-          style={{ padding: '4px 12px', color: '#3E63DD' }}
-          onClick={props.selectProps.setShowCreateOrg}
-        >
-          <div className="add-new-workspace-icon-old-wrap">
-            <SolidIcon name="plus" fill="#FDFDFE" className="add-new-workspace-icon-old" />
-          </div>
-
-          <div className="add-new-workspace-icon-wrap">
-            <SolidIcon name="plus" fill="#3E63DD" className="add-new-workspace-icon" dataCy="add-new-workspace-link" />
-          </div>
-          <span className="p-1 tj-text-xsm">{t('header.organization.addNewWorkSpace', 'Add new workspace')}</span>
-        </div>
       </div>
     </components.Menu>
   );
diff --git a/frontend/src/_components/OrganizationManager/List.jsx b/frontend/src/_components/OrganizationManager/List.jsx
index 25e3a52d85..f8e3799e5e 100644
--- a/frontend/src/_components/OrganizationManager/List.jsx
+++ b/frontend/src/_components/OrganizationManager/List.jsx
@@ -14,7 +14,7 @@ import { EditOrganization } from './EditOrganization';
   otherwise this component will intiate everytime we switch between pages
 */
 export const OrganizationList = function () {
-  const { current_organization_id } = authenticationService.currentSessionValue;
+  const { current_organization_id, admin } = authenticationService.currentSessionValue;
   const { fetchOrganizations, organizationList, isGettingOrganizations } = useCurrentSessionStore(
     (state) => ({
       organizationList: state.organizations,
@@ -34,8 +34,7 @@ export const OrganizationList = function () {
     const organization = organizationList.find((org) => org.id === id);
     if (![id, organization.slug].includes(getWorkspaceIdOrSlugFromURL())) {
       const newPath = appendWorkspaceId(organization.slug || id, location.pathname, true);
-      window.history.replaceState(null, null, newPath);
-      window.location.reload();
+      window.open(newPath, '_blank');
     }
   };
 
@@ -48,7 +47,7 @@ export const OrganizationList = function () {
         <div className={`align-items-center d-flex tj-org-dropdown  ${darkMode && 'dark-theme'}`}>
           {org.id === current_organization_id ? (
             <div className="current-org-avatar">
-              <SolidIcon name="tick" fill="#3E63DD" dataCy="add-new-workspace-link" width="21" />
+              <SolidIcon name="tick" fill="#3E63DD" dataCy="add-new-workspace-link" width="16" />
             </div>
           ) : (
             <div
@@ -66,18 +65,28 @@ export const OrganizationList = function () {
               </span>
             </div>
           </ToolTip>
-          {org.id === current_organization_id ? (
-            <div className="current-org-indicator" data-cy="current-org-indicator" onClick={() => setShowEditOrg(true)}>
-              <SolidIcon name="editable" fill="#3E63DD" dataCy="add-new-workspace-link" width="14" />
-            </div>
+          {org.id === current_organization_id && admin ? (
+            <ToolTip message="Edit" placement="right">
+              <div
+                className="current-org-indicator"
+                data-cy="current-org-indicator"
+                onClick={() => setShowEditOrg(true)}
+              >
+                <SolidIcon name="editable" fill="#3E63DD" dataCy="add-new-workspace-link" width="16" />
+              </div>
+            </ToolTip>
           ) : (
-            <div
-              className="current-org-indicator"
-              data-cy="current-org-indicator"
-              onClick={() => console.log('Dummy onClick')}
-            >
-              <SolidIcon name="arrowtransfer" fill="#3E63DD" width="14" className="add-new-workspace-icon" />
-            </div>
+            org.id !== current_organization_id && (
+              <ToolTip message="Open in new tab" placement="right">
+                <div
+                  className="current-org-indicator"
+                  data-cy="current-org-indicator"
+                  onClick={() => switchOrganization(org.id)}
+                >
+                  <SolidIcon name="newtab" fill="#3E63DD" width="16" className="add-new-workspace-icon" />
+                </div>
+              </ToolTip>
+            )
           )}
         </div>
       ),
@@ -94,7 +103,7 @@ export const OrganizationList = function () {
         isLoading={isGettingOrganizations}
         options={options}
         value={current_organization_id}
-        onChange={(id) => switchOrganization(id)}
+        // onChange={(id) => switchOrganization(id)}
         className={`tj-org-select  ${darkMode && 'dark-theme'}`}
       />
     </div>
diff --git a/frontend/src/_ui/Icon/solidIcons/NewTab.jsx b/frontend/src/_ui/Icon/solidIcons/NewTab.jsx
new file mode 100644
index 0000000000..f4e3e7bb92
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/NewTab.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+const NewTab = ({ fill = '#6A727C', width = '25', className = '', viewBox = '0 0 25 25' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox="0 0 17 17"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M13.8139 1.86633C14.6029 1.86633 15.2425 2.50593 15.2425 3.2949V10.914C15.2425 11.7029 14.6029 12.3425 13.8139 12.3425H6.19489C5.40591 12.3425 4.76632 11.7029 4.76632 10.914V3.2949C4.76632 2.50593 5.40591 1.86633 6.19489 1.86633H13.8139ZM11.4883 8.4777L10.5648 7.5542L8.60473 9.51427C8.32579 9.79321 7.87352 9.79321 7.59458 9.51427C7.31564 9.23532 7.31564 8.78306 7.59458 8.50411L9.55465 6.54405L8.63116 5.62056C8.46092 5.45032 8.41 5.1943 8.50212 4.97188C8.59426 4.74946 8.8113 4.60443 9.05206 4.60443H11.9092C12.2379 4.60443 12.5044 4.87092 12.5044 5.19967V8.05681C12.5044 8.29756 12.3594 8.51461 12.137 8.60674C11.9145 8.69887 11.6585 8.64794 11.4883 8.4777ZM3.33775 5.91395C3.33775 5.51947 3.01795 5.19967 2.62347 5.19967C2.22898 5.19967 1.90918 5.51947 1.90918 5.91395V13.0568C1.90918 14.2402 2.86857 15.1997 4.05204 15.1997H11.1949C11.5894 15.1997 11.9092 14.8799 11.9092 14.4854C11.9092 14.0909 11.5894 13.7711 11.1949 13.7711H4.05204C3.65755 13.7711 3.33775 13.4513 3.33775 13.0568V5.91395Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default NewTab;
diff --git a/frontend/src/_ui/Icon/solidIcons/index.js b/frontend/src/_ui/Icon/solidIcons/index.js
index 7e6874ca09..4971327a21 100644
--- a/frontend/src/_ui/Icon/solidIcons/index.js
+++ b/frontend/src/_ui/Icon/solidIcons/index.js
@@ -123,6 +123,7 @@ import AddRectangle from './AddRectangle.jsx';
 import Lock from './Lock.jsx';
 import Mail from './Mail.jsx';
 import Logs from './Logs.jsx';
+import NewTab from './NewTab.jsx';
 import Marketplace from './Marketplace.jsx';
 import Minimize from './Minimize.jsx';
 import Maximize from './Maximize.jsx';
@@ -354,6 +355,8 @@ const Icon = (props) => {
       return <NotificationSilent {...props} />;
     case 'notificationunread':
       return <NotificationUnread {...props} />;
+    case 'newtab':
+      return <NewTab {...props} />;
     case 'options':
       return <Options {...props} />;
     case 'open':