ws dropdown

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>
   );

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>

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;

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':