payload 0.20.2-beta.0 → 0.20.3-beta.0

package/dist/admin/components/views/Version/Version.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Props } from './types';
+import './index.scss';
+declare const VersionView: React.FC<Props>;
+export default VersionView;

package/dist/admin/components/views/Version/Version.js

@@ -0,0 +1,160 @@
+import React, { useEffect, useState } from 'react';
+import { useRouteMatch } from 'react-router-dom';
+import format from 'date-fns/format';
+import { useConfig } from '../../utilities/Config';
+import { useAuth } from '../../utilities/Auth';
+import usePayloadAPI from '../../../hooks/usePayloadAPI';
+import Eyebrow from '../../elements/Eyebrow';
+import Loading from '../../elements/Loading';
+import { useStepNav } from '../../elements/StepNav';
+import Meta from '../../utilities/Meta';
+import CompareVersion from './Compare';
+import { mostRecentVersionOption } from './shared';
+import Restore from './Restore';
+import SelectLocales from './SelectLocales';
+import RenderFieldsToDiff from './RenderFieldsToDiff';
+import fieldComponents from './RenderFieldsToDiff/fields';
+import { fieldAffectsData } from '../../../../fields/config/types';
+import { useLocale } from '../../utilities/Locale';
+import { Gutter } from '../../elements/Gutter';
+import './index.scss';
+const baseClass = 'view-version';
+const VersionView = ({ collection, global }) => {
+    var _a;
+    const { serverURL, routes: { admin, api }, admin: { dateFormat }, localization } = useConfig();
+    const { setStepNav } = useStepNav();
+    const { params: { id, versionID } } = useRouteMatch();
+    const [compareValue, setCompareValue] = useState(mostRecentVersionOption);
+    const [localeOptions] = useState(() => (localization ? localization.locales.map((locale) => ({ label: locale, value: locale })) : []));
+    const [locales, setLocales] = useState(localeOptions);
+    const { permissions } = useAuth();
+    const locale = useLocale();
+    let originalDocFetchURL;
+    let versionFetchURL;
+    let entityLabel;
+    let fields;
+    let fieldPermissions;
+    let compareBaseURL;
+    let slug;
+    let parentID;
+    if (collection) {
+        ({ slug } = collection);
+        originalDocFetchURL = `${serverURL}${api}/${slug}/${id}`;
+        versionFetchURL = `${serverURL}${api}/${slug}/versions/${versionID}`;
+        compareBaseURL = `${serverURL}${api}/${slug}/versions`;
+        entityLabel = collection.labels.singular;
+        parentID = id;
+        fields = collection.fields;
+        fieldPermissions = permissions.collections[collection.slug].fields;
+    }
+    if (global) {
+        ({ slug } = global);
+        originalDocFetchURL = `${serverURL}${api}/globals/${slug}`;
+        versionFetchURL = `${serverURL}${api}/globals/${slug}/versions/${versionID}`;
+        compareBaseURL = `${serverURL}${api}/globals/${slug}/versions`;
+        entityLabel = global.label;
+        fields = global.fields;
+        fieldPermissions = permissions.globals[global.slug].fields;
+    }
+    const compareFetchURL = (compareValue === null || compareValue === void 0 ? void 0 : compareValue.value) === 'mostRecent' || (compareValue === null || compareValue === void 0 ? void 0 : compareValue.value) === 'published' ? originalDocFetchURL : `${compareBaseURL}/${compareValue.value}`;
+    const [{ data: doc, isLoading }] = usePayloadAPI(versionFetchURL, { initialParams: { locale: '*', depth: 1 } });
+    const [{ data: publishedDoc }] = usePayloadAPI(originalDocFetchURL, { initialParams: { locale: '*', depth: 1 } });
+    const [{ data: mostRecentDoc }] = usePayloadAPI(originalDocFetchURL, { initialParams: { locale: '*', depth: 1, draft: true } });
+    const [{ data: compareDoc }] = usePayloadAPI(compareFetchURL, { initialParams: { locale: '*', depth: 1, draft: 'true' } });
+    useEffect(() => {
+        var _a;
+        let nav = [];
+        if (collection) {
+            let docLabel = '';
+            if (mostRecentDoc) {
+                const { useAsTitle } = collection.admin;
+                if (useAsTitle !== 'id') {
+                    const titleField = collection.fields.find((field) => fieldAffectsData(field) && field.name === useAsTitle);
+                    if (titleField && mostRecentDoc[useAsTitle]) {
+                        if (titleField.localized) {
+                            docLabel = (_a = mostRecentDoc[useAsTitle]) === null || _a === void 0 ? void 0 : _a[locale];
+                        }
+                        else {
+                            docLabel = mostRecentDoc[useAsTitle];
+                        }
+                    }
+                    else {
+                        docLabel = '[Untitled]';
+                    }
+                }
+                else {
+                    docLabel = mostRecentDoc.id;
+                }
+            }
+            nav = [
+                {
+                    url: `${admin}/collections/${collection.slug}`,
+                    label: collection.labels.plural,
+                },
+                {
+                    label: docLabel,
+                    url: `${admin}/collections/${collection.slug}/${id}`,
+                },
+                {
+                    label: 'Versions',
+                    url: `${admin}/collections/${collection.slug}/${id}/versions`,
+                },
+                {
+                    label: (doc === null || doc === void 0 ? void 0 : doc.createdAt) ? format(new Date(doc.createdAt), dateFormat) : '',
+                },
+            ];
+        }
+        if (global) {
+            nav = [
+                {
+                    url: `${admin}/globals/${global.slug}`,
+                    label: global.label,
+                },
+                {
+                    label: 'Versions',
+                    url: `${admin}/globals/${global.slug}/versions`,
+                },
+                {
+                    label: (doc === null || doc === void 0 ? void 0 : doc.createdAt) ? format(new Date(doc.createdAt), dateFormat) : '',
+                },
+            ];
+        }
+        setStepNav(nav);
+    }, [setStepNav, collection, global, dateFormat, doc, mostRecentDoc, admin, id, locale]);
+    let metaTitle;
+    let metaDesc;
+    const formattedCreatedAt = (doc === null || doc === void 0 ? void 0 : doc.createdAt) ? format(new Date(doc.createdAt), dateFormat) : '';
+    if (collection) {
+        const useAsTitle = ((_a = collection === null || collection === void 0 ? void 0 : collection.admin) === null || _a === void 0 ? void 0 : _a.useAsTitle) || 'id';
+        metaTitle = `Version - ${formattedCreatedAt} - ${doc[useAsTitle]} - ${entityLabel}`;
+        metaDesc = `Viewing version for the ${entityLabel} ${doc[useAsTitle]}`;
+    }
+    if (global) {
+        metaTitle = `Version - ${formattedCreatedAt} - ${entityLabel}`;
+        metaDesc = `Viewing version for the global ${entityLabel}`;
+    }
+    let comparison = compareDoc === null || compareDoc === void 0 ? void 0 : compareDoc.version;
+    if ((compareValue === null || compareValue === void 0 ? void 0 : compareValue.value) === 'mostRecent') {
+        comparison = mostRecentDoc;
+    }
+    if ((compareValue === null || compareValue === void 0 ? void 0 : compareValue.value) === 'published') {
+        comparison = publishedDoc;
+    }
+    return (React.createElement("div", { className: baseClass },
+        React.createElement(Meta, { title: metaTitle, description: metaDesc }),
+        React.createElement(Eyebrow, null),
+        React.createElement(Gutter, { className: `${baseClass}__wrap` },
+            React.createElement("div", { className: `${baseClass}__intro` },
+                (doc === null || doc === void 0 ? void 0 : doc.autosave) ? 'Autosaved version ' : 'Version',
+                ' ',
+                "created on:"),
+            React.createElement("header", { className: `${baseClass}__header` },
+                React.createElement("h2", null, formattedCreatedAt),
+                React.createElement(Restore, { className: `${baseClass}__restore`, collection: collection, global: global, originalDocID: id, versionID: versionID, versionDate: formattedCreatedAt })),
+            React.createElement("div", { className: `${baseClass}__controls` },
+                React.createElement(CompareVersion, { publishedDoc: publishedDoc, versionID: versionID, baseURL: compareBaseURL, parentID: parentID, value: compareValue, onChange: setCompareValue }),
+                localization && (React.createElement(SelectLocales, { onChange: setLocales, options: localeOptions, value: locales }))),
+            isLoading && (React.createElement(Loading, null)),
+            (doc === null || doc === void 0 ? void 0 : doc.version) && (React.createElement(RenderFieldsToDiff, { locales: locales.map(({ value }) => value), fields: fields, fieldComponents: fieldComponents, fieldPermissions: fieldPermissions, version: doc === null || doc === void 0 ? void 0 : doc.version, comparison: comparison })))));
+};
+export default VersionView;

package/dist/admin/components/views/Version/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './types';
+declare const Version: React.FC<Props>;
+export default Version;

package/dist/admin/components/views/Version/index.js

@@ -0,0 +1,6 @@
+import React, { Suspense, lazy } from 'react';
+import Loading from '../../elements/Loading';
+const VersionView = lazy(() => import('./Version'));
+const Version = (props) => (React.createElement(Suspense, { fallback: React.createElement(Loading, null) },
+    React.createElement(VersionView, { ...props })));
+export default Version;

package/dist/admin/components/views/Version/index.scss

@@ -0,0 +1,62 @@
+@import '../../../scss/styles.scss';
+
+.view-version {
+  width: 100%;
+  margin-bottom: base(2);
+
+  &__wrap {
+    padding-top: base(1);
+  }
+
+  &__header {
+    margin-bottom: $baseline;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+
+    h2 {
+      margin: 0;
+    }
+  }
+
+  &__controls {
+    display: flex;
+    margin-bottom: $baseline;
+    margin-left: base(-.5);
+    margin-right: base(-.5);
+
+    >* {
+      margin-left: base(.5);
+      margin-right: base(.5);
+      flex-basis: 100%;
+    }
+  }
+
+  &__restore {
+    margin: 0 0 0 $baseline;
+  }
+
+  @include mid-break {
+    &__wrap {
+      padding-top: 0;
+    }
+
+    &__intro,
+    &__header {
+      display: block;
+    }
+
+    &__controls {
+      display: block;
+      margin: 0 base(-.5) base(2);
+
+      >* {
+        margin-bottom: base(.5);
+      }
+    }
+
+    &__restore {
+      margin: base(.5) 0 0 0;
+    }
+  }
+}

package/dist/admin/components/views/Version/shared.d.ts

@@ -0,0 +1,8 @@
+export declare const mostRecentVersionOption: {
+    label: string;
+    value: string;
+};
+export declare const publishedVersionOption: {
+    label: string;
+    value: string;
+};

package/dist/admin/components/views/Version/shared.js

@@ -0,0 +1,8 @@
+export const mostRecentVersionOption = {
+    label: 'Most recent',
+    value: 'mostRecent',
+};
+export const publishedVersionOption = {
+    label: 'Most recently published',
+    value: 'published',
+};

package/dist/admin/components/views/Version/types.d.ts

@@ -0,0 +1,16 @@
+import { SanitizedCollectionConfig } from '../../../../collections/config/types';
+import { SanitizedGlobalConfig } from '../../../../globals/config/types';
+export declare type LocaleOption = {
+    label: string;
+    value: string;
+};
+export declare type CompareOption = {
+    label: string;
+    value: string;
+    relationTo?: string;
+    options?: CompareOption[];
+};
+export declare type Props = {
+    collection?: SanitizedCollectionConfig;
+    global?: SanitizedGlobalConfig;
+};

package/dist/admin/components/views/Version/types.js

@@ -0,0 +1 @@
+export {};

package/dist/admin/components/views/Versions/columns.d.ts

@@ -0,0 +1,4 @@
+import { Column } from '../../elements/Table/types';
+import { SanitizedCollectionConfig } from '../../../../collections/config/types';
+import { SanitizedGlobalConfig } from '../../../../globals/config/types';
+export declare const getColumns: (collection: SanitizedCollectionConfig, global: SanitizedGlobalConfig) => Column[];

package/dist/admin/components/views/Versions/columns.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Link, useRouteMatch } from 'react-router-dom';
+import format from 'date-fns/format';
+import { useConfig } from '../../utilities/Config';
+import SortColumn from '../../elements/SortColumn';
+import { Pill } from '../..';
+const CreatedAtCell = ({ collection, global, id, date }) => {
+    const { routes: { admin }, admin: { dateFormat } } = useConfig();
+    const { params: { id: docID } } = useRouteMatch();
+    let to;
+    if (collection)
+        to = `${admin}/collections/${collection.slug}/${docID}/versions/${id}`;
+    if (global)
+        to = `${admin}/globals/${global.slug}/versions/${id}`;
+    return (React.createElement(Link, { to: to }, date && format(new Date(date), dateFormat)));
+};
+const TextCell = ({ children }) => (React.createElement("span", null, children));
+export const getColumns = (collection, global) => [
+    {
+        accessor: 'updatedAt',
+        components: {
+            Heading: (React.createElement(SortColumn, { label: "Updated At", name: "updatedAt" })),
+            renderCell: (row, data) => (React.createElement(CreatedAtCell, { collection: collection, global: global, id: row === null || row === void 0 ? void 0 : row.id, date: data })),
+        },
+    },
+    {
+        accessor: 'id',
+        components: {
+            Heading: (React.createElement(SortColumn, { label: "Version ID", disable: true, name: "id" })),
+            renderCell: (row, data) => React.createElement(TextCell, null, data),
+        },
+    },
+    {
+        accessor: 'autosave',
+        components: {
+            Heading: (React.createElement(SortColumn, { label: "Type", name: "autosave", disable: true })),
+            renderCell: (row) => (React.createElement(TextCell, null,
+                (row === null || row === void 0 ? void 0 : row.autosave) && (React.createElement(React.Fragment, null,
+                    React.createElement(Pill, null, "Autosave"),
+                    "\u00A0\u00A0")),
+                (row === null || row === void 0 ? void 0 : row.version._status) === 'published' && (React.createElement(React.Fragment, null,
+                    React.createElement(Pill, { pillStyle: "success" }, "Published"),
+                    "\u00A0\u00A0")),
+                (row === null || row === void 0 ? void 0 : row.version._status) === 'draft' && (React.createElement(Pill, null, "Draft")))),
+        },
+    },
+];

package/dist/admin/components/views/Versions/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Props } from './types';
+import './index.scss';
+declare const Versions: React.FC<Props>;
+export default Versions;

package/dist/admin/components/views/Versions/index.js

@@ -0,0 +1,179 @@
+import React, { useEffect, useState } from 'react';
+import { useRouteMatch } from 'react-router-dom';
+import format from 'date-fns/format';
+import { useConfig } from '../../utilities/Config';
+import usePayloadAPI from '../../../hooks/usePayloadAPI';
+import Eyebrow from '../../elements/Eyebrow';
+import Loading from '../../elements/Loading';
+import { useStepNav } from '../../elements/StepNav';
+import Meta from '../../utilities/Meta';
+import IDLabel from '../../elements/IDLabel';
+import { getColumns } from './columns';
+import Table from '../../elements/Table';
+import Paginator from '../../elements/Paginator';
+import PerPage from '../../elements/PerPage';
+import { useSearchParams } from '../../utilities/SearchParams';
+import { Banner, Pill } from '../..';
+import { shouldIncrementVersionCount } from '../../../../versions/shouldIncrementVersionCount';
+import { Gutter } from '../../elements/Gutter';
+import './index.scss';
+const baseClass = 'versions';
+const Versions = ({ collection, global }) => {
+    var _a, _b, _c;
+    const { serverURL, routes: { admin, api }, admin: { dateFormat } } = useConfig();
+    const { setStepNav } = useStepNav();
+    const { params: { id } } = useRouteMatch();
+    const [tableColumns] = useState(() => getColumns(collection, global));
+    const [fetchURL, setFetchURL] = useState('');
+    const { page, sort, limit } = useSearchParams();
+    let docURL;
+    let entityLabel;
+    let slug;
+    let entity;
+    let editURL;
+    if (collection) {
+        ({ slug } = collection);
+        docURL = `${serverURL}${api}/${slug}/${id}`;
+        entityLabel = collection.labels.singular;
+        entity = collection;
+        editURL = `${admin}/collections/${collection.slug}/${id}`;
+    }
+    if (global) {
+        ({ slug } = global);
+        docURL = `${serverURL}${api}/globals/${slug}`;
+        entityLabel = global.label;
+        entity = global;
+        editURL = `${admin}/globals/${global.slug}`;
+    }
+    const useAsTitle = ((_a = collection === null || collection === void 0 ? void 0 : collection.admin) === null || _a === void 0 ? void 0 : _a.useAsTitle) || 'id';
+    const [{ data: doc }] = usePayloadAPI(docURL, { initialParams: { draft: 'true' } });
+    const [{ data: versionsData, isLoading: isLoadingVersions }, { setParams }] = usePayloadAPI(fetchURL);
+    useEffect(() => {
+        let nav = [];
+        if (collection) {
+            let docLabel = '';
+            if (doc) {
+                if (useAsTitle) {
+                    if (doc[useAsTitle]) {
+                        docLabel = doc[useAsTitle];
+                    }
+                    else {
+                        docLabel = '[Untitled]';
+                    }
+                }
+                else {
+                    docLabel = doc.id;
+                }
+            }
+            nav = [
+                {
+                    url: `${admin}/collections/${collection.slug}`,
+                    label: collection.labels.plural,
+                },
+                {
+                    label: docLabel,
+                    url: editURL,
+                },
+                {
+                    label: 'Versions',
+                },
+            ];
+        }
+        if (global) {
+            nav = [
+                {
+                    url: editURL,
+                    label: global.label,
+                },
+                {
+                    label: 'Versions',
+                },
+            ];
+        }
+        setStepNav(nav);
+    }, [setStepNav, collection, global, useAsTitle, doc, admin, id, editURL]);
+    useEffect(() => {
+        const params = {
+            depth: 1,
+            page: undefined,
+            sort: undefined,
+            limit,
+            where: {},
+        };
+        if (page)
+            params.page = page;
+        if (sort)
+            params.sort = sort;
+        let fetchURLToSet;
+        if (collection) {
+            fetchURLToSet = `${serverURL}${api}/${collection.slug}/versions`;
+            params.where = {
+                parent: {
+                    equals: id,
+                },
+            };
+        }
+        if (global) {
+            fetchURLToSet = `${serverURL}${api}/globals/${global.slug}/versions`;
+        }
+        // Performance enhancement
+        // Setting the Fetch URL this way
+        // prevents a double-fetch
+        setFetchURL(fetchURLToSet);
+        setParams(params);
+    }, [setParams, page, sort, limit, serverURL, api, id, global, collection]);
+    let useIDLabel = doc[useAsTitle] === (doc === null || doc === void 0 ? void 0 : doc.id);
+    let heading;
+    let metaDesc;
+    let metaTitle;
+    if (collection) {
+        metaTitle = `Versions - ${doc[useAsTitle]} - ${entityLabel}`;
+        metaDesc = `Viewing versions for the ${entityLabel} ${doc[useAsTitle]}`;
+        heading = (doc === null || doc === void 0 ? void 0 : doc[useAsTitle]) || '[Untitled]';
+    }
+    if (global) {
+        metaTitle = `Versions - ${entityLabel}`;
+        metaDesc = `Viewing versions for the global ${entityLabel}`;
+        heading = entityLabel;
+        useIDLabel = false;
+    }
+    const docStatus = doc === null || doc === void 0 ? void 0 : doc._status;
+    const docUpdatedAt = doc === null || doc === void 0 ? void 0 : doc.updatedAt;
+    const showParentDoc = (versionsData === null || versionsData === void 0 ? void 0 : versionsData.page) === 1 && shouldIncrementVersionCount({ entity, docStatus, versions: versionsData });
+    return (React.createElement("div", { className: baseClass },
+        React.createElement(Meta, { title: metaTitle, description: metaDesc }),
+        React.createElement(Eyebrow, null),
+        React.createElement(Gutter, { className: `${baseClass}__wrap` },
+            React.createElement("header", { className: `${baseClass}__header` },
+                React.createElement("div", { className: `${baseClass}__intro` }, "Showing versions for:"),
+                useIDLabel && (React.createElement(IDLabel, { id: doc === null || doc === void 0 ? void 0 : doc.id })),
+                !useIDLabel && (React.createElement("h1", null, heading))),
+            isLoadingVersions && (React.createElement(Loading, null)),
+            showParentDoc && (React.createElement(Banner, { type: docStatus === 'published' ? 'success' : undefined, className: `${baseClass}__parent-doc` },
+                "Current",
+                ' ',
+                docStatus,
+                ' ',
+                "document -",
+                ' ',
+                format(new Date(docUpdatedAt), dateFormat),
+                React.createElement("div", { className: `${baseClass}__parent-doc-pills` },
+                    "\u00A0\u00A0",
+                    React.createElement(Pill, { pillStyle: "white", to: editURL }, "Edit")))),
+            (versionsData === null || versionsData === void 0 ? void 0 : versionsData.totalDocs) > 0 && (React.createElement(React.Fragment, null,
+                React.createElement(Table, { data: versionsData === null || versionsData === void 0 ? void 0 : versionsData.docs, columns: tableColumns }),
+                React.createElement("div", { className: `${baseClass}__page-controls` },
+                    React.createElement(Paginator, { limit: versionsData.limit, totalPages: versionsData.totalPages, page: versionsData.page, hasPrevPage: versionsData.hasPrevPage, hasNextPage: versionsData.hasNextPage, prevPage: versionsData.prevPage, nextPage: versionsData.nextPage, numberOfNeighbors: 1 }),
+                    (versionsData === null || versionsData === void 0 ? void 0 : versionsData.totalDocs) > 0 && (React.createElement(React.Fragment, null,
+                        React.createElement("div", { className: `${baseClass}__page-info` },
+                            (versionsData.page * versionsData.limit) - (versionsData.limit - 1),
+                            "-",
+                            versionsData.totalPages > 1 && versionsData.totalPages !== versionsData.page ? (versionsData.limit * versionsData.page) : versionsData.totalDocs,
+                            ' ',
+                            "of",
+                            ' ',
+                            versionsData.totalDocs),
+                        React.createElement(PerPage, { limits: (_c = (_b = collection === null || collection === void 0 ? void 0 : collection.admin) === null || _b === void 0 ? void 0 : _b.pagination) === null || _c === void 0 ? void 0 : _c.limits, limit: limit ? Number(limit) : 10 })))))),
+            (versionsData === null || versionsData === void 0 ? void 0 : versionsData.totalDocs) === 0 && (React.createElement("div", { className: `${baseClass}__no-versions` }, "No further versions found")))));
+};
+export default Versions;

package/dist/admin/components/views/Versions/index.scss

@@ -0,0 +1,69 @@
+@import '../../../scss/styles.scss';
+
+.versions {
+  width: 100%;
+  margin-bottom: base(2);
+
+  &__wrap {
+    padding-top: base(1);
+  }
+
+  &__header {
+    margin-bottom: $baseline;
+  }
+
+  &__intro {
+    margin-bottom: base(.5);
+  }
+
+  &__parent-doc {
+    .banner__content {
+      display: flex;
+    }
+  }
+
+  &__parent-doc-pills {
+    margin-left: auto;
+  }
+
+  .table {
+    table {
+      width: 100%;
+      overflow: auto;
+    }
+  }
+
+  &__page-controls {
+    width: 100%;
+    display: flex;
+    align-items: center;
+  }
+
+  .paginator {
+    margin-bottom: 0;
+  }
+
+  &__page-info {
+    margin-right: base(1);
+    margin-left: auto;
+  }
+
+  @include mid-break {
+    &__wrap {
+      padding-top: 0;
+    }
+
+    &__page-controls {
+      flex-wrap: wrap;
+    }
+
+    &__page-info {
+      margin-left: 0;
+    }
+
+    .paginator {
+      width: 100%;
+      margin-bottom: $baseline;
+    }
+  }
+}

package/dist/admin/components/views/Versions/types.d.ts

@@ -0,0 +1,6 @@
+import { SanitizedCollectionConfig } from '../../../../collections/config/types';
+import { SanitizedGlobalConfig } from '../../../../globals/config/types';
+export declare type Props = {
+    collection?: SanitizedCollectionConfig;
+    global?: SanitizedGlobalConfig;
+};

package/dist/admin/components/views/Versions/types.js

@@ -0,0 +1 @@
+export {};

package/dist/admin/components/views/collections/Edit/Auth/APIKey.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const APIKey: React.FC;
+export default APIKey;

package/dist/admin/components/views/collections/Edit/Auth/APIKey.js

@@ -0,0 +1,60 @@
+import React, { useMemo, useState, useEffect } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import useField from '../../../../forms/useField';
+import Label from '../../../../forms/Label';
+import CopyToClipboard from '../../../../elements/CopyToClipboard';
+import { text } from '../../../../../../fields/validations';
+import { useWatchForm } from '../../../../forms/Form/context';
+import GenerateConfirmation from '../../../../elements/GenerateConfirmation';
+const path = 'apiKey';
+const baseClass = 'api-key';
+const validate = (val) => text(val, { minLength: 24, maxLength: 48, data: {}, siblingData: {} });
+const APIKey = () => {
+    const [initialAPIKey, setInitialAPIKey] = useState(null);
+    const [highlightedField, setHighlightedField] = useState(false);
+    const { getField } = useWatchForm();
+    const apiKey = getField(path);
+    const apiKeyValue = apiKey === null || apiKey === void 0 ? void 0 : apiKey.value;
+    const APIKeyLabel = useMemo(() => (React.createElement("div", { className: `${baseClass}__label` },
+        React.createElement("span", null, "API Key"),
+        React.createElement(CopyToClipboard, { value: apiKeyValue }))), [apiKeyValue]);
+    const fieldType = useField({
+        path: 'apiKey',
+        validate,
+    });
+    const highlightField = () => {
+        if (highlightedField) {
+            setHighlightedField(false);
+        }
+        setTimeout(() => {
+            setHighlightedField(true);
+        }, 1);
+    };
+    const { value, setValue, } = fieldType;
+    useEffect(() => {
+        setInitialAPIKey(uuidv4());
+    }, []);
+    useEffect(() => {
+        if (!apiKeyValue) {
+            setValue(initialAPIKey);
+        }
+    }, [apiKeyValue, setValue, initialAPIKey]);
+    useEffect(() => {
+        if (highlightedField) {
+            setTimeout(() => {
+                setHighlightedField(false);
+            }, 10000);
+        }
+    }, [highlightedField]);
+    const classes = [
+        'field-type',
+        'api-key',
+        'read-only',
+    ].filter(Boolean).join(' ');
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: classes },
+            React.createElement(Label, { htmlFor: path, label: APIKeyLabel }),
+            React.createElement("input", { value: value || '', className: highlightedField ? 'highlight' : undefined, disabled: true, type: "text", id: "apiKey", name: "apiKey" })),
+        React.createElement(GenerateConfirmation, { setKey: () => setValue(uuidv4()), highlightField: highlightField })));
+};
+export default APIKey;