Various frontend/backend updates

big213 · Nov 9, 2023 · 5ff2719 · 5ff2719
1 parent bcd79b4
commit 5ff2719
Show file tree

Hide file tree

Showing 30 changed files with 731 additions and 652 deletions.
diff --git a/.github/workflows/backend-deploy.yml b/.github/workflows/backend-deploy.yml
@@ -19,6 +19,13 @@ jobs:
       - name: Install Dependencies
         working-directory: ./backend/functions
         run: npm install
+      - name: Set Commit SHA
+        uses: w9jds/firebase-action@master
+        with:
+          args: functions:config:set base.version="${{ github.sha }}"
+        env:
+          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
+          PROJECT_PATH: ./backend/functions
       - name: Deploy to Firebase
         uses: w9jds/firebase-action@master
         with:

diff --git a/backend/cors.json b/backend/cors.json
@@ -1,6 +1,6 @@
 [
   {
-    "origin": ["https://boilerplate.giraffeql.com"],
+    "origin": ["https://boilerplate.giraffeql.com", "http://localhost:3000"],
     "responseHeader": ["Content-Type"],
     "method": ["GET"],
     "maxAgeSeconds": 3600

diff --git a/backend/deploy.md.example b/backend/deploy.md.example
@@ -16,7 +16,7 @@ firebase functions:config:set base.origins="https://example.com" base.timeout_se
 
 # set serveImage config
 
-firebase functions:config:set serve_image.bucket="x.appspot.com" serve_image.source_path="source" serve_image.cache_path="cache" serve_image.temp_path="temp"
+firebase functions:config:set serve_image.bucket="x.appspot.com" serve_image.source_path="source" serve_image.cache_path="cache" serve_image.temp_path="temp" serve_image.cdn_url="https://cdn.giraffeql.com"
 
 # set stripe config
 

diff --git a/backend/env.json.example b/backend/env.json.example
@@ -21,14 +21,16 @@
     "bucket": "giraffeql-boilerplate.appspot.com",
     "source_path": "source",
     "cache_path": "cache",
-    "temp_path": "temp"
+    "temp_path": "temp",
+    "cdn_url": "https://cdn.ozycon.com"
   },
   "stripe": {
     "secret_key": "",
     "site_url": "https://ozycon.com"
   },
   "base": {
     "origins": "https://boilerplate.giraffeql.com",
-    "timeout_seconds": "60"
+    "timeout_seconds": "60",
+    "version": "DEV"
   }
 }
diff --git a/backend/functions/package-lock.json b/backend/functions/package-lock.json
diff --git a/backend/functions/package.json b/backend/functions/package.json
@@ -9,6 +9,7 @@
     "generate:migration": "set DEV=1 && ts-node src/scripts/generateMigration.ts",
     "generate:model": "set DEV=1 && ts-node src/scripts/generateModel.ts",
     "grantDBPermissions": "set DEV=1 && ts-node src/scripts/grantSchemaPermissions.ts",
+    "executeAdminScript": "set DEV=1 && ts-node src/scripts/executeAdminScript.ts",
     "grantAdmin": "set DEV=1 && ts-node src/scripts/grantAdmin.ts",
     "shell": "npm run build && firebase functions:shell",
     "start": "npm run shell",
@@ -23,7 +24,7 @@
     "axios": "^0.21.4",
     "express": "^4.17.1",
     "firebase-admin": "^11.10.1",
-    "firebase-functions": "^4.4.1",
+    "firebase-functions": "^4.5.0",
     "giraffeql": "^2.0.13",
     "image-resizing": "^0.1.3",
     "knex": "^0.21.21",

diff --git a/backend/functions/src/config/index.ts b/backend/functions/src/config/index.ts
@@ -2,13 +2,27 @@ import * as functions from "firebase-functions";
 
 export const isDev = !!(process.env.FUNCTIONS_EMULATOR ?? process.env.DEV);
 
+export const projectPath = process.env.PROJECT_PATH;
+
 export const env = isDev ? require("../../../env.json") : functions.config();
 
 // defaults to 60 seconds
 export const functionTimeoutSeconds = env.base?.timeout_seconds
   ? Number(env.base.timeout_seconds)
   : 60;
 
+export const allowedOrigins = ["http://localhost:3000"];
+
+// add any additional origins
+if (env.base?.origins) {
+  allowedOrigins.push(
+    ...env.base.origins
+      .split(",")
+      .map((origin) => origin.trim())
+      .filter((origin) => origin)
+  );
+}
+
 export const giraffeqlOptions = {
   debug: !!isDev,
   lookupValue: true,

diff --git a/backend/functions/src/index.ts b/backend/functions/src/index.ts
@@ -5,7 +5,12 @@ admin.initializeApp();
 
 import { initializeGiraffeql, sendErrorResponse } from "giraffeql";
 import "./schema";
-import { env, functionTimeoutSeconds, giraffeqlOptions } from "./config";
+import {
+  allowedOrigins,
+  env,
+  functionTimeoutSeconds,
+  giraffeqlOptions,
+} from "./config";
 
 import { validateToken, validateApiKey } from "./helpers/auth";
 import { CustomSchemaGenerator } from "./helpers/schema";
@@ -14,17 +19,6 @@ const app = express();
 
 // app.use(express.json()); -- apparently not needed on cloud functions
 
-const allowedOrigins = ["http://localhost:3000"];
-// add any additional origins
-if (env.base?.origins) {
-  allowedOrigins.push(
-    ...env.base.origins
-      .split(",")
-      .map((origin) => origin.trim())
-      .filter((origin) => origin)
-  );
-}
-
 // extract the user ID from all requests.
 app.use(async function (req, res, next) {
   try {
@@ -50,11 +44,18 @@ app.use(async function (req, res, next) {
       "Origin, X-Requested-With, Content-Type, Accept, Authorization, Cache-Control"
     );
 
+    res.header("Access-Control-Expose-Headers", "X-Api-Version");
+
     res.header(
       "Access-Control-Allow-Methods",
       "PUT, POST, GET, DELETE, OPTIONS"
     );
 
+    // if env.base.version is set, send that as a header
+    if (env.base?.version) {
+      res.header("x-api-version", env.base.version);
+    }
+
     const apiKey = req.get("x-api-key");
 
     if (apiKey) {

diff --git a/backend/functions/src/schema/core/helpers/resolver.ts b/backend/functions/src/schema/core/helpers/resolver.ts
@@ -430,7 +430,8 @@ function retrieveAllRequiredFields(
       throw new Error(`Misconfigured giraffeql`);
     }
 
-    if (resolverNode.typeDef.requiredSqlFields) {
+    // only add the requiredSqlFields if it's not a dataloaded field
+    if (resolverNode.typeDef.requiredSqlFields && !isDataloader) {
       resolverNode.typeDef.requiredSqlFields
         .map((requiredField) =>
           fieldPath.length
@@ -443,8 +444,8 @@ function retrieveAllRequiredFields(
     }
     resolverNode.typeDef.sqlOptions?.joinType;
 
-    // if nested, traverse the tree
-    if (resolverNode.nested) {
+    // if nested and not dataloader, traverse the tree
+    if (resolverNode.nested && !isDataloader) {
       retrieveAllRequiredFields(
         resolverNode.nested,
         !!resolverNode.typeDef.sqlOptions,

diff --git a/backend/functions/src/schema/models/file/typeDef.ts b/backend/functions/src/schema/models/file/typeDef.ts
@@ -34,6 +34,14 @@ export default new GiraffeqlObjectType(
         allowNull: false,
         typeDefOptions: { addable: false, updateable: false },
       }),
+      servingUrl: {
+        type: Scalars.url,
+        allowNull: false,
+        requiredSqlFields: ["location"],
+        resolver: ({ parentValue }) => {
+          return `${env.serve_image.cdn_url}/${parentValue.location}`;
+        },
+      },
       downloadUrl: {
         type: Scalars.url,
         allowNull: false,

diff --git a/backend/functions/src/scripts/executeAdminScript.ts b/backend/functions/src/scripts/executeAdminScript.ts
@@ -0,0 +1,8 @@
+import "../schema";
+// import { Admin } from "../schema/services";
+
+console.log("start");
+
+(async () => {
+  console.log("done");
+})();
diff --git a/frontend/components/common/versionCheckText.vue b/frontend/components/common/versionCheckText.vue
@@ -1,8 +1,10 @@
 <template>
-  <div>
-    <a @click="copyIdTokenToClipboard()"
-      ><span class="hidden-xs-only">Build </span>{{ buildVersion }}</a
-    >
+  <span :title="currentVersion">
+    <a @click="copyIdTokenToClipboard()">
+      <slot name="text">
+        <span class="hidden-xs-only">Build </span>{{ buildVersion }}
+      </slot>
+    </a>
     <v-icon
       v-if="hasNewerVersion && showNewerVersionIcon"
       title="A newer version of this site is available. Click to reload."
@@ -34,7 +36,7 @@
         </v-btn>
       </template>
     </v-snackbar>
-  </div>
+  </span>
 </template>
 
 <script>

diff --git a/frontend/components/dialog/editRecordDialog.vue b/frontend/components/dialog/editRecordDialog.vue
@@ -22,8 +22,8 @@
     >
       <template v-slot:toolbar>
         <v-toolbar flat color="accent">
-          <v-icon left>{{ icon }}</v-icon>
-          <v-toolbar-title>
+          <v-icon left v-if="!hideTitleMode">{{ icon }}</v-icon>
+          <v-toolbar-title v-if="!hideTitleMode">
             <span class="headline">{{ title }}</span>
           </v-toolbar-title>
           <v-spacer></v-spacer>
@@ -190,6 +190,10 @@ export default {
       return !!this.recordInfo.dialogOptions?.hideRefresh
     },
 
+    hideTitleMode() {
+      return !!this.recordInfo.dialogOptions?.hideTitle
+    },
+
     modeObject() {
       return this.specialMode ?? modesMap[this.computedMode]
     },
@@ -202,7 +206,7 @@ export default {
     },
 
     title() {
-      return this.modeObject.prefix + ' ' + this.recordInfo.name
+      return `${this.modeObject.prefix} ${this.recordInfo.name}`
     },
     icon() {
       return this.modeObject.icon

diff --git a/frontend/components/dialog/selectOptionDialog.vue b/frontend/components/dialog/selectOptionDialog.vue
@@ -34,13 +34,11 @@
 </template>
 
 <script>
-import CircularLoader from '~/components/common/circularLoader.vue'
 import PreviewRecordChip from '~/components/chip/previewRecordChip.vue'
 import { getIcon } from '~/services/base'
 
 export default {
   components: {
-    CircularLoader,
     PreviewRecordChip,
   },
 

diff --git a/frontend/components/input/genericInput.vue b/frontend/components/input/genericInput.vue
@@ -252,8 +252,7 @@
       v-else-if="item.inputType === 'textarea'"
       v-model="item.value"
       filled
-      auto-grow
-      rows="1"
+      rows="3"
       dense
       class="py-0"
       :label="item.label + (item.optional ? ' (optional)' : '')"

diff --git a/frontend/components/interface/crud/crudRecordInterface.vue b/frontend/components/interface/crud/crudRecordInterface.vue
@@ -51,7 +51,11 @@
           </v-btn>
         </v-toolbar>
       </v-container>
-      <v-container v-if="breadcrumbItems.length" fluid class="px-0">
+      <v-container
+        v-if="breadcrumbMode && !hideBreadcrumbs && breadcrumbItems.length"
+        fluid
+        class="px-0"
+      >
         <v-row>
           <v-breadcrumbs :items="breadcrumbItems">
             <template v-slot:item="{ item }">
@@ -68,7 +72,12 @@
         </v-row>
       </v-container>
 
-      <v-toolbar flat color="accent" dense>
+      <v-toolbar
+        v-if="!recordInfo.paginationOptions.hideToolbar"
+        flat
+        color="accent"
+        dense
+      >
         <v-btn
           v-if="breadcrumbItems.length - 1 > 0"
           icon
@@ -90,8 +99,10 @@
           inset
           vertical
         ></v-divider>
-        <v-icon left>{{ icon || recordInfo.icon || 'mdi-domain' }}</v-icon>
-        <v-toolbar-title>{{
+        <v-icon v-if="!recordInfo.paginationOptions.hideTitle" left>{{
+          icon || recordInfo.icon || 'mdi-domain'
+        }}</v-icon>
+        <v-toolbar-title v-if="!recordInfo.paginationOptions.hideTitle">{{
           title || recordInfo.title || recordInfo.pluralName
         }}</v-toolbar-title>
         <v-divider
@@ -284,6 +295,7 @@
           </span>
         </v-card>
         <v-divider />
+        <slot name="header-text"></slot>
         <v-data-iterator
           v-if="isGrid"
           :items="records"

diff --git a/frontend/components/interface/crud/hero/hero.vue b/frontend/components/interface/crud/hero/hero.vue
@@ -4,14 +4,15 @@
     class="white--text align-end"
     gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
     height="200px"
+    :contain="containMode"
   >
     <template v-slot:placeholder>
       <v-row class="fill-height ma-0" align="center" justify="center">
         <v-icon size="200" color="grey darken-3">{{ recordInfo.icon }}</v-icon>
       </v-row>
     </template>
     <v-card-title class="subheading font-weight-bold pb-2"
-      ><span class="break-word">{{ previewName }} </span>
+      ><span class="break-word">{{ previewName }}</span>
     </v-card-title>
   </v-img>
 </template>