diff --git a/frontend/src/component/App.tsx b/frontend/src/component/App.tsx index ede602779a..778ca85f06 100644 --- a/frontend/src/component/App.tsx +++ b/frontend/src/component/App.tsx @@ -20,8 +20,8 @@ import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import MaintenanceBanner from './maintenance/MaintenanceBanner'; import { styled } from '@mui/material'; import { InitialRedirect } from './InitialRedirect'; -import { InternalMessageBanners } from './messageBanners/internalMessageBanners/InternalMessageBanners'; -import { ExternalMessageBanners } from './messageBanners/externalMessageBanners/ExternalMessageBanners'; +import { InternalBanners } from './banners/internalBanners/InternalBanners'; +import { ExternalBanners } from './banners/externalBanners/ExternalBanners'; const StyledContainer = styled('div')(() => ({ '& ul': { @@ -65,8 +65,8 @@ export const App = () => { )} show={} /> - - + + diff --git a/frontend/src/component/messageBanners/MessageBanner/MessageBanner.tsx b/frontend/src/component/banners/Banner/Banner.tsx similarity index 89% rename from frontend/src/component/messageBanners/MessageBanner/MessageBanner.tsx rename to frontend/src/component/banners/Banner/Banner.tsx index 2e7a378329..757d97f047 100644 --- a/frontend/src/component/messageBanners/MessageBanner/MessageBanner.tsx +++ b/frontend/src/component/banners/Banner/Banner.tsx @@ -7,10 +7,10 @@ import { import { styled, Icon, Link } from '@mui/material'; import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; import { useNavigate } from 'react-router-dom'; -import { MessageBannerDialog } from './MessageBannerDialog/MessageBannerDialog'; +import { BannerDialog } from './BannerDialog/BannerDialog'; import { useState } from 'react'; import ReactMarkdown from 'react-markdown'; -import { BannerVariant, IMessageBanner } from 'interfaces/messageBanner'; +import { BannerVariant, IBanner } from 'interfaces/banner'; const StyledBar = styled('aside', { shouldForwardProp: (prop) => prop !== 'variant' && prop !== 'sticky', @@ -43,11 +43,11 @@ const StyledIcon = styled('div', { color: theme.palette[variant].main, })); -interface IMessageBannerProps { - messageBanner: IMessageBanner; +interface IBannerProps { + banner: IBanner; } -export const MessageBanner = ({ messageBanner }: IMessageBannerProps) => { +export const Banner = ({ banner }: IBannerProps) => { const [open, setOpen] = useState(false); const { @@ -60,7 +60,7 @@ export const MessageBanner = ({ messageBanner }: IMessageBannerProps) => { plausibleEvent, dialogTitle, dialog, - } = messageBanner; + } = banner; return ( @@ -75,13 +75,13 @@ export const MessageBanner = ({ messageBanner }: IMessageBannerProps) => { > {linkText} - {dialog!} - + ); }; @@ -127,7 +127,7 @@ const BannerButton = ({ const trackEvent = () => { if (!plausibleEvent) return; - tracker.trackEvent('message_banner', { + tracker.trackEvent('banner', { props: { event: plausibleEvent }, }); }; diff --git a/frontend/src/component/messageBanners/MessageBanner/MessageBannerDialog/MessageBannerDialog.tsx b/frontend/src/component/banners/Banner/BannerDialog/BannerDialog.tsx similarity index 87% rename from frontend/src/component/messageBanners/MessageBanner/MessageBannerDialog/MessageBannerDialog.tsx rename to frontend/src/component/banners/Banner/BannerDialog/BannerDialog.tsx index 49a32e6b6c..8d92557cb0 100644 --- a/frontend/src/component/messageBanners/MessageBanner/MessageBannerDialog/MessageBannerDialog.tsx +++ b/frontend/src/component/banners/Banner/BannerDialog/BannerDialog.tsx @@ -8,19 +8,19 @@ const StyledReactMarkdown = styled(ReactMarkdown)(({ theme }) => ({ }, })); -interface IMessageBannerDialogProps { +interface IBannerDialogProps { title: string; open: boolean; setOpen: React.Dispatch>; children: string; } -export const MessageBannerDialog = ({ +export const BannerDialog = ({ open, setOpen, title, children, -}: IMessageBannerDialogProps) => { +}: IBannerDialogProps) => { return ( { + const { uiConfig } = useUiConfig(); + + const bannerVariantFromMessageBannerFlag = useVariant( + uiConfig.flags.messageBanner, + ); + const bannerVariantFromBannerFlag = useVariant( + uiConfig.flags.banner, + ); + + const bannerVariant = + bannerVariantFromMessageBannerFlag || bannerVariantFromBannerFlag || []; + + const banners: IBanner[] = Array.isArray(bannerVariant) + ? bannerVariant + : [bannerVariant]; + + return ( + <> + {banners.map((banner) => ( + + ))} + + ); +}; diff --git a/frontend/src/component/banners/internalBanners/InternalBanners.tsx b/frontend/src/component/banners/internalBanners/InternalBanners.tsx new file mode 100644 index 0000000000..3db8dbd90a --- /dev/null +++ b/frontend/src/component/banners/internalBanners/InternalBanners.tsx @@ -0,0 +1,14 @@ +import { Banner } from 'component/banners/Banner/Banner'; +import { useBanners } from 'hooks/api/getters/useBanners/useBanners'; + +export const InternalBanners = () => { + const { banners } = useBanners(); + + return ( + <> + {banners.map((banner) => ( + + ))} + + ); +}; diff --git a/frontend/src/component/messageBanners/externalMessageBanners/ExternalMessageBanners.tsx b/frontend/src/component/messageBanners/externalMessageBanners/ExternalMessageBanners.tsx deleted file mode 100644 index ee991ca89c..0000000000 --- a/frontend/src/component/messageBanners/externalMessageBanners/ExternalMessageBanners.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { MessageBanner } from 'component/messageBanners/MessageBanner/MessageBanner'; -import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; -import { useVariant } from 'hooks/useVariant'; -import { IMessageBanner } from 'interfaces/messageBanner'; - -export const ExternalMessageBanners = () => { - const { uiConfig } = useUiConfig(); - - const messageBannerVariant = - useVariant( - uiConfig.flags.messageBanner, - ) || []; - - const messageBanners: IMessageBanner[] = Array.isArray(messageBannerVariant) - ? messageBannerVariant - : [messageBannerVariant]; - - return ( - <> - {messageBanners.map((messageBanner) => ( - - ))} - - ); -}; diff --git a/frontend/src/component/messageBanners/internalMessageBanners/InternalMessageBanners.tsx b/frontend/src/component/messageBanners/internalMessageBanners/InternalMessageBanners.tsx deleted file mode 100644 index f84d17c597..0000000000 --- a/frontend/src/component/messageBanners/internalMessageBanners/InternalMessageBanners.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { MessageBanner } from 'component/messageBanners/MessageBanner/MessageBanner'; -import { useMessageBanners } from 'hooks/api/getters/useMessageBanners/useMessageBanners'; - -export const InternalMessageBanners = () => { - const { messageBanners } = useMessageBanners(); - - return ( - <> - {messageBanners.map((messageBanner) => ( - - ))} - - ); -}; diff --git a/frontend/src/hooks/api/actions/useMessageBannersApi/useMessageBannersApi.ts b/frontend/src/hooks/api/actions/useMessageBannersApi/useMessageBannersApi.ts index 384cba2402..c65e93cbb9 100644 --- a/frontend/src/hooks/api/actions/useMessageBannersApi/useMessageBannersApi.ts +++ b/frontend/src/hooks/api/actions/useMessageBannersApi/useMessageBannersApi.ts @@ -1,27 +1,22 @@ -import { IInternalMessageBanner } from 'interfaces/messageBanner'; +import { IInternalBanner } from 'interfaces/banner'; import useAPI from '../useApi/useApi'; -const ENDPOINT = 'api/admin/message-banners'; +const ENDPOINT = 'api/admin/banners'; -type AddOrUpdateMessageBanner = Omit< - IInternalMessageBanner, - 'id' | 'createdAt' ->; +type AddOrUpdateBanner = Omit; -export const useMessageBannersApi = () => { +export const useBannersApi = () => { const { loading, makeRequest, createRequest, errors } = useAPI({ propagateErrors: true, }); - const addMessageBanner = async ( - messageBanner: AddOrUpdateMessageBanner, - ) => { - const requestId = 'addMessageBanner'; + const addBanner = async (banner: AddOrUpdateBanner) => { + const requestId = 'addBanner'; const req = createRequest( ENDPOINT, { method: 'POST', - body: JSON.stringify(messageBanner), + body: JSON.stringify(banner), }, requestId, ); @@ -30,16 +25,16 @@ export const useMessageBannersApi = () => { return response.json(); }; - const updateMessageBanner = async ( - messageBannerId: number, - messageBanner: AddOrUpdateMessageBanner, + const updateBanner = async ( + bannerId: number, + banner: AddOrUpdateBanner, ) => { - const requestId = 'updateMessageBanner'; + const requestId = 'updateBanner'; const req = createRequest( - `${ENDPOINT}/${messageBannerId}`, + `${ENDPOINT}/${bannerId}`, { method: 'PUT', - body: JSON.stringify(messageBanner), + body: JSON.stringify(banner), }, requestId, ); @@ -47,10 +42,10 @@ export const useMessageBannersApi = () => { await makeRequest(req.caller, req.id); }; - const removeMessageBanner = async (messageBannerId: number) => { - const requestId = 'removeMessageBanner'; + const removeBanner = async (bannerId: number) => { + const requestId = 'removeBanner'; const req = createRequest( - `${ENDPOINT}/${messageBannerId}`, + `${ENDPOINT}/${bannerId}`, { method: 'DELETE' }, requestId, ); @@ -59,9 +54,9 @@ export const useMessageBannersApi = () => { }; return { - addMessageBanner, - updateMessageBanner, - removeMessageBanner, + addBanner, + updateBanner, + removeBanner, errors, loading, }; diff --git a/frontend/src/hooks/api/getters/useMessageBanners/useMessageBanners.ts b/frontend/src/hooks/api/getters/useBanners/useBanners.ts similarity index 62% rename from frontend/src/hooks/api/getters/useMessageBanners/useMessageBanners.ts rename to frontend/src/hooks/api/getters/useBanners/useBanners.ts index 0bfdbd92fa..f6e6399fb6 100644 --- a/frontend/src/hooks/api/getters/useMessageBanners/useMessageBanners.ts +++ b/frontend/src/hooks/api/getters/useBanners/useBanners.ts @@ -4,25 +4,24 @@ import handleErrorResponses from '../httpErrorResponseHandler'; import { useConditionalSWR } from '../useConditionalSWR/useConditionalSWR'; import useUiConfig from '../useUiConfig/useUiConfig'; import { useUiFlag } from 'hooks/useUiFlag'; -import { IInternalMessageBanner } from 'interfaces/messageBanner'; +import { IInternalBanner } from 'interfaces/banner'; -const ENDPOINT = 'api/admin/message-banners'; +const ENDPOINT = 'api/admin/banners'; -export const useMessageBanners = () => { +export const useBanners = () => { const { isEnterprise } = useUiConfig(); - const internalMessageBanners = useUiFlag('internalMessageBanners'); + const bannersEnabled = useUiFlag('banners'); const { data, error, mutate } = useConditionalSWR( - isEnterprise() && internalMessageBanners, - { messageBanners: [] }, + isEnterprise() && bannersEnabled, + { banners: [] }, formatApiPath(ENDPOINT), fetcher, ); return useMemo( () => ({ - messageBanners: (data?.messageBanners ?? - []) as IInternalMessageBanner[], + banners: (data?.banners ?? []) as IInternalBanner[], loading: !error && !data, refetch: () => mutate(), error, @@ -33,6 +32,6 @@ export const useMessageBanners = () => { const fetcher = (path: string) => { return fetch(path) - .then(handleErrorResponses('Message Banners')) + .then(handleErrorResponses('Banners')) .then((res) => res.json()); }; diff --git a/frontend/src/hooks/usePlausibleTracker.ts b/frontend/src/hooks/usePlausibleTracker.ts index 97a80cd18f..00f1a60a00 100644 --- a/frontend/src/hooks/usePlausibleTracker.ts +++ b/frontend/src/hooks/usePlausibleTracker.ts @@ -15,7 +15,7 @@ export type CustomEvents = | 'change_request' | 'favorite' | 'maintenance' - | 'message_banner' + | 'banner' | 'hidden_environment' | 'project_overview' | 'suggest_tags' diff --git a/frontend/src/interfaces/messageBanner.ts b/frontend/src/interfaces/banner.ts similarity index 77% rename from frontend/src/interfaces/messageBanner.ts rename to frontend/src/interfaces/banner.ts index 4cd168c88a..c7bbb8a38f 100644 --- a/frontend/src/interfaces/messageBanner.ts +++ b/frontend/src/interfaces/banner.ts @@ -1,6 +1,6 @@ export type BannerVariant = 'warning' | 'info' | 'error' | 'success'; -export interface IMessageBanner { +export interface IBanner { message: string; variant?: BannerVariant; sticky?: boolean; @@ -12,7 +12,7 @@ export interface IMessageBanner { dialog?: string; } -export interface IInternalMessageBanner extends IMessageBanner { +export interface IInternalBanner extends IBanner { id: number; enabled: boolean; createdAt: string; diff --git a/frontend/src/interfaces/uiConfig.ts b/frontend/src/interfaces/uiConfig.ts index e227653e3d..2d825365c1 100644 --- a/frontend/src/interfaces/uiConfig.ts +++ b/frontend/src/interfaces/uiConfig.ts @@ -47,6 +47,7 @@ export type UiFlags = { embedProxyFrontend?: boolean; maintenanceMode?: boolean; messageBanner?: Variant; + banner?: Variant; featuresExportImport?: boolean; caseInsensitiveInOperators?: boolean; proPlanAutoCharge?: boolean; @@ -69,7 +70,7 @@ export type UiFlags = { accessOverview?: boolean; datadogJsonTemplate?: boolean; dependentFeatures?: boolean; - internalMessageBanners?: boolean; + banners?: boolean; disableEnvsOnRevive?: boolean; playgroundImprovements?: boolean; }; diff --git a/src/lib/__snapshots__/create-config.test.ts.snap b/src/lib/__snapshots__/create-config.test.ts.snap index a2a9656ca2..8475acd964 100644 --- a/src/lib/__snapshots__/create-config.test.ts.snap +++ b/src/lib/__snapshots__/create-config.test.ts.snap @@ -77,6 +77,7 @@ exports[`should create default config 1`] = ` "flags": { "accessOverview": false, "anonymiseEventLog": false, + "banners": false, "caseInsensitiveInOperators": false, "customRootRolesKillSwitch": false, "datadogJsonTemplate": false, @@ -93,7 +94,6 @@ exports[`should create default config 1`] = ` "featuresExportImport": true, "filterInvalidClientMetrics": false, "googleAuthEnabled": false, - "internalMessageBanners": false, "lastSeenByEnvironment": false, "maintenanceMode": false, "messageBanner": { @@ -122,6 +122,7 @@ exports[`should create default config 1`] = ` "experiments": { "accessOverview": false, "anonymiseEventLog": false, + "banners": false, "caseInsensitiveInOperators": false, "customRootRolesKillSwitch": false, "datadogJsonTemplate": false, @@ -138,7 +139,6 @@ exports[`should create default config 1`] = ` "featuresExportImport": true, "filterInvalidClientMetrics": false, "googleAuthEnabled": false, - "internalMessageBanners": false, "lastSeenByEnvironment": false, "maintenanceMode": false, "messageBanner": { diff --git a/src/lib/types/experimental.ts b/src/lib/types/experimental.ts index e663acb270..afbeb9b91f 100644 --- a/src/lib/types/experimental.ts +++ b/src/lib/types/experimental.ts @@ -34,8 +34,7 @@ export type IFlagKey = | 'datadogJsonTemplate' | 'disableMetrics' | 'useLastSeenRefactor' - | 'internalMessageBanners' - | 'internalMessageBanner' + | 'banners' | 'separateAdminClientApi' | 'disableEnvsOnRevive' | 'playgroundImprovements'; @@ -162,8 +161,8 @@ const flags: IFlags = { process.env.UNLEASH_EXPERIMENTAL_USE_LAST_SEEN_REFACTOR, false, ), - internalMessageBanners: parseEnvVarBoolean( - process.env.UNLEASH_EXPERIMENTAL_INTERNAL_MESSAGE_BANNERS, + banners: parseEnvVarBoolean( + process.env.UNLEASH_EXPERIMENTAL_BANNERS, false, ), separateAdminClientApi: parseEnvVarBoolean( diff --git a/src/migrations/20231019110154-rename-message-banners-table-to-banners.js b/src/migrations/20231019110154-rename-message-banners-table-to-banners.js new file mode 100644 index 0000000000..460877c56b --- /dev/null +++ b/src/migrations/20231019110154-rename-message-banners-table-to-banners.js @@ -0,0 +1,9 @@ +'use strict'; + +exports.up = function (db, cb) { + db.runSql(`ALTER TABLE message_banners RENAME TO banners`, cb); +}; + +exports.down = function (db, cb) { + db.runSql(`ALTER TABLE banners RENAME TO message_banners`, cb); +};