From c96c5b4e708f88d67cad00997982060a8badcb90 Mon Sep 17 00:00:00 2001 From: Daniel Lautzenheiser Date: Wed, 26 Oct 2022 10:57:40 -0400 Subject: [PATCH] Remove deprecated fields, fix loader styles, fix snackbars not appearing on login page --- core/package.json | 2 +- core/src/actions/config.ts | 65 +------- .../git-gateway/AuthenticationPage.tsx | 63 ++------ core/src/components/App/App.tsx | 152 +++++++++--------- core/src/components/UI/Loader.tsx | 6 +- core/src/locales/en/index.ts | 1 + 6 files changed, 100 insertions(+), 189 deletions(-) diff --git a/core/package.json b/core/package.json index 9f201ad7..95a2f610 100644 --- a/core/package.json +++ b/core/package.json @@ -1,6 +1,6 @@ { "name": "@staticcms/core", - "version": "1.0.0-alpha8", + "version": "1.0.0-alpha9", "license": "MIT", "description": "Static CMS core application.", "repository": "https://github.com/StaticJsCMS/static-cms", diff --git a/core/src/actions/config.ts b/core/src/actions/config.ts index a41b61eb..3776588d 100644 --- a/core/src/actions/config.ts +++ b/core/src/actions/config.ts @@ -14,14 +14,14 @@ import { getIntegrations, selectIntegration } from '../reducers/integrations'; import type { AnyAction } from 'redux'; import type { ThunkDispatch } from 'redux-thunk'; import type { + BaseField, Collection, Config, Field, - BaseField, - ListField, - ObjectField, I18nInfo, + ListField, LocalBackend, + ObjectField, } from '../interface'; import type { RootState } from '../store'; @@ -73,35 +73,6 @@ function setDefaultPublicFolderForField(field: T) { return field; } -// Mapping between existing camelCase and its snake_case counterpart -const WIDGET_KEY_MAP = { - dateFormat: 'date_format', - timeFormat: 'time_format', - pickerUtc: 'picker_utc', - editorComponents: 'editor_components', - valueType: 'value_type', - valueField: 'value_field', - searchFields: 'search_fields', - displayFields: 'display_fields', - optionsLength: 'options_length', -} as const; - -function setSnakeCaseConfig(field: T) { - const deprecatedKeys = Object.keys(WIDGET_KEY_MAP).filter( - camel => camel in field, - ) as ReadonlyArray; - - const snakeValues = deprecatedKeys.map(camel => { - const snake = WIDGET_KEY_MAP[camel]; - console.warn( - `Field ${field.name} is using a deprecated configuration '${camel}'. Please use '${snake}'`, - ); - return { [snake]: (field as unknown as Record)[camel] }; - }); - - return Object.assign({}, field, ...snakeValues) as T; -} - function setI18nField(field: T) { if (field[I18N] === true) { return { ...field, [I18N]: I18N_FIELD.TRANSLATE }; @@ -161,32 +132,6 @@ function hasIntegration(config: Config, collection: Collection) { return !!integration; } -export function normalizeConfig(config: Config) { - const { collections = [] } = config; - - const normalizedCollections = collections.map(collection => { - const { fields, files } = collection; - - let normalizedCollection = collection; - if (fields) { - const normalizedFields = traverseFieldsJS(fields, setSnakeCaseConfig); - normalizedCollection = { ...normalizedCollection, fields: normalizedFields }; - } - - if (files) { - const normalizedFiles = files.map(file => { - const normalizedFileFields = traverseFieldsJS(file.fields, setSnakeCaseConfig); - return { ...file, fields: normalizedFileFields }; - }); - normalizedCollection = { ...normalizedCollection, files: normalizedFiles }; - } - - return normalizedCollection; - }); - - return { ...config, collections: normalizedCollections }; -} - export function applyDefaults(originalConfig: Config) { return produce(originalConfig, config => { config.slug = config.slug || {}; @@ -451,9 +396,7 @@ export function loadConfig(manualConfig: Config | undefined, onLoad: () => unkno validateConfig(mergedConfig); const withLocalBackend = await handleLocalBackend(mergedConfig); - const normalizedConfig = normalizeConfig(withLocalBackend); - - const config = applyDefaults(normalizedConfig); + const config = applyDefaults(withLocalBackend); dispatch(configLoaded(config)); diff --git a/core/src/backends/git-gateway/AuthenticationPage.tsx b/core/src/backends/git-gateway/AuthenticationPage.tsx index da80da4b..edbe8433 100644 --- a/core/src/backends/git-gateway/AuthenticationPage.tsx +++ b/core/src/backends/git-gateway/AuthenticationPage.tsx @@ -3,7 +3,6 @@ import { styled } from '@mui/material/styles'; import TextField from '@mui/material/TextField'; import React, { useCallback, useEffect, useState } from 'react'; -import alert from '../../components/UI/Alert'; import AuthenticationPage from '../../components/UI/AuthenticationPage'; import { colors } from '../../components/UI/styles'; @@ -57,37 +56,17 @@ const GitGatewayAuthenticationPage = ({ }>({}); useEffect(() => { - try { - if (!loggedIn && window.netlifyIdentity && window.netlifyIdentity.currentUser()) { - onLogin(window.netlifyIdentity.currentUser()); - window.netlifyIdentity.close(); - } - } catch (e: unknown) { - console.error(e); - if (e instanceof Error) { - alert({ - title: 'auth.errors.authTitle', - body: { key: 'auth.errors.authBody', options: { details: e.message } }, - }); - } + if (!loggedIn && window.netlifyIdentity && window.netlifyIdentity.currentUser()) { + onLogin(window.netlifyIdentity.currentUser()); + window.netlifyIdentity.close(); } // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const handleIdentityLogin = useCallback( (user: User) => { - try { - onLogin(user); - window.netlifyIdentity?.close(); - } catch (e: unknown) { - console.error(e); - if (e instanceof Error) { - alert({ - title: 'auth.errors.authTitle', - body: { key: 'auth.errors.authBody', options: { details: e.message } }, - }); - } - } + onLogin(user); + window.netlifyIdentity?.close(); }, [onLogin], ); @@ -113,21 +92,11 @@ const GitGatewayAuthenticationPage = ({ useNetlifyIdentifyEvent('error', handleIdentityError); const handleIdentity = useCallback(() => { - try { - const user = window.netlifyIdentity?.currentUser(); - if (user) { - onLogin(user); - } else { - window.netlifyIdentity?.open(); - } - } catch (e: unknown) { - console.error(e); - if (e instanceof Error) { - alert({ - title: 'auth.errors.authTitle', - body: { key: 'auth.errors.authBody', options: { details: e.message } }, - }); - } + const user = window.netlifyIdentity?.currentUser(); + if (user) { + onLogin(user); + } else { + window.netlifyIdentity?.open(); } }, [onLogin]); @@ -173,17 +142,7 @@ const GitGatewayAuthenticationPage = ({ return; } - try { - onLogin(response); - } catch (e: unknown) { - console.error(e); - if (e instanceof Error) { - alert({ - title: 'auth.errors.authTitle', - body: { key: 'auth.errors.authBody', options: { details: e.message } }, - }); - } - } + onLogin(response); }, [email, handleAuth, onLogin, password, t], ); diff --git a/core/src/components/App/App.tsx b/core/src/components/App/App.tsx index a93abc89..e781771c 100644 --- a/core/src/components/App/App.tsx +++ b/core/src/components/App/App.tsx @@ -1,6 +1,6 @@ -import { styled } from '@mui/material/styles'; import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'; import Fab from '@mui/material/Fab'; +import { styled } from '@mui/material/styles'; import React, { useCallback, useMemo } from 'react'; import { translate } from 'react-polyglot'; import { connect } from 'react-redux'; @@ -92,18 +92,21 @@ const App = ({ t, scrollSyncEnabled, }: TranslatedProps) => { - const configError = useCallback(() => { - return ( - -

{t('app.app.errorHeader')}

-
- {t('app.app.configErrors')}: - {config.error} - {t('app.app.checkConfigYml')} -
- - ); - }, [config.error, t]); + const configError = useCallback( + (error?: string) => { + return ( + +

{t('app.app.errorHeader')}

+
+ {t('app.app.configErrors')}: + {error ?? config.error} + {t('app.app.checkConfigYml')} +
+ + ); + }, + [config.error, t], + ); const handleLogin = useCallback( (credentials: Credentials) => { @@ -154,8 +157,59 @@ const App = ({ const defaultPath = useMemo(() => getDefaultPath(collections), [collections]); + const content = useMemo(() => { + if (!user) { + return authenticationPage; + } + + return ( + <> + {isFetching && } + + } /> + } /> + } /> + } + /> + } /> + } + /> + } + /> + } + /> + + } + /> + } + /> + } + /> + } /> + } /> + + {useMediaLibrary ? : null} + + ); + }, [authenticationPage, collections, defaultPath, isFetching, useMediaLibrary, user]); + if (!config.config) { - return null; + return configError(t('app.app.configNotFound')); } if (config.error) { @@ -166,71 +220,21 @@ const App = ({ return {t('app.app.loadingConfig')}; } - if (!user) { - return authenticationPage; - } - return ( <> - - + + <> -
- - - - {isFetching && } - - } /> - } /> - } /> - } - /> - } - /> - } - /> - } - /> - } - /> - - } - /> - } - /> - } - /> - } /> - } /> - - {useMediaLibrary ? : null} - - +
+ + + + {content} + + - + diff --git a/core/src/components/UI/Loader.tsx b/core/src/components/UI/Loader.tsx index e0597c45..7056fe17 100644 --- a/core/src/components/UI/Loader.tsx +++ b/core/src/components/UI/Loader.tsx @@ -4,8 +4,12 @@ import Typography from '@mui/material/Typography'; import React, { useEffect, useMemo, useState } from 'react'; const StyledLoader = styled('div')` + position: fixed; display: flex; - width: 100%; + width: 100vw; + height: 100vh; + top: 0; + left: 0; flex-direction: column; align-items: center; justify-content: center; diff --git a/core/src/locales/en/index.ts b/core/src/locales/en/index.ts index 95810fdf..11b53c73 100644 --- a/core/src/locales/en/index.ts +++ b/core/src/locales/en/index.ts @@ -27,6 +27,7 @@ const en: LocalePhrasesRoot = { app: { errorHeader: 'Error loading the CMS configuration', configErrors: 'Config Errors', + configNotFound: 'Config not found', checkConfigYml: 'Check your config.yml file.', loadingConfig: 'Loading configuration...', waitingBackend: 'Waiting for backend...',