Starting with 4.1.0, changes will be documented per package
Mar 8, 2023
- New strategy for authorization: Comet is now less opinionated on how a user should be authorized. Opinionated parts regarding authorization are removed from the packages. Various helpers to configure authorization in the application are provided.
- New strategy for project configuration: Configurations that do not change between environments should be stored in a new
comet-config.json
file that is used in all microservices. - New strategy for module configuration: Configuration is only injected into the
AppModule
instead of injecting it into the separate modules. Doing so removes a significant overhead caused by asynchronous module initialization. - Performance improvements for requests accessing the page tree and documents: Page tree nodes may now be preloaded on a request basis. Page tree node documents are only loaded if requested by the query.
- Add
AnchorBlock
to support linking to anchors.
- Add
anchors
method toBlockInterface
for a block to specify its anchors
-
Changes related to the new authorization strategy
- Remove dependency on @comet/react-app-auth package
- Remove
AuthorizationErrorPage
component - Remove
access-token-service-worker.js
file. You should remove it from your build setup - Remove
AccessToken
message fromIFrameBridge
- Remove
authorizationManager
option fromcreateHttpClient
-
Change
CmsBlockContext.damConfig.maxFileSize
fromstring
tonumber
-
Change
CmsBlockContext.damConfig.maxSrcResolution
fromstring
tonumber
-
Rename
Publisher
component toPublisherPage
-
Remove the wrapping
Chip
frominfoTag
method inDocumentInterface
. Applications should add theChip
themselves:export const Page: DocumentInterface<Pick<GQLPage, "content" | "seo">, GQLPageInput> = { ... InfoTag: ({ page }: { page: PageTreePage & GQLPageTreeNodeAdditionalFieldsFragment }) => { return <Chip size="small" label={page.userGroup} />; }, };
-
Add
anchors
method toDocumentInterface
for a document to specify its anchors
- Add
AnchorBlock
- Add support for anchors to
InternalLinkBlock
- Add support for a custom block name to
createTextLinkBlock
- Add support for a custom block name and migrations to
createTextLinkBlock
-
Changes related to the new authorization strategy
- Remove
AuthModule
. The auth module should be created in the application using the factories provided by the package. See AuthModule for an example - Remove
BasicAuthStrategy
. UsecreateStaticCredentialsBasicStrategy
instead - Remove
BearerTokenStrategy
. UsecreateAuthProxyJwtStrategy
instead - Remove
GlobalAuthGuard
. UsecreateCometAuthGuard
instead
- Remove
-
Changes related to the new module configuration strategy
BlocksModule
,BlobStorageModule
,DamModule
andPublicUploadModule
are not initialized asynchronously anymore. See AppModule for an example
-
BlocksTransformerMiddlewareFactory
now requiresBLOCKS_MODULE_TRANSFORMER_DEPENDENCIES
to be injected. See AppModule for an example -
Restrict access to builds based on
ContentScopeModule
. Cron jobs and jobs need to be annotated withcomet-dxp.com/content-scope
-
Move Kubernetes-specific parts of
BuildsModule
into a newKubernetesModule
-
Remove the option to configure
BuildsModule
. Configuration of the Helm release is now done inKubernetesModule
-
Make @kubernetes/client-node a peer dependency
-
Remove
BuildObject
-
Change
DamModule.damConfig.allowedImageSizes
fromstring[]
tonumber[]
-
Change
DamModule.damConfig.allowedAspectRatios
fromstring[]
tonumber[]
-
Remove
damPath
fromPixelImageBlock
,SvgImageBlock
andDamVideoBlock
- Changes related to the new authorization strategy
- Add
createCometAuthGuard
to create the global application guard - Add
createAuthResolver
forcurrentUser
query andcurrentUserSignOut
mutation - Add
createAuthProxyJwtStrategy
for a JWT-based auth strategy - Add
createStaticCredentialsBasicStrategy
for a basic auth strategy - Add
createStaticAuthedUserStrategy
for a static user-based strategy. It should be primarily used for local development
- Add
- Add request-scoped
PageTreeReadApiService
withpreloadNodes
method to preload pages when reading large parts of the page tree - Add request-scoped
BlocksTransformerService
that can be used in block field resolvers for improved performance (instead of relying on BlocksTransformerMiddlewareFactory). If all block transforms are done using field resolvers,BlocksTransformerMiddlewareFactory
andfieldResolverEnhancers
can be removed for additional performance improvements - Add
AnchorBlock
- Add support for anchors to
InternalLinkBlock
-
Changes related to the new authorization strategy
- Remove dependency on next-auth package
- Remove
access-token-service-worker.js
file. You should remove it from your build setup - Remove
AccessToken
message fromIFrameBridge
-
Remove the ceiling of
width
andheight
props inImage
component
- Add
AnchorBlock
- Add support for anchors to
InternalLinkBlock
- Add
getAuthedUser
andhasAuthedUser
to parse the current user from the request
- Enable no-return-await rule
Feb 7, 2023
- Fix
createRedirect
mutation when no scoping is used
- Fix
createCompositeSetting
not working when using an array value
Jan 25, 2023
- Fix
readClipboardText()
not working in Firefox by using local storage as a fallback
Dec 6, 2022
- Fix a bug where the slider thumbs are not visible when using
FinalFormRangeInput
- Fix a bug where
SaveButton
would not clearerror
andsuccess
display states after timeout
Nov 29, 2022
- Add support to type root blocks in the GraphQL schema using
RootBlockDataScalar
andRootBlockInputScalar
. See page.entity.ts, schema.gql, and codegen.ts for an example on how to use
- Fix a bug where control buttons in the toolbar would trigger submission when used in a form
- Fix a bug where the pages query would query for a field
undefined
when noadditionalPageTreeNodeFragment
is set
- Add default value
{}
forRedirectScopeInput
when no explicit scope is set to make redirects scope support backwards compatible - Add
RootBlockDataScalar
andRootBlockInputScalar
scalars to type root blocks in the GraphQL schema
Nov 15, 2022
- Add scope support for redirects (
@comet/cms-api
and@comet/cms-admin
)
- Add
useFocusAwarePolling
hook that can be used in combination withuseQuery
to only fetch when the current browser tab is focused
useSaveConflict
now only checks for conflicts when the current browser tab is focused- Add
additionalPageTreeNodeFragment
prop toCmsBlockContextProvider
that can be used to load additional page tree node fields in the page tree
Oct 17, 2022
This release marks the first public release of the CMS packages used for Comet DXP applications. See the documentation for more information.
- Add new CMS packages
@comet/blocks-api
,@comet/cms-api
,@comet/blocks-admin
,@comet/cms-admin
, and@comet/cms-site
. Review package overview for usage - Add new
@comet/cli
package to provide commonly used scripts (e.g.,generate-block-types
) to all applications - Add new
@comet/eslint-config
package to provide ESLint configs used by all packages - Add new MUI X DataGrid helper functions
- Migrate all
@comet/admin
packages to MUI 5
-
Migrate to MUI 5, following the official MUI Migration Guide
-
Install jscodeshift in your project
npm install --save-dev jscodeshift
-
Clone this repository into your project repository. If you have a monorepo, clone it into the correct subfolder
-
Migrate from styled-components to MUI's style engine
npx jscodeshift --extensions=ts,tsx --parser=tsx -t comet/codemods/3.0.0/mui-style-engine.ts src/
This release is the first stable version.
This release is the first stable version.
This release is the first stable version.
This release is the first stable version.
This release is the first stable version.
This release is the first stable version.
-
Change the minimum supported React version to 17
-
Remove
Select
component in favor of MUI's Select component -
StackBreadcrumbs
do not support MUI's Breadcrumbs props anymore -
Remove
ErrorDialog
dependency fromcreateErrorDialogApolloLink()
. Doing so eliminates the need to create the Apollo client in the React component tree, which is preferable:Before
const Providers: React.FunctionComponent = ({ children }) => { const errorDialog = useErrorDialog(); const apolloClient = new ApolloClient({ link: ApolloLink.from([ createErrorDialogApolloLink({ errorDialog }), createHttpLink({ uri: `https://anyapi.com/graphql`, }), ]), cache: new InMemoryCache(), }); return ( <OtherProviders> <ApolloProvider client={apolloClient}>{children}</ApolloProvider> </OtherProviders> ); };
After
const apolloClient = new ApolloClient({ link: ApolloLink.from([ createErrorDialogApolloLink(), createHttpLink({ uri: `https://anyapi.com/graphql`, }), ]), cache: new InMemoryCache(), }); const Providers: React.FunctionComponent = ({ children }) => { return ( <OtherProviders> <ApolloProvider client={apolloClient}>{children}</ApolloProvider> </OtherProviders> ); };
-
Rename
ErrorDialogProvider
toErrorDialogHandler
.ErrorDialogHandler
does not need to wrap the application anymore -
The default color of MUI's
Button
andIconButton
has been changed from"default"
to"primary"
. Restore the previous "default" appearance by setting thecolor
prop to"info"
-
Rename
StackBreadcrumbProps
toStackBreadcrumbsProps
-
Rename
FormSectionKey
toFormSectionClassKey
-
Remove the default clear button from
FinalFormSearchTextField
. Re-enable by using theclearable
prop
-
Expose
comet.generic.*
messages as public API throughmessages.ts
. Doing so prevents the need to translate them for every application:Before
<FormattedMessage id="comet.generic.globalContentScope" defaultMessage="Global Content" />; intl.formatMessage({ id: "comet.generic.doYouWantToSaveYourChanges", defaultMessage: "Do you want to save your changes?", });
After
import { messages } from "@comet/admin"; <FormattedMessage {...messages.globalContentScope} />; intl.formatMessage(messages.saveUnsavedChanges);
-
StackBreadcrumbs
now shows an overflow menu when its items do not fit into a single row
- Change the majority of classes used for style overrides. This may break custom styles
- Remove
showPicker
prop fromColorPicker
and show the picker by default. Hide by using thehidePicker
prop - Rename the
showClearButton
prop toclearable
inColorPicker
- Add a slider for the alpha channel, which is used when the
colorFormat
prop is set to"rgba"
- Add a standalone
ColorPicker
component for usage outside Final Form - Disable the input when the setting the
disabled
prop - Add missing focus styling to the input
- Open/close the picker when focusing/blurring the input using tab navigation
-
Rename
@comet/admin-date-picker
to@comet/admin-date-time
-
Change the internally used data picker library from react-dates to react-date-range. Props specific to react-dates will no longer have any effect
-
The date-picker & date-range-picker components require a date-fns locale that can be provided by wrapping the application with the
DateFnsLocaleProvider
and passing in the desired locale as the value.import { DateFnsLocaleProvider } from "@comet/admin-date-time"; import { enUS } from "date-fns/locale"; <DateFnsLocaleProvider value={enUS}> <App /> </DateFnsLocaleProvider>;
- Add standalone
DatePicker
andDateRangePicker
components for usage outside Final Form - Add new
TimePicker
,DateTimePicker
, andTimeRangePicker
components. Each component comes as a standalone version with a separate Final Form wrapper (FinalFormTimePicker
etc.)
- Update the theme to reflect the latest adaptations made in our applications
- Add new default styling for MUI's Chip component
This release is the first stable version.
Oct 3, 2022
- Fix a bug where
setEditorState
was incorrectly assumed to be a React state setter function
Jun 30, 2022
- Display loading and error states of a contained form in
EditDialog
via itsSaveButton
- Close
EditDialog
when a contained form is submitted viaEnter
key press - Fix
FinalFormSelect
value generic to allow simple select values such asstring
Jun 20, 2022
- Add
FinalFormAutocomplete
component (see story)
- Add
useAsyncOptionsProps
hook to allow async loading of options inFinalFormAutocomplete
andFinalFormSelect
- Add support to pass options directly via props in `FinalFormSelect (they are rendered automatically)
- Add support for custom inline styles (see story)
- Show OS-specific shortcut tooltips on MacOS
Nov 3, 2021
- Add package @comet/admin-icons
- Add a standard
Toolbar
that can be used as an application-wide element with consistent styling containing navigation, action buttons, and filters - Add the ability to customize components, similar to Material UI components. Customization can be done either globally through theme overrides and props or individually with classes
- Start docs of components and general information about the development of Comet Admin
- Implement Error Boundaries that catch errors in the component tree without crashing the application
-
Install jscodeshift in your project
npm install --save-dev jscodeshift
-
Clone this repository into your project repository. If you have a monorepo, clone it into the correct subfolder
-
Run codemods depending on usage
Remove
renderButtons
andcomponents
fromFinalForm
npx jscodeshift --extensions=ts,tsx --parser=tsx -t comet-admin/codemods/2.0.0/final-form-dissolve-final-form-save-cancel-buttons.ts src/
Remove
showBreadcrumbs
fromStack
npx jscodeshift --extensions=ts,tsx --parser=tsx -t comet-admin/codemods/2.0.0/stack-dissolve-breadcrumbs.ts src/
Remove
showBackButton
fromStack
npx jscodeshift --extensions=ts,tsx --parser=tsx -t comet-admin/codemods/2.0.0/stack-dissolve-backbutton.ts src/
Update theme
npx jscodeshift --extensions=ts,tsx --parser=tsx -t comet-admin/codemods/2.0.0/update-theme.ts src/
See an example migration here.
-
Remove
createMuiTheme
in favor ofcreateTheme
from@material-ui/core
-
Remove
VPAdminInputBase
andgetDefaultVPAdminInputStyles
, in favor of InputBase from Material UI -
Remove
renderButtons
andcomponents
props fromFinalForm
(handled by codemods) -
Remove
FinalFormTextField
in favor ofFinalFormInput
. Material UI's TextField component should not be used in Comet Admin projects as its design is incompatible with the Comet CI -
Remove
fieldContainer
prop fromField
in favor of a newvariant
prop -
Remove
FieldContainerLabelAbove
component in favor of the defaultvertical
variant. Restore the previous default layout ofField
by adding the following to the theme:{ props: { CometAdminFormFieldContainer: { variant: 'horizontal' } }, overrides: { CometAdminFormFieldContainer: { horizontal: { "& $label": { width: `${100 / 3}%` }, "& $inputContainer": { width: `${200 / 3}%` } } } } }
-
Remove default styling from
Menu
component in favor of styling the component via the theme -
Remove
permanentMenuMinWidth
prop fromMenu
in favor of a newvariant
prop, which allows for more control. For instance, varianttemporary
can be used to give some pages more space -
Remove
components.breadcrumbsContainer
prop formStack
in favor of a div that can be customized via the theme -
Remove
FixedLeftRightLayout
component -
Remove
FormPaper
component in favor of Material UI's Card component -
Change default content spacing and header height of
MasterLayout
-
Custom
headerComponent
ofMasterLayout
expects a component built using theAppHeader
system (see docs) -
Remove
hideToolbarMenuIcon
prop fromMasterLayout
as it is no longer necessary when building a custom header using theAppHeader
system -
Remove
<main>
HTML tag fromMasterLayout
in favor of newMainContent
component<MasterLayout headerComponent={AppHeader} menuComponent={AppMenu}> <Toolbar /> <MainContent>/* Main content goes here */</MainContent> </MasterLayout>
-
Remove
AppBar
insideTabs
. Restore the previous appearance by overriding theCometAdminTabs-root
class -
Remove
tabLabel
prop fromTabs
. Uselabel
instead -
RouterTabs
do not inherit Material UI's Tabs props anymore. UsetabsProps
prop to setTabs
props -
Remove
showBreadcrumbs
prop fromStack
.StackBreadcrumbs
has been added for compatibility. However, it is recommended to use the newToolbar
system (handled by codemods)<Stack topLevelTitle="Stack Nested"> <StackBreadcrumbs /> <StackSwitch> <StackPage name="page1"> <Page1 /> </StackPage> <StackPage name="page2">page2-2</StackPage> </StackSwitch> </Stack>
-
Remove
showBackButton
prop fromStack
(handled by codemods) -
Remove alternating background color from body rows in
Table
. Restore the previous appearance by adding the following styles toCometAdminTableBodyRow
:odd: { backgroundColor: neutrals[50], }
-
Remove background color from table head in
Table
. Restore the previous appearance by adding the following styles toMuiTableHead
:root: { backgroundColor: neutrals[100], }
-
TableDndOrder
requires new peer dependencies and aDndProvider
setup in the applicationInstall peer dependencies in your application
npm install react-dnd@"~14" react-dnd-html5-backend@"~14"
Wrap your application in a
DnDProvider
import { DndProvider } from "react-dnd"; import { HTML5Backend } from "react-dnd-html5-backend"; export function App() { return <DndProvider backend={HTML5Backend}>...</DndProvider>; }
- Add
ClearInputButton
component, which can be used as anendAdornment
to clear inputs - Add
variant
prop toField
to control the positioning of label and input - Add
headerHeight
prop toMasterLayout
which child components can use to position themselves - Add
onAfterSubmit
callback toFinalForm
- Add
useStoredState
hook to store state in local storage or session storage - Add
FinalFormRangeInput
component - Add
SplitButton
component to combine buttons in a button group - Add
SaveButton
component, which handles and displays save state (idle, saving, success and error) - Add
SnackbarProvider
,useSnackbarApi
hook andUndoSnackbar
- Add
FinalFormSaveCancelButtonsLegacy
as drop-in replacement for removed cancel and save buttons inFinalForm
- Add
PrettyBytes
component for formatting byte values, for instance, file sizes - Add
validateWarning
validator toField
andFinalForm
- Add
open
andonOpenChange
props toAppHeaderDropdown
to control the open state - Add
getTargetUrl()
toStackSwitchApi
- Add
StackLink
component for navigating within aStack
via hyperlinks - Allow
boolean | undefined | null
as children ofRouterTabs
- Expose
selectionApi
throughuseEditDialog
- Rename
VPAdminColorPicker
toCometAdminColorPicker
- Remove
clearButton
andclearIcon
theme classes from the color picker in favor of a newClearInputButton
component - The clear button is hidden by default
- Allow custom icons/adornments for color input
- The clear button is now optional (using the
showClearButton
prop)
- Rename theme key from
VPAdminSelect
toCometAdminSelect
- Removed
rte
key from theme. RTE colors should be defined using by overridingCometAdminRte
instead{ props: { CometAdminRte: { colors: { // Colors go here } } } }
Note: prior to 2.x, packages have been released independently, therefore having separate version numbers and changelogs
Mar 4, 2021
This is a bugfix/maintenance release.
- Handle submit error in EditDialog (#209)
- Pass
innerRef
fromTableBodyRow
tosc.TableBodyRow
- The
styled-components
peer dependency has been changed to^4.0.0 || ^5.0.0
to include v5. - The
graphql
peer dependency has been changed to^14.0.0 || ^15.0.0
to include v14.
Feb 23, 2021
- RouterPrompt: comet-admin's react-router Prompt Component Wrapper (that adds support for multiple Prompt instances) adds missing message callback parameters for full react-router compatibility
- TotalCount of the tables Pagination is now formatted with FormattedNumber from react-intl.
- Switch from Yarn to NPM v7 (updated all dependencies)
Jan 12, 2021
This package has been renamed to @comet/admin
Jan 11, 2021
This is a bugfix/maintenance release.
- Added migration guide for 1.0 update https://github.com/vivid-planet/comet-admin/blob/master/CHANGELOG.md#migration-guide
- Render MenuItem in children of Route (#277)
- Fix ability to open temporary menu (#279)
- dependency-cleanup (#278)
Dec 18, 2020
This version is the first stable version.
- Renamed from react-admin to comet-admin (!!!)
- Made comet-admin translatable with react-intl
- Updated apollo
- Restructured packages:
- Consolidated react-admin-core, fetch-provider, file-icons, react-admin-final-form-material-ui, react-admin-form, react-admin-layout and react-admin-mui into comet-admin
- Moved react-select to own package comet-admin-react-select
- Removed date-fns for date formatting in favor of react-intl
- Removed exports for styled and css, use styled-components directly
- FinalForm wrappers (e.g. Checkbox, Input, ...) are now prefixed with FinalForm
- Switched form TSLint to ESLint
Clone this repository into your project repository. If you have a monorepo, you have to clone it into the right subfolder.
An example can be found here.
Package Renaming
Automatic migrations using codeshift are available (use -d for dry-run):
npx jscodeshift --extensions=ts --parser=ts -t comet-admin/codemods/1.0.0/package-renames.ts src/
npx jscodeshift --extensions=tsx --parser=tsx -t comet-admin/codemods/1.0.0/package-renames.ts src/
Styled Components
Automatic migrations using codeshift are available (use -d for dry-run):
npx jscodeshift --extensions=ts --parser=ts -t comet-admin/codemods/1.0.0/styled-components.ts src/
npx jscodeshift --extensions=tsx --parser=tsx -t comet-admin/codemods/1.0.0/styled-components.ts src/
Apollo-Client
Detailed instructions can be found here. Automatic migrations using codeshift are available (use -d for dry-run):
git clone https://github.com/apollographql/apollo-client.git
npx jscodeshift -t apollo-client/scripts/codemods/ac2-to-ac3/imports.js --extensions ts --parser ts src/
npx jscodeshift -t apollo-client/scripts/codemods/ac2-to-ac3/imports.js --extensions tsx --parser tsx src/
Component-Renames
FinalForm fields are now prefixed with FinalForm. Automatic migrations using codeshift are available (use -d for dry-run):
npx jscodeshift --extensions=ts --parser=ts -t comet-admin/codemods/1.0.0/component-renames.ts src/
npx jscodeshift --extensions=tsx --parser=tsx -t comet-admin/codemods/1.0.0/component-renames.ts src/
FormatLocalized
FormatLocalized
has been removed in favor of FormattedDate
and FormattedTime
of react-intl. An example migration can look like this:
Before:
<FormatLocalized date={parseISO(publishDate)} format="dd.MM.yyyy - HH:mm" />
After:
<FormattedDate value={date} day="2-digit" month="2-digit" year="numeric" />
{" - "}
<FormattedTime value={date} />
As an alternative, FormatLocalized can be created inside the project by using:
import { format } from "date-fns";
import * as React from "react";
import { useIntl } from "react-intl";
interface IProps {
format: string;
date: Date | number;
}
export const FormatLocalized: React.FunctionComponent<IProps> = ({ date, format: formatString }) => {
const intl = useIntl();
const locale = intl.locale;
return <>{format(date, formatString, { locale })}</>;
};
However, imports need to be adjusted manually.
Internationalization
Strings are now prepared for internationalization. The default language is switched from German to English. A sample setup can be found here.
Fix Eslint Errors
npx eslint --ext .ts,.tsx,.js,.jsx,.json,.md --fix src/
Feb 23, 2021
use fixed version of react-color Switch from Yarn to NPM v7 (updated all dependencies)
Jan 12, 2021
This package has been renamed to @comet/admin-color-picker
Jan 11, 2021
This is a bugfix/maintenance release
Dec 18, 2020
This version is the first stable version.
Feb 23, 2021
Switch from Yarn to NPM v7 (updated all dependencies)
Jan 12, 2021
This package has been renamed to @comet/admin-date-picker
Jan 11, 2021
This is a bugfix/maintenance release
Dec 18, 2020
This version is the first stable version.
Feb 23, 2021
Switch from Yarn to NPM v7 (updated all dependencies)
Jan 12, 2021
This package has been renamed to @comet/admin-react-select
Jan 11, 2021
This is a bugfix/maintenance release
Dec 18, 2020
This version is the first stable version.
Feb 23, 2021
- Make controls for RTE sticky
- Use mui-grey-palette for default colors
- Remove min-width of link buttons (MuiButtonGroup)
- Switch from Yarn to NPM v7 (updated all dependencies)
Jan 22, 2021
- Add default styles (MUI) to built-in blocktypes
- Make built-in blocktypes styleable
- Supports disabled-attribute
- Rename prop-name "customBlockMap" to "blocktypeMap", deprecate prop-name "customBlockMap"
- Rename prop-name "Icon" to "icon", deprecate prop-name "Icon"
Jan 12, 2021
This package has been renamed to @comet/admin-rte
Jan 11, 2021
This is a bugfix/maintenance release
Dec 22, 2020
- Add
blockquote
support
Dec 18, 2020
This version is the first stable version.