Merge pull request #662 from rowyio/rc

v2.4.0

Author: shamsmosowi

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "Rowy",
-  "version": "2.3.2",
+  "name": "rowy",
+  "version": "2.4.0",
   "homepage": "https://rowy.io",
   "repository": {
     "type": "git",
@@ -15,10 +15,10 @@
     "@hookform/resolvers": "^2.8.5",
     "@mdi/js": "^6.5.95",
     "@monaco-editor/react": "^4.3.1",
-    "@mui/icons-material": "^5.4.1",
-    "@mui/lab": "^5.0.0-alpha.68",
-    "@mui/material": "^5.4.1",
-    "@mui/styles": "^5.4.1",
+    "@mui/icons-material": "^5.4.4",
+    "@mui/lab": "^5.0.0-alpha.71",
+    "@mui/material": "^5.4.4",
+    "@mui/styles": "^5.4.4",
     "@rowy/form-builder": "^0.5.3",
     "@rowy/multiselect": "^0.2.3",
     "@tinymce/tinymce-react": "^3.12.6",
@@ -43,6 +43,7 @@
     "notistack": "^2.0.2",
     "pb-util": "^1.0.1",
     "query-string": "^6.8.3",
+    "quicktype-core": "^6.0.70",
     "react": "^17.0.2",
     "react-beautiful-dnd": "^13.0.0",
     "react-color-palette": "^6.1.0",

src/App.tsx

@@ -12,6 +12,7 @@ import ErrorBoundary from "@src/components/ErrorBoundary";
 import Loading from "@src/components/Loading";
 import Navigation from "@src/components/Navigation";
 import Logo from "@src/assets/Logo";
+import RowyRunModal from "@src/components/RowyRunModal";
 
 import SwrProvider from "@src/contexts/SwrContext";
 import ConfirmationProvider from "@src/components/ConfirmationDialog/Provider";
@@ -24,7 +25,6 @@ import routes from "@src/constants/routes";
 import AuthPage from "@src/pages/Auth";
 import SignOutPage from "@src/pages/Auth/SignOut";
 import SignUpPage from "@src/pages/Auth/SignUp";
-import DeployPage from "@src/pages/Deploy";
 import TestPage from "@src/pages/Test";
 import RowyRunTestPage from "@src/pages/RowyRunTest";
 import PageNotFound from "@src/pages/PageNotFound";
@@ -65,6 +65,7 @@ export default function App() {
                 <ConfirmationProvider>
                   <SnackLogProvider>
                     <CustomBrowserRouter>
+                      <RowyRunModal />
                       <Suspense fallback={<Loading fullScreen />}>
                         <Switch>
                           <Route
@@ -97,11 +98,6 @@ export default function App() {
                             path={routes.setup}
                             render={() => <SetupPage />}
                           />
-                          <Route
-                            exact
-                            path={routes.deploy}
-                            render={() => <DeployPage />}
-                          />
 
                           <Route
                             exact

src/assets/LogoRowyRun.tsx

@@ -0,0 +1,44 @@
+import { SVGProps } from "react";
+import { useTheme } from "@mui/material";
+
+export interface ILogoRowyRunProps extends SVGProps<SVGSVGElement> {
+  size?: number;
+}
+
+export default function LogoRowyRun({
+  size = 1.5,
+  ...props
+}: ILogoRowyRunProps) {
+  const theme = useTheme();
+
+  return (
+    <svg
+      width={Math.round(108 * size)}
+      height={Math.round(26 * size)}
+      viewBox="0 0 108 26"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-labelledby="rowy-run-logo-title"
+      role="img"
+      {...props}
+    >
+      <title id="rowy-run-logo-title">Rowy Run</title>
+
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M32 7.75a6.25 6.25 0 1 1 0 12.5 6.25 6.25 0 0 1 0-12.5Zm0 2a4.25 4.25 0 1 0 0 8.5 4.25 4.25 0 0 0 0-8.5ZM20 20V8h6v2h-4v10h-2Zm24 0 3-9 3 9h2l4-12 5 11.5-2 4.5h2l7-16h-2l-4 9-4-9h-4l-3 9-3-9h-2l-3 9-3-9h-2l4 12h2Z"
+        fill={theme.palette.text.primary}
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M0 8v10a3 3 0 1 0 6 0v-7h7a3 3 0 1 0 0-6H8a2.997 2.997 0 0 0-2.5 1.341A3 3 0 0 0 0 8Zm10-2H8a2 2 0 0 0-1.995 1.85L6 8v2h4V6Zm-5 4V8a2 2 0 0 0-1.85-1.995L3 6a2 2 0 0 0-1.995 1.85L1 8v2h4Zm0 1H1v4h4v-4Zm-4 5v2a2 2 0 0 0 1.85 1.994L3 20a2 2 0 0 0 1.995-1.85L5 18v-2H1ZM11.001 6H13l.15.005A2 2 0 0 1 15 8l-.005.15A2 2 0 0 1 13 10h-1.999V6Z"
+        fill={theme.palette.primary.main}
+      />
+      <path
+        d="M73.25 20h1.825v-8.375c.775-1.475 2.125-2.35 3.2-2.35.425 0 .925.075 1.35.225V7.775c-.275-.1-.725-.175-1.225-.175-1.25 0-2.65.85-3.325 2.175V7.85H73.25V20Zm17.65 0h1.85V7.85h-1.824L90.9 16.3c-.75 1.35-2.25 2.175-3.875 2.175-2.125 0-3.55-1.525-3.55-3.875V7.85H81.65v7c0 3.275 2 5.4 5 5.4 1.775 0 3.45-.825 4.25-2.175V20Zm7.007-12.15h-1.825V20h1.825v-8.475c.75-1.325 2.275-2.15 3.875-2.15 2.125 0 3.55 1.525 3.55 3.875V20h1.825v-7c0-3.275-2-5.4-5-5.4-1.775 0-3.45.825-4.25 2.15v-1.9Z"
+        fill={theme.palette.primary.main}
+      />
+    </svg>
+  );
+}

src/assets/logo-sticker.svg

@@ -0,0 +1,10 @@
+import { atom, useAtom } from "jotai";
+
+export const rowyRunModalAtom = atom({ open: false, feature: "", version: "" });
+
+export const useRowyRunModal = () => {
+  const [, setOpen] = useAtom(rowyRunModalAtom);
+
+  return (feature: string = "", version: string = "") =>
+    setOpen({ open: true, feature, version });
+};

src/atoms/RowyRunModal.ts

@@ -1,5 +1,9 @@
-import { Stack, Typography, Grid, Tooltip, Button } from "@mui/material";
-import InlineOpenInNewIcon from "@src/components/InlineOpenInNewIcon";
+import { Stack, Typography, Grid, Tooltip, IconButton } from "@mui/material";
+import SecretsIcon from "@mui/icons-material/VpnKeyOutlined";
+import FunctionsIcon from "@mui/icons-material/CloudOutlined";
+import DocsIcon from "@mui/icons-material/DescriptionOutlined";
+
+import { useAppContext } from "@src/contexts/AppContext";
 
 export interface ICodeEditorHelperProps {
   docLink: string;
@@ -13,6 +17,7 @@ export default function CodeEditorHelper({
   docLink,
   additionalVariables,
 }: ICodeEditorHelperProps) {
+  const { projectId } = useAppContext();
   const availableVariables = [
     {
       key: "row",
@@ -35,23 +40,29 @@ export default function CodeEditorHelper({
       description: `firebase Storage can be accessed through this, storage.bucket() returns default storage bucket of the firebase project.`,
     },
     {
-      key: "utilFns",
-      description: `utilFns provides a set of functions that are commonly used, such as easy access to GCP Secret Manager`,
+      key: "rowy",
+      description: `rowy provides a set of functions that are commonly used, such as easy access to GCP Secret Manager`,
     },
   ];
 
   return (
     <Stack
       direction="row"
-      alignItems="baseline"
+      alignItems="flex-start"
+      justifyItems="space-between"
+      spacing={1}
       justifyContent="space-between"
       sx={{ my: 1 }}
     >
-      <Typography variant="body2" color="textSecondary" sx={{ mr: 0.5 }}>
+      <Typography variant="body2" color="textSecondary">
         Available:
       </Typography>
 
-      <Grid container spacing={1}>
+      <Grid
+        container
+        spacing={1}
+        style={{ flexGrow: 1, marginTop: -8, marginLeft: 0 }}
+      >
         {availableVariables.concat(additionalVariables ?? []).map((v) => (
           <Grid item key={v.key}>
             <Tooltip title={v.description}>
@@ -61,17 +72,48 @@ export default function CodeEditorHelper({
         ))}
       </Grid>
 
-      <Button
-        size="small"
-        color="primary"
-        target="_blank"
-        rel="noopener noreferrer"
-        href={docLink}
-        style={{ flexShrink: 0 }}
+      <Stack
+        direction="row"
+        alignItems="center"
+        spacing={1}
+        style={{ marginTop: -4 }}
       >
-        Examples & docs
-        <InlineOpenInNewIcon />
-      </Button>
+        <Tooltip title="Secret Manager&nbsp;↗">
+          <IconButton
+            size="small"
+            color="primary"
+            target="_blank"
+            rel="noopener noreferrer"
+            href={`https://console.cloud.google.com/security/secret-manager?project=${projectId}`}
+          >
+            <SecretsIcon fontSize="small" />
+          </IconButton>
+        </Tooltip>
+
+        <Tooltip title="Configure Cloud Function&nbsp;↗">
+          <IconButton
+            size="small"
+            color="primary"
+            target="_blank"
+            rel="noopener noreferrer"
+            href={`https://console.cloud.google.com/functions/list?project=${projectId}`}
+          >
+            <FunctionsIcon fontSize="small" />
+          </IconButton>
+        </Tooltip>
+
+        <Tooltip title="Examples & documentation&nbsp;↗">
+          <IconButton
+            size="small"
+            color="primary"
+            target="_blank"
+            rel="noopener noreferrer"
+            href={docLink}
+          >
+            <DocsIcon fontSize="small" />
+          </IconButton>
+        </Tooltip>
+      </Stack>
     </Stack>
   );
 }

src/components/CodeEditor/CodeEditorHelper.tsx

@@ -24,7 +24,7 @@ type ExtensionContext = {
     requiredFields: string[];
     extensionBody: any;
   };
-  utilFns: any;
+  RULES_UTILS: any;
 };
 
 // extension body definition