Image field type (#5396)

.changeset/real-parents-warn.md

@@ -0,0 +1,5 @@
+---
+'@keystone-next/admin-ui': minor
+---
+
+Reflected next/image exports from admin-ui for use in other relevant keystone-next packages.

.changeset/rude-parrots-train.md

@@ -0,0 +1,5 @@
+---
+'@keystone-next/app-basic': patch
+---
+
+Added example of image field support to basic keystone-next example.

.changeset/shaggy-dots-appear.md

@@ -0,0 +1,5 @@
+---
+'@keystone-next/fields': minor
+---
+
+Added new image field type.

.changeset/stale-balloons-grin.md

@@ -0,0 +1,5 @@
+---
+'@keystone-next/types': minor
+---
+
+Added types for new images functionality in keystone.

.changeset/tough-ravens-help.md

@@ -0,0 +1,5 @@
+---
+'@keystone-next/keystone': minor
+---
+
+Added create-image-context, logic for parsing, storing and retrieving image data in keystone core.

examples-next/basic/.gitignore

@@ -0,0 +1 @@
+public/

examples-next/basic/keystone.ts

@@ -36,6 +36,7 @@ export default auth.withAuth(
       // path: '/admin',
       // isAccessAllowed,
     },
+    images: { upload: 'local' },
     lists,
     extendGraphqlSchema,
     session: withItemData(

examples-next/basic/schema.ts

@@ -7,6 +7,7 @@ import {
   timestamp,
   select,
   virtual,
+  image,
 } from '@keystone-next/fields';
 import { document } from '@keystone-next/fields-document';
 // import { cloudinaryImage } from '@keystone-next/cloudinary';
@@ -34,21 +35,15 @@ export const lists = createSchema({
   User: list({
     ui: {
       listView: {
-        initialColumns: ['name', 'posts'],
+        initialColumns: ['name', 'posts', 'avatar'],
       },
     },
     fields: {
       /** The user's first and last name. */
       name: text({ isRequired: true }),
       /** Email is used to log into the system. */
       email: text({ isRequired: true, isUnique: true }),
-      // avatar: cloudinaryImage({
-      //   cloudinary: {
-      //     cloudName: '/* TODO */',
-      //     apiKey: '/* TODO */',
-      //     apiSecret: '/* TODO */',
-      //   },
-      // }),
+      avatar: image(),
       /** Used to log in. */
       password: password(),
       /** Administrators have more access to various lists and fields. */

packages-next/admin-ui/image/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/admin-ui.cjs.js",
+  "module": "dist/admin-ui.esm.js"
+}

packages-next/admin-ui/package.json

@@ -52,7 +52,8 @@
       "apollo.tsx",
       "context.tsx",
       "router.tsx",
-      "next-config.ts"
+      "next-config.ts",
+      "image.tsx"
     ]
   },
   "repository": "https://github.com/keystonejs/keystone/tree/master/packages-next/admin-ui",

packages-next/admin-ui/src/image.tsx

@@ -0,0 +1,2 @@
+export * from 'next/image';
+export { default } from 'next/image';

packages-next/admin-ui/src/system/generateAdminUI.ts

@@ -53,6 +53,14 @@ export const generateAdminUI = async (
   // Nuke any existing files in our target directory
   await fs.remove(projectAdminPath);
 
+  if (config.images) {
+    const publicDirectory = Path.join(projectAdminPath, 'public');
+    await fs.mkdir(publicDirectory, { recursive: true });
+    const storagePath = Path.resolve(config.images.local?.storagePath ?? './public/images');
+    await fs.mkdir(storagePath, { recursive: true });
+    await fs.symlink(storagePath, Path.join(publicDirectory, 'images'), 'junction');
+  }
+
   // Write out the files configured by the user
   const userPages = config.ui?.getAdditionalFiles?.map(x => x(config)) ?? [];
   const userFilesToWrite = (await Promise.all(userPages)).flat();

packages-next/fields/package.json

@@ -7,6 +7,7 @@
   "devDependencies": {
     "@keystone-next/server-side-graphql-client-legacy": "3.0.1",
     "@keystone-next/test-utils-legacy": "16.0.0",
+    "@types/bytes": "^3.1.0",
     "mime": "^2.5.2",
     "typescript": "^4.2.3"
   },
@@ -25,6 +26,7 @@
     "@keystone-ui/icons": "^2.0.1",
     "@keystone-ui/loading": "^2.0.1",
     "@keystone-ui/modals": "^2.0.1",
+    "@keystone-ui/pill": "^2.0.1",
     "@keystone-ui/segmented-control": "^2.0.1",
     "@keystone-ui/toast": "^2.0.1",
     "@keystone-ui/tooltip": "^2.0.1",
@@ -33,6 +35,8 @@
     "@types/react": "^17.0.3",
     "apollo-errors": "^1.9.0",
     "bcryptjs": "^2.4.3",
+    "bytes": "^3.1.0",
+    "copy-to-clipboard": "^3.3.1",
     "cuid": "^2.1.8",
     "date-fns": "^2.20.2",
     "decimal.js": "^10.2.1",

packages-next/fields/src/Implementation.ts

@@ -150,8 +150,28 @@ class Field<P extends string> {
     return resolvedData[this.path];
   }
 
+  /**
+   * @param {Object} data
+   * @param {Object} data.resolvedData The incoming item for the mutation with
+   * relationships and defaults already resolved
+   * @param {Object} data.existingItem If this is a updateX mutation, this will
+   * be the existing data in the database
+   * @param {Object} data.context The graphQL context object of the current
+   * request
+   * @param {Object} data.originalInput The raw incoming item from the mutation
+   * (no relationships or defaults resolved)
+   */
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  async validateInput(args: any) {}
+  async validateInput(data: {
+    resolvedData: Record<P, any>;
+    existingItem?: Record<string, any>;
+    context: KeystoneContext;
+    originalInput: any;
+    listKey: string;
+    fieldPath: P;
+    operation: 'create' | 'update';
+    addFieldValidationError: (msg: string) => void;
+  }) {}
 
   async beforeChange() {}
 

packages-next/fields/src/index.ts

@@ -11,3 +11,4 @@ export { select } from './types/select';
 export { virtual } from './types/virtual';
 export { Implementation } from './Implementation';
 export type { FieldConfigArgs, FieldExtraArgs } from './Implementation';
+export { image } from './types/image';

packages-next/fields/src/types/image/Implementation.ts

@@ -0,0 +1,216 @@
+import { PrismaFieldAdapter, PrismaListAdapter } from '@keystone-next/adapter-prisma-legacy';
+import { getImageRef, SUPPORTED_IMAGE_EXTENSIONS } from '@keystone-next/utils-legacy';
+import { ImageData, KeystoneContext, BaseKeystoneList } from '@keystone-next/types';
+import { Implementation } from '../../Implementation';
+import { handleImageData } from './handle-image-input';
+
+export class ImageImplementation<P extends string> extends Implementation<P> {
+  get _supportsUnique() {
+    return false;
+  }
+
+  gqlOutputFields() {
+    return [`${this.path}: ImageFieldOutput`];
+  }
+
+  getGqlAuxTypes() {
+    return [
+      `enum ImageMode {
+        local
+      }
+      input ImageFieldInput {
+        upload: Upload
+        ref: String
+      }
+      enum ImageExtension {
+        ${SUPPORTED_IMAGE_EXTENSIONS.join('\n')}
+      }
+      type ImageFieldOutput {
+        mode: ImageMode!
+        id: ID!
+        filesize: Int!
+        width: Int!
+        height: Int!
+        extension: ImageExtension!
+        ref: String!
+        src: String!
+      }`,
+    ];
+  }
+
+  gqlAuxFieldResolvers() {
+    return {
+      ImageFieldOutput: {
+        src(data: ImageData, _args: any, context: KeystoneContext) {
+          if (!context.images) {
+            throw new Error('Image context is undefined');
+          }
+          return context.images.getSrc(data.mode, data.id, data.extension);
+        },
+        ref(data: ImageData, _args: any, context: KeystoneContext) {
+          if (!context.images) {
+            throw new Error('Image context is undefined');
+          }
+          return getImageRef(data.mode, data.id, data.extension);
+        },
+      },
+    };
+  }
+  // Called on `User.avatar` for example
+  gqlOutputFieldResolvers() {
+    return { [`${this.path}`]: (item: Record<P, any>) => item[this.path] };
+  }
+
+  async resolveInput({
+    resolvedData,
+    context,
+  }: {
+    resolvedData: Record<P, any>;
+    context: KeystoneContext;
+  }) {
+    const data = resolvedData[this.path];
+    if (data === null) {
+      return null;
+    }
+    if (data === undefined) {
+      return undefined;
+    }
+    const imageData = await handleImageData(data, context);
+    return imageData;
+  }
+
+  gqlUpdateInputFields() {
+    return [`${this.path}: ImageFieldInput`];
+  }
+  gqlCreateInputFields() {
+    return [`${this.path}: ImageFieldInput`];
+  }
+  getBackingTypes() {
+    return { [this.path]: { optional: true, type: 'Record<string, any> | null' } };
+  }
+}
+
+export class PrismaImageInterface<P extends string> extends PrismaFieldAdapter<P> {
+  constructor(
+    fieldName: string,
+    path: P,
+    field: ImageImplementation<P>,
+    listAdapter: PrismaListAdapter,
+    getListByKey: (arg: string) => BaseKeystoneList | undefined,
+    config = {}
+  ) {
+    super(fieldName, path, field, listAdapter, getListByKey, config);
+    // Error rather than ignoring invalid config
+    // We totally can index these values, it's just not trivial. See issue #1297
+    if (this.config.isIndexed) {
+      throw new Error(
+        `The Image field type doesn't support indexes on Prisma. ` +
+          `Check the config for ${this.path} on the ${this.field.listKey} list`
+      );
+    }
+  }
+
+  getPrismaSchema() {
+    return [
+      `${this.path}_filesize    Int?`,
+      `${this.path}_extension   String?`,
+      `${this.path}_width   Int?`,
+      `${this.path}_height   Int?`,
+      `${this.path}_mode   String?`,
+      `${this.path}_id   String?`,
+    ];
+  }
+
+  getQueryConditions() {
+    return {};
+  }
+
+  setupHooks({
+    addPreSaveHook,
+    addPostReadHook,
+  }: {
+    addPreSaveHook: (hook: any) => void;
+    addPostReadHook: (hook: any) => void;
+  }) {
+    const field_path = this.path;
+    const filesize_field = `${this.path}_filesize`;
+    const extension_field = `${this.path}_extension`;
+    const width_field = `${this.path}_width`;
+    const height_field = `${this.path}_height`;
+    const mode_field = `${this.path}_mode`;
+    const id_field = `${this.path}_id`;
+
+    addPreSaveHook(
+      (item: Record<P, any>): Record<string, any> => {
+        if (!Object.prototype.hasOwnProperty.call(item, field_path)) {
+          return item;
+        }
+        if (item[field_path as P] === null) {
+          // If the property exists on the field but is null or falsey
+          // all split fields are null
+          // delete the original field item
+          // return the item
+          const newItem = {
+            [filesize_field]: null,
+            [extension_field]: null,
+            [width_field]: null,
+            [height_field]: null,
+            [id_field]: null,
+            [mode_field]: null,
+            ...item,
+          };
+          delete newItem[field_path];
+          return newItem;
+        } else {
+          const { mode, filesize, extension, width, height, id } = item[field_path];
+
+          const newItem = {
+            [filesize_field]: filesize,
+            [extension_field]: extension,
+            [width_field]: width,
+            [height_field]: height,
+            [id_field]: id,
+            [mode_field]: mode,
+            ...item,
+          };
+
+          delete newItem[field_path];
+
+          return newItem;
+        }
+      }
+    );
+    addPostReadHook(
+      (item: Record<string, any>): Record<P, any> => {
+        if (
+          !item[filesize_field] ||
+          !item[extension_field] ||
+          !item[width_field] ||
+          !item[height_field] ||
+          !item[id_field] ||
+          !item[mode_field]
+        ) {
+          item[field_path] = null;
+          return item;
+        }
+        item[field_path] = {
+          filesize: item[filesize_field],
+          extension: item[extension_field],
+          width: item[width_field],
+          height: item[height_field],
+          id: item[id_field],
+          mode: item[mode_field],
+        };
+
+        delete item[filesize_field];
+        delete item[extension_field];
+        delete item[width_field];
+        delete item[height_field];
+        delete item[id_field];
+        delete item[mode_field];
+
+        return item;
+      }
+    );
+  }
+}