Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: integrations form #4655

Merged
merged 5 commits into from
Sep 11, 2023
Merged

Fix: integrations form #4655

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2333d2e
fix: integrations form submit
Tymek Sep 11, 2023
d087dec
refactor: integrations list
Tymek Sep 11, 2023
588c953
negative feature flag on routing
Tymek Sep 11, 2023
1dc615d
fix: routes snapshot
Tymek Sep 11, 2023
3d44bc2
fix: formatting
Tymek Sep 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions frontend/src/component/common/util.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,12 @@ export const filterByConfig =
return Boolean(flags[r.flag]);
}

if (r.notFlag) {
const flags = config.flags as unknown as Record<string, boolean>;

return !(flags[r.notFlag] === true);
}

if (r.configFlag) {
// Check if the route's `configFlag` is enabled in IUiConfig.
return Boolean(config[r.configFlag]);
Expand Down
11 changes: 6 additions & 5 deletions frontend/src/component/integrations/IntegrationForm/IntegrationForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
import { IntegrationDelete } from './IntegrationDelete/IntegrationDelete';
import { IntegrationStateSwitch } from './IntegrationStateSwitch/IntegrationStateSwitch';
import { capitalizeFirst } from 'utils/capitalizeFirst';
import { useUiFlag } from 'hooks/useUiFlag';

type IntegrationFormProps = {
provider?: AddonTypeSchema;
Expand Down Expand Up @@ -75,6 +76,7 @@ export const IntegrationForm: VFC<IntegrationFormProps> = ({
label: event,
}));
const { uiConfig } = useUiConfig();
const integrationsRework = useUiFlag('integrationsRework');
const [formValues, setFormValues] = useState(initialValues);
const [errors, setErrors] = useState<{
containsErrors: boolean;
Expand Down Expand Up @@ -218,14 +220,14 @@ export const IntegrationForm: VFC<IntegrationFormProps> = ({
try {
if (editMode) {
await updateAddon(formValues as AddonSchema);
navigate('/addons');
navigate(integrationsRework ? '/integrations' : '/addons');
setToastData({
type: 'success',
title: 'Addon updated successfully',
});
} else {
await createAddon(formValues as Omit<AddonSchema, 'id'>);
navigate('/addons');
navigate(integrationsRework ? '/integrations' : '/addons');
setToastData({
type: 'success',
confetti: true,
Expand Down Expand Up @@ -271,6 +273,7 @@ export const IntegrationForm: VFC<IntegrationFormProps> = ({
color="primary"
variant="contained"
permission={editMode ? UPDATE_ADDON : CREATE_ADDON}
onClick={onSubmit}
>
{submitText}
</PermissionButton>
Expand Down Expand Up @@ -382,9 +385,7 @@ export const IntegrationForm: VFC<IntegrationFormProps> = ({
</div>
</StyledConfigurationSection>
<ConditionallyRender
condition={Boolean(
uiConfig?.flags?.integrationsRework && editMode
)}
condition={Boolean(integrationsRework && editMode)}
show={() => (
<>
<Divider />
Expand Down
26 changes: 10 additions & 16 deletions ...rc/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { type VFC } from 'react';
import { Typography, styled } from '@mui/material';
import { Box, Typography, styled } from '@mui/material';
import type { AddonTypeSchema } from 'openapi';
import useLoading from 'hooks/useLoading';
import { PageContent } from 'component/common/PageContent/PageContent';
Expand Down Expand Up @@ -58,23 +58,16 @@ export const AvailableIntegrations: VFC<IAvailableIntegrationsProps> = ({
>
<StyledContainer>
<StyledSection>
<div>
<Typography component="h3" variant="h2">
Title
</Typography>
<Typography variant="body2" color="text.secondary">
Description
</Typography>
</div>
<StyledCardsGrid>
{providers?.map(
({ name, displayName, description }) => (
({ name, displayName, description, deprecated }) => (
<IntegrationCard
key={name}
icon={name}
title={displayName || name}
description={description}
link={`/integrations/create/${name}`}
deprecated={deprecated}
/>
)
)}
Expand Down Expand Up @@ -109,16 +102,17 @@ export const AvailableIntegrations: VFC<IAvailableIntegrationsProps> = ({
icon="unleash"
title="Unleash Edge"
description="Unleash Edge is built to help you scale Unleash. As a successor of Unleash Proxy it's even faster and more versitile."
link="/integrations/create/unleash-proxy"
link="/integrations/view/edge"
configureActionText="Learn more"
/>
<IntegrationCard
icon="unleash"
title="Unleash Proxy"
description="The Unleash Proxy is a lightweight, stateless proxy that sits between your Unleash client SDKs and the Unleash API."
link="/integrations/create/unleash-proxy"
link="https://docs.getunleash.io/reference/unleash-proxy"
configureActionText="View documentation"
deprecated="Try Unleash Edge instead. It has all the features of Unleash Proxy and more."
isExternal
/>
</StyledCardsGrid>
</StyledSection>
Expand All @@ -140,15 +134,15 @@ export const AvailableIntegrations: VFC<IAvailableIntegrationsProps> = ({
</a>
</Typography>
</div>
<div>
<Box sx={theme => ({ marginTop: theme.spacing(2) })}>
Copy link
Contributor

@sjaanus sjaanus Sep 11, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Better as styled component, since you use the same box twice.

<Typography component="h4" variant="h4">
Server-side SDKs
</Typography>
<Typography variant="body2" color="text.secondary">
Server-side clients run on your server and
communicate directly with your Unleash instance.
</Typography>
</div>
</Box>
<StyledCardsGrid small>
{serverSdks?.map(
({
Expand All @@ -169,7 +163,7 @@ export const AvailableIntegrations: VFC<IAvailableIntegrationsProps> = ({
)
)}
</StyledCardsGrid>
<div>
<Box sx={theme => ({ marginTop: theme.spacing(2) })}>
<Typography component="h4" variant="h4">
Client-side SDKs
</Typography>
Expand All @@ -192,7 +186,7 @@ export const AvailableIntegrations: VFC<IAvailableIntegrationsProps> = ({
</a>
, but not to the regular Unleash client API.
</Typography>
</div>
</Box>
<StyledCardsGrid small>
{clientSdks?.map(
({
Expand Down
2 changes: 2 additions & 0 deletions frontend/src/component/menu/routes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -327,6 +327,7 @@ export const routes: IRoute[] = [
// TODO: use AddonRedirect after removing `integrationsRework` menu flag
hidden: false,
type: 'protected',
notFlag: 'integrationsRework',
menu: { mobile: true, advanced: true },
// TODO: remove 'addons' from menu after removing `integrationsRework` menu flag
},
Expand Down Expand Up @@ -508,6 +509,7 @@ export const getCondensedRoutes = (routes: IRoute[]): INavigationMenuItem[] => {
title: route.title,
menu: route.menu,
configFlag: route.configFlag,
notFlag: route.notFlag,
};
});
};
Expand Down
2 changes: 2 additions & 0 deletions frontend/src/interfaces/route.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export interface IRoute {
layout?: string;
parent?: string;
flag?: keyof UiFlags;
notFlag?: keyof UiFlags;
configFlag?: keyof IUiConfig;
hidden?: boolean;
enterprise?: boolean;
Expand All @@ -21,6 +22,7 @@ export interface INavigationMenuItem {
title: string;
menu: IRouteMenu;
flag?: keyof UiFlags;
notFlag?: keyof UiFlags;
configFlag?: keyof IUiConfig;
group?: string;
}
Expand Down