Add new Location field

[jordanoverbye]

I've created a new Location field which stores data about a particular location data using the Google Maps API.

Below is a basic flow of how the field works in the Admin UI (there are also testing instructions and screenshots below):

1. User searches for a location and is given a list of suggestions which come from the Google Maps AutoSuggest API. The value of each suggestion is a Google Place ID.
2. Once the user selects a location, we use the Google Place ID to make a client-side request is made to the Google Maps Geoode API. This will return the formatted address, lat, lng etc. Once we have this information we show the user a map with a pin and also updated the input value to the formatted address.
3. When the user creates or updates the page, the Google Place ID is sent to the server, and the server will do its own request to get the lat, lng, formatted address etc - which will then get saved into the DB. The reason this happens again on the server is so we only have to send a Google Place ID to create a Location field. I think this would be handy for applications other than the AdminUI.

Notes: I've had to update @arch-ui/select so that it allows us to use async and creatable react-selects through the isCreatable and isAsync props.

Testing

This is a basic Keystone config which shows off how this new field works.

const { Keystone } = require('@keystone-alpha/keystone');
const { MongooseAdapter } = require('@keystone-alpha/adapter-mongoose');
const { Location, Text } = require('@keystone-alpha/fields');
const { GraphQLApp } = require('@keystone-alpha/app-graphql');
const { AdminUIApp } = require('@keystone-alpha/app-admin-ui');
const { StaticApp } = require('@keystone-alpha/app-static');

const keystone = new Keystone({
  name: 'Keystone Event App',
  adapter: new MongooseAdapter(),
});

keystone.createList('Event', {
  fields: {
    name: {
      type: Text,
    },
    venue: {
      type: Location,
      googleMapsKey: `AIzaSyDml6rqKwjgQgPomyAhC-WxVt4aLodlraU`, // Some random key from a public code sandbox
    },
  },
});

module.exports = {
  keystone,
  apps: [
    new GraphQLApp(),
    new StaticApp({ path: '/', src: 'public' }),
    // Setup the optional Admin UI
    new AdminUIApp({ enableDefaultRoute: true }),
  ],
};

Screenshots

Searching

Search by business ...

Search by address ...

Once a location is selected, the select value will show the formatted address and will display map with a marker.

Editing a post with selected location

Cell view - just display the formatted address

[changeset-bot]

🦋 Changeset is good to go

Latest commit: e8806c9

We got this.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[VinayaSathyanarayana]

Will be a good addition to Keystone 5

[MadeByMike]

Are we using flow or not?

[MadeByMike]

Mate, I love this :)