Merge pull request #36 from eliataylor/eli

default project config and click to copy from docs

.env.public

@@ -0,0 +1,39 @@
+# The name of your project. The cloned directory will be derived from this name
+PROJECT_NAME=OAexample
+
+# By default this is the stack folder in this repo, but you can point it elsewhere
+STACK_PATH=.
+
+# Your Worksheet's "Object Fields" sheet (required to customize, but not to run the default stack)
+TYPES_PATH=src/examples/object-fields-demo.csv
+
+# Your Worksheet's "Permissions Matrix" sheet (optional)
+PERMISSIONS_PATH=src/examples/permissions-matrix-demo.csv
+
+# 'AllowAll', 'IsAuthenticated', 'IsAuthenticatedOrReadOnly'
+DEFAULT_PERMS=IsAuthenticatedOrReadOnly
+
+#### Your API Server protocol:host:port ####
+REACT_APP_API_HOST=https://localapi.oaexample.com:8080
+# REACT_APP_API_HOST=http://localhost:8080
+# REACT_APP_API_HOST=https://api.oaexample.com
+
+#### Your Webapp URL protocol:host:port ####
+REACT_APP_APP_HOST=https://localhost.oaexample.com:3000
+# REACT_APP_APP_HOST=http://localhost:3000
+# REACT_APP_APP_HOST=https://oaexample.com
+
+# Your API admin login
+[email protected]
+
+# Your API admin password
+REACT_APP_LOGIN_PASS=APasswordYouShouldChange
+
+# the location of mysql server: docker | local | gcp
+OA_ENV_DB=gcp
+
+# how are emails sent: django | gmail | sendgrid
+OA_ENV_EMAIL=gmail
+
+# where to store static files: gcp | local
+OA_ENV_STORAGE=gcp

stack/reactjs/deploy/README.md

@@ -16,7 +16,7 @@ bash ../django/deploy/create-service-account.sh .env.gcp
 # then update your .env.gcp with GCP_SA_KEY_PATH=[output path]
 
 # setup DNS, routing, ssl, load balancer, (front + backend)
-sh deploy/create-bucket-lb-webapp.sh ../django/.env.gcp
+bash deploy/create-bucket-lb-webapp.sh ../django/.env.gcp
 
 # deploy to cloud ru
 bash deploy/upload-app.sh ../django/.env.gcp

stack/reactjs/src/object-actions/docs/Customize.tsx

@@ -6,9 +6,7 @@ import EnvBuilder from '../forming/EnvBuilder';
 import SpreadsheetCards from './SpreadsheetCards';
 
 const Customize: React.FC = () => {
-  const { envConfig, setConfigItem } = useEnvContext();
 
-  const method = envConfig.REACT_APP_APP_HOST;
   return (
     <Box>
       <StyledTypography variant="h1"> Customize </StyledTypography>
@@ -18,20 +16,28 @@ const Customize: React.FC = () => {
 
       <StyledPaper>
         <Typography variant="h6">
-          Copy and customize your spreadsheets:
+          1. Copy and customize your spreadsheets:
         </Typography>
         <FormHelperText>
           You do not to need to finish them before continuing. You can rebuild
-          you stack as you refine your idea.
+          you stack at any time as you refine your idea.
         </FormHelperText>
 
         <SpreadsheetCards />
       </StyledPaper>
 
       <StyledPaper>
         <Typography variant="h6" >
-          Set the CSV paths in your .env below:
+          2. Set the CSV paths in your .env below:
         </Typography>
+        <Command
+          command="cp .env.public .env"
+          help={
+            <span>
+              Copy the default config file and adjust your own settings using the form below
+            </span>
+          }
+        />
         <FormHelperText sx={{ mb: 3 }}>
           The permissions matrix is optional. The server's default permission is
           `Is Authenticated or Read only`
@@ -42,7 +48,7 @@ const Customize: React.FC = () => {
       <StyledPaper>
         <Typography variant="h6">3. Run the load script:</Typography>
         <Command
-          command="./load-sheets.sh --env .env.myproject"
+          command="bash load-sheets.sh --env .env"
           help={
             <span>
               Reference your <code>.env</code> file for setup.

stack/reactjs/src/object-actions/docs/Extend.tsx

@@ -51,7 +51,7 @@ const Extend: React.FC = () => {
       </StyledPaper>
 
       <StyledPaper>
-        <Command command="./clone.sh --env .env.myproject" />
+        <Command command="bash clone.sh --env .env.myproject" />
       </StyledPaper>
 
       {envConfig.STACK_PATH != '.' && (

stack/reactjs/src/object-actions/forming/EnvBuilder.tsx

@@ -2,6 +2,8 @@ import React, { useState } from "react";
 import { Box, Collapse, Grid, MenuItem, TextField } from "@mui/material";
 import { EnvConfig, useEnvContext } from "./EnvProvider";
 import { TightButton } from "../../theme/StyledFields";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import CopyToClipboard from "../../components/CopyToClipboard";
 
 interface EnvEditorProps {
   displayProperties?: (keyof EnvConfig)[];
@@ -150,6 +152,32 @@ const EnvEditor: React.FC<EnvEditorProps> = ({ displayProperties = [] }) => {
       !displayProperties.includes(field.key as keyof EnvConfig)
   );
 
+  function makeEnvFile() {
+    return fields
+      .map((field) => {
+        const key = field.key as keyof EnvConfig;
+        const value = envConfig[key] || "";
+        const comments: string[] = [];
+
+        // Add the help text as a comment
+        if (field.helperText) {
+          comments.push(`# ${field.helperText}`);
+        }
+
+        // Add the options as comments (if applicable)
+        if (field.select && field.options) {
+          const optionsComment = field.options
+            .map((option) => `${option.value}`)
+            .join(", ");
+          comments.push(`# Possible values: ${optionsComment}`);
+        }
+
+        // Combine comments and the key-value pair
+        return `${comments.join("\n")}\n${key}=${value}`;
+      })
+      .join("\n\n");
+  }
+
   return (
     <Grid container justifyContent={"space-between"} spacing={2}>
       {visibleFields.map((field) =>
@@ -172,13 +200,25 @@ const EnvEditor: React.FC<EnvEditorProps> = ({ displayProperties = [] }) => {
 
       {advancedFields.length > 0 && (
         <Grid item xs={12}>
+
+          <CopyToClipboard textToCopy={makeEnvFile()}>
+            <TightButton
+              size={"small"}
+              variant="outlined"
+              startIcon={<ContentCopyIcon color={"warning"} />}
+            >
+              {"Copy .env config"}
+            </TightButton>
+          </CopyToClipboard>
+
           <TightButton
             size={"small"}
             onClick={() => setShowAdvanced(!showAdvanced)}
             variant="outlined"
           >
             {showAdvanced ? "Hide Advanced Options" : "Show Advanced Options"}
           </TightButton>
+
           <Collapse in={showAdvanced}>
             <Box mt={2}>
               <Grid container spacing={2}>