Upgrade docs from v2 to v3 (#215)

docs/docs/rad-lab-launcher/launcher_deployment/launcher.md

@@ -12,9 +12,9 @@ Below video provides a quick overview on how to setup RAD Lab Launcher and deplo
     width="980"
     height="480"
     src="https://www.youtube.com/embed/mHc914BkFkM"
-    frameborder="0"
+    frameBorder="0"
     allow="encrypted-media"
-    allowfullscreen
+    allowFullScreen
 >
 </iframe>
 

docs/docs/rad-lab-launcher/troubleshooting.md

@@ -22,13 +22,13 @@ sidebar_position: 4
 **Issue**: When running the `python3 radlab.py` installation from Cloud Shell, you receive the following error:
 
 ```
-Error: Error waiting to create Instance: Error waiting for Creating Instance: Error code 25, message: Constraint constraints/compute.vmExternalIpAccess violated for project <project_id>. Add instance projects/<project_id>/zones/us-east4-c/instances/notebooks-instance-0 to the constraint to use external IP with it.
+Error: Error waiting to create Instance: Error waiting for Creating Instance: Error code 25, message: Constraint constraints/compute.vmExternalIpAccess violated for project [project_id]. Add instance projects/[project_id]/zones/us-east4-c/instances/notebooks-instance-0 to the constraint to use external IP with it.
 .
 .
-Error Occurred - Deployment failed for ID: <deployment_id>
+Error Occurred - Deployment failed for ID:[deployment_id]
 ```
 
-**Solution**: If you see above error in your initial deployment run, rerun the deployment via ```python3 radlab.py``` using the <deployment_id> and select `Update` (in [Steps to Deploy RAD Lab Modules](../rad-lab-launcher/launcher_deployment/launcher.md#deploy-a-rad-lab-module)). This may have been caused as the Organization Policy ```constraints/compute.vmExternalIpAccess``` is not completely rolled out.
+**Solution**: If you see above error in your initial deployment run, rerun the deployment via ```python3 radlab.py``` using the [deployment_id] and select `Update` (in [Steps to Deploy RAD Lab Modules](../rad-lab-launcher/launcher_deployment/launcher.md#deploy-a-rad-lab-module)). This may have been caused as the Organization Policy ```constraints/compute.vmExternalIpAccess``` is not completely rolled out.
 
 **NOTE:** Similarly, if the error occurs for any other organization policies, then the workaround is same as above.  
 
@@ -62,7 +62,7 @@ with google_project_organization_policy.external_ip_policy[0],
 **Issue**: When running the `python3 radlab.py` installation from Cloud Shell, you receive the following error: 
 
 ```
- Error: Error setting billing account "<yourBillingID>" for project "projects/radlab-ds-analytics-<deployment_id>": 
+ Error: Error setting billing account "[yourBillingID]" for project "projects/radlab-ds-analytics-[deployment_id]": 
  googleapi: Error 400: Precondition check failed., 
  failedPrecondition
 
@@ -83,10 +83,10 @@ Please be sure you are logged in as a user with Google Cloud project Owner right
 │ 
 .
 .
-Error Occurred - Deployment failed for ID: <deployment_id>
+Error Occurred - Deployment failed for ID:[deployment_id]
 ```
 
-**Solution**: If you see above error, rerun the deployment via ```python3 radlab.py``` using the <deployment_id> and select `Delete` (in [Steps to Deploy RAD Lab Modules](../rad-lab-launcher/launcher_deployment/launcher.md#deploy-a-rad-lab-module)). This may have been caused if it took longer than expected to destroy any resource(s).
+**Solution**: If you see above error, rerun the deployment via ```python3 radlab.py``` using the [deployment_id] and select `Delete` (in [Steps to Deploy RAD Lab Modules](../rad-lab-launcher/launcher_deployment/launcher.md#deploy-a-rad-lab-module)). This may have been caused if it took longer than expected to destroy any resource(s).
 
 ## Operations Troubleshooting
 
@@ -99,7 +99,7 @@ File "radlab.py", line 134, in main
     os.mkdir(env_path)
 
 FileExistsError: [Errno 17] File exists:
- '/home/<radlabAdminUser>/radlab/deployments/data_science_<deployment_id_>'
+ '/home/[radlabAdminUser]/radlab/deployments/data_science_[deployment_id]'
 ```
 
 **Solution**:  You likely have a local copy of a Terraform `/deployments` folder with the same deploymentID in your Cloud Shell instance that needs to be removed. This can happen if you  perform multiple Actions on a single deployment from the same Cloud Shell instance. Even though you are looking to a shared Google Cloud bucket to get the current Terraform state, Terraform will still try to create a local copy of the deployment first.
@@ -113,7 +113,7 @@ cd ./deployments
 And removing the module folder with the conflicting deploymentID:
 
 ```bash
-rm -rfv /data_science_<deployment_id>/
+rm -rfv /data_science_[deployment_id]/
 ```
 
-**Note:** The above command will remove all files and sub-directories in the ```/data_science_<deployment_id>/``` directory before removing the ```/data_science_<deployment_id>/``` directory. The contents of this directory will sync from the Google Cloud state bucket next time you run the `python3 radlab.py` installation.
+**Note:** The above command will remove all files and sub-directories in the ```/data_science_[deployment_id]/``` directory before removing the ```/data_science_[deployment_id]/``` directory. The contents of this directory will sync from the Google Cloud state bucket next time you run the `python3 radlab.py` installation.

docs/docs/rad-lab-ui/ui_deployment/deploy-a-module.md

@@ -14,9 +14,9 @@ The video below provides a quick overview on how to setup RAD Lab UI variables a
     width="980"
     height="480"
     src="https://www.youtube.com/embed/8KNDAIb-Z2I"
-    frameborder="0"
+    frameBorder="0"
     allow="encrypted-media"
-    allowfullscreen
+    allowFullScreen
 >
 </iframe>
 

docs/docs/rad-lab-ui/ui_installation/frontend.mdx → docs/docs/rad-lab-ui/ui_installation/frontend.md

@@ -3,47 +3,6 @@ sidebar_position: 4
 title: 04 - Web Application
 ---
 
-import create from "zustand";
-const projectIdStore = create((set) => ({
-  projectId: "",
-  setProjectId: (projectId) => set({ projectId }),
-}));
-
-export const ProjectIdInput = () => {
-  const setProjectId = projectIdStore((state) => state.setProjectId);
-  return (
-    <div>
-      <label htmlFor="projectId" name="projectId">
-        RAD Lab UI Project ID
-      </label>
-      <input
-        id="projectId"
-        style={{
-          borderRadius: "0.25rem",
-          padding: "0.5rem",
-          fontSize: "1rem",
-          marginLeft: "1rem",
-          marginBottom: "1rem",
-        }}
-        type="text"
-        onChange={(e) => setProjectId(e.target.value)}
-      />
-    </div>
-  );
-};
-
-export const ProjectIdLink = ({ href, fallback, children }) => {
-  const projectId = projectIdStore((state) => state.projectId);
-  const interpolated =
-    projectId !== "" ? href.replace("${RLUI_PROJECT_ID}", projectId) : fallback;
-  return <a href={interpolated}>{children}</a>;
-};
-
-export const ProjectIdText = ({ success, fallback, children }) => {
-  const projectId = projectIdStore((state) => state.projectId);
-  return projectId ? success(projectId) : fallback;
-};
-
 The RAD Lab UI application is a Firebase application, which requires a number of manual steps to complete the installation.
 
 To retrieve the correct project ID, either open a web browser and go to the [Google Cloud console](https://console.cloud.google.com) or run the following command in the `radlab-ui/automation/terraform/infrastructure` folder:
@@ -56,8 +15,6 @@ echo "$(terraform show -json | jq -r .values.outputs.project_id.value)"
 Add your Project ID here to have the documentation be be customized to your Google Cloud project
 :::
 
-<ProjectIdInput />
-
 # Add Firebase
 
 :::warning
@@ -133,7 +90,7 @@ firebase deploy --only firestore:indexes
 
 ## Configure the Webapp
 
-For these next steps, open the <ProjectIdLink href="https://console.firebase.google.com/project/${RLUI_PROJECT_ID}/settings/general" fallback="https://console.firebase.google.com">Firebase Console</ProjectIdLink> and open the Project that corresponds to <ProjectIdText success={(pid) => <code>{pid}</code>} fallback={<code>$RLUI_PROJECT_ID</code>} />.
+For these next steps, open the <a href="https://console.firebase.google.com">Firebase Console</a> and open the Project that corresponds to your project ID.
 
 ### Authentication
 
@@ -143,15 +100,15 @@ For these next steps, open the <ProjectIdLink href="https://console.firebase.goo
 1. Click on **Enable** and provide a valid **Project support email**
 1. Click on **Save**
 
-As a final step, go Authentication > Settings and click on **Authorized domains**. Add the domain of the App Engine application: <ProjectIdText success={(pid) => <code>{pid}.uc.r.appspot.com</code>} fallback={<code>$RLUI_PROJECT_ID.uc.r.appspot.com</code>} />. You can also get this value by running the following command in the `radlab-ui/automation/terraform/infrastructure` folder:
+As a final step, go Authentication > Settings and click on **Authorized domains**. Add the domain of the App Engine application. You can get this value by running the following command in the `radlab-ui/automation/terraform/infrastructure` folder:
 
 ```shell
 echo "$(cd ../automation/terraform/infrastructure && terraform show -json | jq -r .values.outputs.app_engine_url.value)"
 ```
 
 ### Firebase app
 
-The final step is to add the configuration to your local directory. Navigate to <ProjectIdLink href="https://console.firebase.google.com/project/${RLUI_PROJECT_ID}/settings/general" fallback="https://console.firebase.google.com">Firebase Console</ProjectIdLink> and go to your Project settings:
+The final step is to add the configuration to your local directory. Navigate to <a href="https://console.firebase.google.com/project/${RLUI_PROJECT_ID}/settings/general" fallback="https://console.firebase.google.com">Firebase Console</a> and go to your Project settings:
 
 ![Project settings for your Firebase project](../../../static/img/settings.png)
 

docs/docusaurus.config.js

@@ -1,8 +1,8 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
-const lightCodeTheme = require("prism-react-renderer/themes/github");
-const darkCodeTheme = require("prism-react-renderer/themes/dracula");
+const lightCodeTheme = require("prism-react-renderer").github;
+const darkCodeTheme = require("prism-react-renderer").dracula;
 
 // TODO: Get official logo
 // TODO: Update Favicon