refactor: update WorkspaceInstruction to use function-based react

Author: DanielMicrosoft

src/web/src/views/workspace/WorkspaceInstruction.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { Typography, Box } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import WorkspaceSelector from "./WorkspaceSelector";
@@ -9,43 +9,41 @@ const MiddlePadding = styled(Box)(() => ({
   height: "6vh",
 }));
 
-class WorkspaceInstruction extends React.Component {
-  render() {
-    return (
-      <React.Fragment>
-        <AppAppBar pageName={"Workspace"} />
-        <PageLayout>
+const WorkspaceInstruction: React.FC = () => {
+  return (
+    <React.Fragment>
+      <AppAppBar pageName={"Workspace"} />
+      <PageLayout>
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            flexDirection: "column",
+            justifyContent: "center",
+          }}
+        >
+          <Box sx={{ flexGrow: 3 }} />
           <Box
             sx={{
+              flexGrow: 3,
+              flexShrink: 0,
               display: "flex",
               alignItems: "center",
-              flexDirection: "column",
               justifyContent: "center",
+              flexDirection: "column",
             }}
           >
-            <Box sx={{ flexGrow: 3 }} />
-            <Box
-              sx={{
-                flexGrow: 3,
-                flexShrink: 0,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                flexDirection: "column",
-              }}
-            >
-              <Typography variant="h3" gutterBottom>
-                Please select a Workspace
-              </Typography>
-              <MiddlePadding />
-              <WorkspaceSelector name="Open or create a workspace" />
-            </Box>
-            <Box sx={{ flexGrow: 5 }} />
+            <Typography variant="h3" gutterBottom>
+              Please select a Workspace
+            </Typography>
+            <MiddlePadding />
+            <WorkspaceSelector name="Open or create a workspace" />
           </Box>
-        </PageLayout>
-      </React.Fragment>
-    );
-  }
-}
+          <Box sx={{ flexGrow: 5 }} />
+        </Box>
+      </PageLayout>
+    </React.Fragment>
+  );
+};
 
 export default WorkspaceInstruction;