diff --git a/frontend/src/container/Licenses/ApplyLicenseForm.tsx b/frontend/src/container/Licenses/ApplyLicenseForm.tsx index 898ae6d78c..858bf38d54 100644 --- a/frontend/src/container/Licenses/ApplyLicenseForm.tsx +++ b/frontend/src/container/Licenses/ApplyLicenseForm.tsx @@ -1,15 +1,30 @@ import { Button, Input, notification } from 'antd'; import FormItem from 'antd/lib/form/FormItem'; +import getFeaturesFlags from 'api/features/getFeatureFlags'; import apply from 'api/licenses/apply'; import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; +import { QueryObserverResult, RefetchOptions, useQuery } from 'react-query'; +import { useDispatch } from 'react-redux'; +import { Dispatch } from 'redux'; +import { AppAction, UPDATE_FEATURE_FLAGS } from 'types/actions/app'; +import { ErrorResponse, SuccessResponse } from 'types/api'; +import { PayloadProps } from 'types/api/licenses/getAll'; -import { ApplyForm, ApplyFormContainer, LicenseInput } from './applyFormStyles'; +import { ApplyForm, ApplyFormContainer, LicenseInput } from './styles'; -function ApplyLicenseForm(): JSX.Element { +function ApplyLicenseForm({ + licenseRefetch, +}: ApplyLicenseFormProps): JSX.Element { const { t } = useTranslation(['licenses']); const [key, setKey] = useState(''); const [loading, setLoading] = useState(false); + const dispatch = useDispatch>(); + const { refetch } = useQuery({ + queryFn: getFeaturesFlags, + queryKey: 'getFeatureFlags', + enabled: false, + }); const onFinish = async (values: unknown | { key: string }): Promise => { const params = values as { key: string }; @@ -28,6 +43,16 @@ function ApplyLicenseForm(): JSX.Element { }); if (response.statusCode === 200) { + const [featureFlagsResponse] = await Promise.all([ + refetch(), + licenseRefetch(), + ]); + if (featureFlagsResponse.data?.payload) { + dispatch({ + type: UPDATE_FEATURE_FLAGS, + payload: featureFlagsResponse.data.payload, + }); + } notification.success({ message: 'Success', description: t('license_applied'), @@ -74,4 +99,12 @@ function ApplyLicenseForm(): JSX.Element { ); } +interface ApplyLicenseFormProps { + licenseRefetch: ( + options?: RefetchOptions, + ) => Promise< + QueryObserverResult | ErrorResponse, unknown> + >; +} + export default ApplyLicenseForm; diff --git a/frontend/src/container/Licenses/ListLicenses.tsx b/frontend/src/container/Licenses/ListLicenses.tsx index ba19fe9179..d9a994cfbf 100644 --- a/frontend/src/container/Licenses/ListLicenses.tsx +++ b/frontend/src/container/Licenses/ListLicenses.tsx @@ -1,4 +1,3 @@ -/* eslint-disable react/display-name */ import { Table } from 'antd'; import { ColumnsType } from 'antd/lib/table'; import React from 'react'; diff --git a/frontend/src/container/Licenses/index.tsx b/frontend/src/container/Licenses/index.tsx index 04b20b9927..b326a5b0e7 100644 --- a/frontend/src/container/Licenses/index.tsx +++ b/frontend/src/container/Licenses/index.tsx @@ -1,9 +1,9 @@ import { Tabs, Typography } from 'antd'; import getAll from 'api/licenses/getAll'; import Spinner from 'components/Spinner'; -import useFetch from 'hooks/useFetch'; import React from 'react'; import { useTranslation } from 'react-i18next'; +import { useQuery } from 'react-query'; import ApplyLicenseForm from './ApplyLicenseForm'; import ListLicenses from './ListLicenses'; @@ -12,29 +12,31 @@ const { TabPane } = Tabs; function Licenses(): JSX.Element { const { t } = useTranslation(['licenses']); - const { loading, payload, error, errorMessage } = useFetch(getAll); + const { data, isError, isLoading, refetch } = useQuery({ + queryFn: getAll, + queryKey: 'getAllLicenses', + }); - if (error) { - return {errorMessage}; + if (isError || data?.error) { + return {data?.error}; } - if (loading || payload === undefined) { + if (isLoading || data?.payload === undefined) { return ; } + const allValidLicense = + data?.payload?.filter((license) => license.isCurrent) || []; + return ( - - l.isCurrent === true) : []} - /> + + - l.isCurrent === false) : []} - /> + ); diff --git a/frontend/src/container/Licenses/applyFormStyles.ts b/frontend/src/container/Licenses/styles.ts similarity index 100% rename from frontend/src/container/Licenses/applyFormStyles.ts rename to frontend/src/container/Licenses/styles.ts