Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-23 00:22:19 +01:00
Code Issues Projects Releases Wiki Activity

refactor: rename message banners to banners (#5098)

Browse Source 
https://linear.app/unleash/issue/2-1531/rename-message-banners-to-banners

This renames "message banners" to "banners".

I also added support for external banners coming from a `banner` flag
instead of only `messageBanner` flag, so we can eventually migrate to
the new one in the future if we want.
This commit is contained in:
Nuno Góis 2023-10-19 13:18:25 +01:00 committed by GitHub
parent 3d9f31f839
commit 957546e305
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 106 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/component/App.tsx
View File

@ -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={<MaintenanceBanner />}
/>
<ExternalMessageBanners />
<InternalMessageBanners />
<ExternalBanners />
<InternalBanners />
<StyledContainer>
<ToastRenderer />
<Routes>

18
frontend/src/component/messageBanners/MessageBanner/MessageBanner.tsx → frontend/src/component/banners/Banner/Banner.tsx
View File

@ -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 (
<StyledBar variant={variant} sticky={sticky}>
@ -75,13 +75,13 @@ export const MessageBanner = ({ messageBanner }: IMessageBannerProps) => {
>
{linkText}
</BannerButton>
<MessageBannerDialog
<BannerDialog
open={open}
setOpen={setOpen}
title={dialogTitle || linkText}
>
{dialog!}
</MessageBannerDialog>
</BannerDialog>
</StyledBar>
);
};
@ -127,7 +127,7 @@ const BannerButton = ({
const trackEvent = () => {
if (!plausibleEvent) return;
tracker.trackEvent('message_banner', {
tracker.trackEvent('banner', {
props: { event: plausibleEvent },
});
};

6
frontend/src/component/messageBanners/MessageBanner/MessageBannerDialog/MessageBannerDialog.tsx → frontend/src/component/banners/Banner/BannerDialog/BannerDialog.tsx
View File

@ -8,19 +8,19 @@ const StyledReactMarkdown = styled(ReactMarkdown)(({ theme }) => ({
},
}));
interface IMessageBannerDialogProps {
interface IBannerDialogProps {
title: string;
open: boolean;
setOpen: React.Dispatch<React.SetStateAction<boolean>>;
children: string;
}
export const MessageBannerDialog = ({
export const BannerDialog = ({
open,
setOpen,
title,
children,
}: IMessageBannerDialogProps) => {
}: IBannerDialogProps) => {
return (
<Dialogue
title={title}

30
frontend/src/component/banners/externalBanners/ExternalBanners.tsx Normal file
View File

@ -0,0 +1,30 @@
import { Banner } from 'component/banners/Banner/Banner';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { useVariant } from 'hooks/useVariant';
import { IBanner } from 'interfaces/banner';
export const ExternalBanners = () => {
const { uiConfig } = useUiConfig();
const bannerVariantFromMessageBannerFlag = useVariant<IBanner | IBanner[]>(
uiConfig.flags.messageBanner,
);
const bannerVariantFromBannerFlag = useVariant<IBanner | IBanner[]>(
uiConfig.flags.banner,
);
const bannerVariant =
bannerVariantFromMessageBannerFlag || bannerVariantFromBannerFlag || [];
const banners: IBanner[] = Array.isArray(bannerVariant)
? bannerVariant
: [bannerVariant];
return (
<>
{banners.map((banner) => (
<Banner key={banner.message} banner={banner} />
))}
</>
);
};

14
frontend/src/component/banners/internalBanners/InternalBanners.tsx Normal file
View File

@ -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) => (
<Banner key={banner.id} banner={banner} />
))}
</>
);
};

28
frontend/src/component/messageBanners/externalMessageBanners/ExternalMessageBanners.tsx
View File

@ -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<IMessageBanner | IMessageBanner[]>(
uiConfig.flags.messageBanner,
) || [];
const messageBanners: IMessageBanner[] = Array.isArray(messageBannerVariant)
? messageBannerVariant
: [messageBannerVariant];
return (
<>
{messageBanners.map((messageBanner) => (
<MessageBanner
key={messageBanner.message}
messageBanner={messageBanner}
/>
))}
</>
);
};

17
frontend/src/component/messageBanners/internalMessageBanners/InternalMessageBanners.tsx
View File

@ -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) => (
<MessageBanner
key={messageBanner.id}
messageBanner={messageBanner}
/>
))}
</>
);
};

43
frontend/src/hooks/api/actions/useMessageBannersApi/useMessageBannersApi.ts
View File

@ -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<IInternalBanner, 'id' | 'createdAt'>;
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,
};

17
frontend/src/hooks/api/getters/useMessageBanners/useMessageBanners.ts → frontend/src/hooks/api/getters/useBanners/useBanners.ts
View File

@ -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());
};

2
frontend/src/hooks/usePlausibleTracker.ts
View File

@ -15,7 +15,7 @@ export type CustomEvents =
| 'change_request'
| 'favorite'
| 'maintenance'
| 'message_banner'
| 'banner'
| 'hidden_environment'
| 'project_overview'
| 'suggest_tags'

4
frontend/src/interfaces/messageBanner.ts → frontend/src/interfaces/banner.ts
View File

@ -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;

3
frontend/src/interfaces/uiConfig.ts
View File

@ -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;
};

4
src/lib/__snapshots__/create-config.test.ts.snap
View File

@ -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": {

7
src/lib/types/experimental.ts
View File

@ -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(

9
src/migrations/20231019110154-rename-message-banners-table-to-banners.js Normal file
View File

@ -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);
};