Merge pull request #61 from immers-space/hubs-cloud-feb-2022

Pull in hubs-cloud feb 2022 update

.babelrc

@@ -36,4 +36,4 @@
     "@babel/proposal-object-rest-spread",
     "@babel/plugin-proposal-optional-chaining"
   ]
-}
+}

.defaults.env

@@ -8,7 +8,7 @@ SHORTLINK_DOMAIN="hub.link"
 RETICULUM_SERVER="dev.reticulum.io"
 
 # CORS proxy.
-CORS_PROXY_SERVER="cors-proxy-dev.reticulum.io"
+CORS_PROXY_SERVER="hubs-proxy.com"
 
 # The thumbnailing backend to connect to.
 # See here for the server code: https://github.com/MozillaReality/farspark or https://github.com/MozillaReality/nearspark

.eslintrc.js

@@ -9,7 +9,8 @@ module.exports = {
   globals: {
     THREE: true,
     AFRAME: true,
-    NAF: true
+    NAF: true,
+    APP: true
   },
   plugins: ["prettier", "react", "react-hooks", "@calm/react-intl"],
 

.github/ISSUE_TEMPLATE/bug_report.md

@@ -2,7 +2,7 @@
 name: Bug report
 about: Create a report to help us improve Hubs
 title: ''
-labels: bug, needs triage
+labels: bug, needs triage, jira-hubs
 assignees: ''
 
 ---

.github/ISSUE_TEMPLATE/feature_request.md

@@ -2,7 +2,7 @@
 name: Feature request
 about: Suggest an idea for Hubs!
 title: ''
-labels: enhancement
+labels: enhancement, jira-hubs
 assignees: ''
 
 ---

.storybook/main.js

@@ -60,6 +60,12 @@ module.exports = {
       ]
     });
 
+    config.module.rules.push({
+      test: /\.(glb|gltf)$/,
+      use: ["file-loader"],
+      include: path.resolve(__dirname, "../")
+    });
+
     return config;
   }
 };

CONTRIBUTING.md

@@ -65,7 +65,7 @@ We believe in the power of community (that's why we're building this, after all!
 
 ### ✅ Best Practices
 
-A guide for our frontend development best practices is availible [here](./doc/best-practices.md)
+A guide for general best practices can be found [here](./doc/best-practices.md) and for React UI specifically [here](./doc/ui-best-practices.md)
 
 ## Development Workflow
 

Jenkinsfile

@@ -34,6 +34,7 @@ pipeline {
           def disableDeploy = env.DISABLE_DEPLOY
           def showQAPromoteCommand = env.SHOW_QA_PROMOTE_COMMAND
           def qaBuildsSlackChannel = env.QA_BUILDS_SLACK_CHANNEL
+          def uploadsHost = env.UPLOADS_HOST
 
           def habCommand = (
             "/bin/bash scripts/hab-build-and-push.sh "
@@ -49,6 +50,7 @@ pipeline {
             + "\\\"${buildNumber}\\\" "
             + "\\\"${gitCommit}\\\" "
             + "\\\"${disableDeploy}\\\" "
+            + "\\\"${uploadsHost}\\\" "
           )
           runCommand(habCommand)
 

admin/src/react-components/featured-scene-listings.js

@@ -12,11 +12,19 @@ import {
   NumberInput,
   Datagrid,
   TextField,
-  ReferenceField
+  ReferenceField,
+  Filter
 } from "react-admin";
 
+const SceneFilter = props => (
+  <Filter {...props}>
+    <TextInput label="Search Name" source="name" alwaysOn />
+    <TextInput label="Search SID" source="scene_sid" alwaysOn />
+  </Filter>
+);
+
 export const FeaturedSceneListingList = props => (
-  <List {...props} sort={{ field: "order", order: "ASC" }}>
+  <List {...props} filters={<SceneFilter />} sort={{ field: "order", order: "ASC" }}>
     <Datagrid>
       <OwnedFileImage source="screenshot_owned_file_id" />
       <OwnedFileSizeField label="Model size" source="model_owned_file_id" />

admin/src/react-components/fields.js

@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { withStyles } from "@material-ui/core/styles";
 import LaunchIcon from "@material-ui/icons/Launch";
-import { getReticulumFetchUrl } from "hubs/src/utils/phoenix-utils";
+import { getReticulumFetchUrl, getUploadsUrl } from "hubs/src/utils/phoenix-utils";
 import { ReferenceField } from "react-admin";
 
 const styles = {
@@ -39,7 +39,7 @@ ConditionalReferenceField.propTypes = {
 };
 
 const OwnedFileImageInternal = withStyles(styles)(({ record = {}, aspect = "wide", classes }) => {
-  const src = getReticulumFetchUrl(`/files/${record.owned_file_uuid}`);
+  const src = getUploadsUrl(`/files/${record.owned_file_uuid}`);
   return <img src={src} className={classes[`ownedFileImageAspect_${aspect}`]} />;
 });
 
@@ -67,7 +67,7 @@ function OwnedFileDownloadFieldInternal({ fileName, record, source }) {
   return (
     <a
       download={fileName || true}
-      href={getReticulumFetchUrl(`/files/${record[source]}`)}
+      href={getUploadsUrl(`/files/${record[source]}`)}
       target="_blank"
       rel="noopener noreferrer"
     >

admin/src/react-components/pending-scenes.js

@@ -3,10 +3,17 @@ import { SceneLink, OwnedFileImage, OwnedFileSizeField, ConditionalReferenceFiel
 import { ApproveSceneButton } from "./approve-buttons";
 import { DenySceneButton } from "./deny-buttons";
 
-import { List, Datagrid, TextField, DateField } from "react-admin";
+import { List, TextInput, Datagrid, TextField, DateField, Filter } from "react-admin";
+
+const SceneFilter = props => (
+  <Filter {...props}>
+    <TextInput label="Search Name" source="name" alwaysOn />
+    <TextInput label="Search SID" source="scene_sid" alwaysOn />
+  </Filter>
+);
 
 export const PendingSceneList = props => (
-  <List {...props}>
+  <List {...props} filters={<SceneFilter />}>
     <Datagrid>
       <OwnedFileImage source="screenshot_owned_file_id" />
       <OwnedFileSizeField label="Model size" source="model_owned_file_id" />

admin/src/react-components/system-editor.js

@@ -20,6 +20,7 @@ import Info from "@material-ui/icons/Info";
 import { fetchReticulumAuthenticated } from "hubs/src/utils/phoenix-utils";
 import withCommonStyles from "../utils/with-common-styles";
 import { getAdminInfo, getEditableConfig } from "../utils/ita";
+import configs from "../utils/configs";
 
 // Send quota to use as heuristic for checking if in SES sandbox
 // https://forums.aws.amazon.com/thread.jspa?threadID=61090
@@ -334,6 +335,31 @@ class SystemEditorComponent extends Component {
             </ListItem>
           </List>
         </Card>
+        <Card className={this.props.classes.container}>
+          <Title title="Hubs Cloud" />
+          <CardContent className={this.props.classes.info}>
+            <Typography variant="title" gutterBottom>
+              Your hub version:
+            </Typography>
+            {configs.IS_LOCAL_OR_CUSTOM_CLIENT ? (
+              <>
+                <Typography variant="body1" gutterBottom>
+                  App client: Custom client
+                </Typography>
+                <Typography variant="body1" gutterBottom>
+                  {`(Undeploy custom client to run build ${process.env.BUILD_VERSION || "?"})`}
+                </Typography>
+                <Typography variant="body1" gutterBottom>
+                  {`(Remember to regularly pull in upstream changes from the "hubs-cloud" branch: https://github.com/mozilla/hubs)`}
+                </Typography>
+              </>
+            ) : (
+              <Typography variant="body1" gutterBottom>
+                {`App client: ${process.env.BUILD_VERSION || "?"}`}
+              </Typography>
+            )}
+          </CardContent>
+        </Card>
       </>
     );
   }

admin/src/utils/configs.js

@@ -6,4 +6,8 @@ const configs = {};
   configs[x] = el ? el.getAttribute("content") : process.env[x];
 });
 
+// Custom clients do not use <meta> tags for passing data, so if reticulum_server meta tag exists, it is not a custom client
+const hasReticulumServerMetaTag = !!document.querySelector("meta[name='env:reticulum_server']");
+configs.IS_LOCAL_OR_CUSTOM_CLIENT = !hasReticulumServerMetaTag;
+
 export default configs;

admin/webpack.config.js

@@ -224,7 +224,8 @@ module.exports = (env, argv) => {
           ITA_SERVER: process.env.ITA_SERVER,
           RETICULUM_SERVER: process.env.RETICULUM_SERVER,
           CORS_PROXY_SERVER: process.env.CORS_PROXY_SERVER,
-          POSTGREST_SERVER: process.env.POSTGREST_SERVER
+          POSTGREST_SERVER: process.env.POSTGREST_SERVER,
+          UPLOADS_HOST: process.env.UPLOADS_HOST
         })
       })
     ]