update airgap registration steps and instructions (#2463)

portal-ui/src/screens/Console/Support/Register.tsx

@@ -64,6 +64,8 @@ import Tab from "@mui/material/Tab";
 import { TabPanel } from "../../shared/tabs";
 import { ClusterRegistered, FormTitle, ProxyConfiguration } from "./utils";
 import ApiKeyRegister from "./ApiKeyRegister";
+import CopyToClipboard from "react-copy-to-clipboard";
+import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
 interface IRegister {
   classes: any;
 }
@@ -620,6 +622,7 @@ const Register = ({ classes }: IRegister) => {
     </Fragment>
   );
 
+  const offlineRegUrl = `https://subnet.min.io/cluster/register?token=${subnetRegToken}`;
   const offlineRegistration = (
     <Fragment>
       <Box
@@ -683,119 +686,53 @@ const Register = ({ classes }: IRegister) => {
           >
             <Box>
               <Box className="step-row">
-                <div className="step-number">1</div>{" "}
                 <div className="step-text">
-                  Copy the following registration token
+                  Click on the link to register this cluster in SUBNET
                 </div>
               </Box>
 
               <Box
                 sx={{
                   flex: "1",
-                  marginTop: "15px",
-                  marginLeft: "35px",
-                  "& input": {
-                    color: "#737373",
-                  },
-                }}
-              >
-                <InputBoxWrapper
-                  id="registration-token"
-                  name="registration-token"
-                  placeholder=""
-                  label=""
-                  type="text"
-                  onChange={() => {}}
-                  value={subnetRegToken}
-                  overlayIcon={<CopyIcon />}
-                  extraInputProps={{
-                    readOnly: true,
-                  }}
-                  overlayAction={() =>
-                    navigator.clipboard.writeText(subnetRegToken)
-                  }
-                />
-              </Box>
-            </Box>
-
-            <Box>
-              <Box className="step-row">
-                <div className="step-number">2</div>
-                <div className="step-text">
-                  Navigate to SUBNET and register your cluster
-                </div>
-              </Box>
-
-              <Box
-                sx={{
-                  flex: "1",
-                  marginLeft: "35px",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 3,
                 }}
               >
                 <Link
                   className={classes.link}
                   color="inherit"
-                  href="https://subnet.min.io/cluster/register"
+                  href={offlineRegUrl}
                   target="_blank"
                 >
                   https://subnet.min.io/cluster/register
                 </Link>
-              </Box>
-            </Box>
 
-            <Box
-              sx={{
-                fontSize: "16px",
-                display: "flex",
-                flexFlow: "column",
-                marginTop: "15px",
-                marginBottom: "15px",
-              }}
-            >
-              <Box className="step-row">
-                <div className="step-number">3</div>{" "}
-                <div className="step-text">
-                  Enter the API key generated by SUBNET
-                </div>
+                <TooltipWrapper tooltip={"Copy to Clipboard"}>
+                  <CopyToClipboard text={offlineRegUrl}>
+                    <Button
+                      type={"button"}
+                      id={"copy-ult-to-clip-board"}
+                      icon={<CopyIcon />}
+                      color={"primary"}
+                      variant={"regular"}
+                    />
+                  </CopyToClipboard>
+                </TooltipWrapper>
               </Box>
 
-              <Box
-                sx={{
-                  flex: "1",
-                  marginTop: "15px",
-                  marginLeft: "35px",
+              <div
+                style={{
+                  marginTop: "25px",
+                  fontSize: "14px",
+                  fontStyle: "italic",
+                  color: "#5E5E5E",
                 }}
               >
-                <InputBoxWrapper
-                  value={license}
-                  onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-                    setLicense(event.target.value)
-                  }
-                  id="api-key"
-                  name="api-key"
-                  placeholder=""
-                  label=""
-                  type="text"
-                />
-              </Box>
-            </Box>
-
-            <Box
-              sx={{
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "flex-end",
-                marginTop: "15px",
-              }}
-            >
-              <Button
-                id={"register-subnet"}
-                variant="callAction"
-                color="primary"
-                onClick={() => subnetLogin()}
-                disabled={loading || license.trim().length === 0}
-                label={"Register"}
-              />
+                If this machine does not have internet connection, Copy paste
+                the following URL in a browser where you access SUBNET and
+                follow the instructions to complete the registration
+              </div>
             </Box>
           </Box>
           <RegisterHelpBox />