fix: Offline register option (#28467)

* Chore: bring back the register on cloud option to CS

* refactor: move top option buttons to avoid repeat code

---------

Co-authored-by: Gabriel Casals <83978645+casalsgh@users.noreply.github.com>

apps/meteor/client/views/admin/cloud/ManualWorkspaceRegistrationModal.tsx

@@ -10,7 +10,11 @@ const Steps = {
 	PASTE: 'paste',
 };
 
-function ManualWorkspaceRegistrationModal({ onClose, ...props }) {
+type ManualWorkspaceRegistrationModalProps = {
+	onClose: () => void;
+};
+
+const ManualWorkspaceRegistrationModal = ({ onClose, ...props }: ManualWorkspaceRegistrationModalProps) => {
 	const t = useTranslation();
 
 	const [step, setStep] = useState(Steps.COPY);
@@ -33,6 +37,6 @@ function ManualWorkspaceRegistrationModal({ onClose, ...props }) {
 				(step === Steps.PASTE && <PasteStep onBackButtonClick={handleBackButtonClick} onFinish={onClose} />)}
 		</Modal>
 	);
-}
+};
 
 export default ManualWorkspaceRegistrationModal;

apps/meteor/client/views/admin/cloud/RegisterWorkspace.tsx

@@ -6,6 +6,7 @@ import type { ReactNode } from 'react';
 import React from 'react';
 
 import Page from '../../../components/Page';
+import ManualWorkspaceRegistrationModal from './ManualWorkspaceRegistrationModal';
 import RegisterWorkspaceCards from './components/RegisterWorkspaceCards';
 import RegisterWorkspaceMenu from './components/RegisterWorkspaceMenu';
 import ConnectWorkspaceModal from './modals/ConnectWorkspaceModal';
@@ -35,6 +36,14 @@ const RegisterWorkspace = (): ReactNode => {
 		} else setModal(<RegisterWorkspaceModal onClose={handleModalClose} onStatusChange={reload} />);
 	};
 
+	const handleManualWorkspaceRegistrationButton = (): void => {
+		const handleModalClose = (): void => {
+			setModal(null);
+			reload();
+		};
+		setModal(<ManualWorkspaceRegistrationModal onClose={handleModalClose} />);
+	};
+
 	const handleRegistrationTag = () => {
 		if (!isWorkspaceRegistered && !isConnectedToCloud) {
 			return <Tag variant='secondary-danger'>{t('RegisterWorkspace_NotRegistered_Title')}</Tag>;
@@ -63,6 +72,7 @@ const RegisterWorkspace = (): ReactNode => {
 					isConnectedToCloud={isConnectedToCloud}
 					onClick={handleRegisterWorkspaceClick}
 					onStatusChange={reload}
+					onClickOfflineRegistration={handleManualWorkspaceRegistrationButton}
 				/>
 			</Page.Header>
 

apps/meteor/client/views/admin/cloud/components/RegisterWorkspaceMenu.tsx

@@ -9,10 +9,17 @@ type RegisterWorkspaceMenuProps = {
 	isWorkspaceRegistered: boolean | string;
 	isConnectedToCloud: boolean | string;
 	onClick: () => void;
+	onClickOfflineRegistration: () => void;
 	onStatusChange?: () => void;
 };
 
-const RegisterWorkspaceMenu = ({ isWorkspaceRegistered, isConnectedToCloud, onClick, onStatusChange }: RegisterWorkspaceMenuProps) => {
+const RegisterWorkspaceMenu = ({
+	isWorkspaceRegistered,
+	isConnectedToCloud,
+	onClick,
+	onClickOfflineRegistration,
+	onStatusChange,
+}: RegisterWorkspaceMenuProps) => {
 	const t = useTranslation();
 	const setModal = useSetModal();
 
@@ -21,6 +28,19 @@ const RegisterWorkspaceMenu = ({ isWorkspaceRegistered, isConnectedToCloud, onCl
 		setModal(<RegisteredWorkspaceModal onClose={handleModalClose} onStatusChange={onStatusChange} />);
 	};
 
+	const renderTopOptionButtons = () => {
+		const title = isWorkspaceRegistered ? t('ConnectWorkspace_Button') : t('RegisterWorkspace_Button');
+
+		return (
+			<ButtonGroup>
+				<Button onClick={onClickOfflineRegistration}>{t('Cloud_Register_manually')}</Button>
+				<Button primary onClick={onClick}>
+					{title}
+				</Button>
+			</ButtonGroup>
+		);
+	};
+
 	return (
 		<ButtonGroup>
 			{isWorkspaceRegistered && isConnectedToCloud && (
@@ -35,16 +55,8 @@ const RegisterWorkspaceMenu = ({ isWorkspaceRegistered, isConnectedToCloud, onCl
 					</Button>
 				</>
 			)}
-			{isWorkspaceRegistered && !isConnectedToCloud && (
-				<Button primary onClick={onClick}>
-					{t('ConnectWorkspace_Button')}
-				</Button>
-			)}
-			{!isWorkspaceRegistered && (
-				<Button primary onClick={onClick}>
-					{t('RegisterWorkspace_Button')}
-				</Button>
-			)}
+			{isWorkspaceRegistered && !isConnectedToCloud && renderTopOptionButtons()}
+			{!isWorkspaceRegistered && renderTopOptionButtons()}
 		</ButtonGroup>
 	);
 };

apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json

@@ -990,7 +990,7 @@
   "Cloud_Apply_license": "Apply license",
   "Cloud_connectivity": "Cloud Connectivity",
   "Cloud_address_to_send_registration_to": "The address to send your Cloud registration email to.",
-  "Cloud_click_here": "After copy the text, go to [cloud console (click here)](__cloudConsoleUrl__).",
+  "Cloud_click_here": "After copying the text, go to [cloud console (click here)](__cloudConsoleUrl__).",
   "Cloud_console": "Cloud Console",
   "Cloud_error_code": "Code:  __errorCode__",
   "Cloud_error_in_authenticating": "Error received while authenticating",