diff --git a/frontend/src/component/project/Project/ProjectDoraMetrics/ProjectDoraFeedback/ProjectDoraFeedback.tsx b/frontend/src/component/common/ExperimentalFeedback/ExperimentalFeedback.tsx similarity index 75% rename from frontend/src/component/project/Project/ProjectDoraMetrics/ProjectDoraFeedback/ProjectDoraFeedback.tsx rename to frontend/src/component/common/ExperimentalFeedback/ExperimentalFeedback.tsx index c5e8ede757..5827f55016 100644 --- a/frontend/src/component/project/Project/ProjectDoraMetrics/ProjectDoraFeedback/ProjectDoraFeedback.tsx +++ b/frontend/src/component/common/ExperimentalFeedback/ExperimentalFeedback.tsx @@ -1,7 +1,7 @@ import { useState, useEffect } from 'react'; import { Box, Button, Divider, Typography, styled } from '@mui/material'; import { PermMedia, Send } from '@mui/icons-material'; -import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; +import { CustomEvents, usePlausibleTracker } from 'hooks/usePlausibleTracker'; import { createLocalStorage } from 'utils/createLocalStorage'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; @@ -61,12 +61,21 @@ const StyledLink = styled('a')(({ theme }) => ({ textDecoration: 'none', })); -export const ProjectDoraFeedback = () => { +interface IExperimentalFeedbackProps { + trackerKey: string; + eventKey: CustomEvents; + description: string; + sketchURL: string; +} + +export const ExperimentalFeedback: React.FC = ({ + trackerKey, + eventKey, + description, + sketchURL, +}) => { const { trackEvent } = usePlausibleTracker(); - const { value, setValue } = createLocalStorage( - `project:metrics:plausible`, - { sent: false }, - ); + const { value, setValue } = createLocalStorage(trackerKey, { sent: false }); const [metrics, setMetrics] = useState(value); useEffect(() => { @@ -75,7 +84,7 @@ export const ProjectDoraFeedback = () => { const onBtnClick = (type: string) => { try { - trackEvent('project-metrics', { + trackEvent(eventKey, { props: { eventType: type, }, @@ -91,7 +100,7 @@ export const ProjectDoraFeedback = () => { const recipientEmail = 'ux@getunleash.io'; const emailSubject = "I'd like to get involved"; - const emailBody = `Hello Unleash,\n\nI just saw the new metrics page you are experimenting with in Unleash. I'd like to be involved in user tests and give my feedback on this feature.\n\nRegards,\n`; + const emailBody = `Hello Unleash,\n\nI just saw your ${eventKey} experiment. I'd like to be involved in user tests and give my feedback on this feature.\n\nRegards,\n`; const mailtoURL = `mailto:${recipientEmail}?subject=${encodeURIComponent( emailSubject, @@ -102,31 +111,10 @@ export const ProjectDoraFeedback = () => { We are trying something experimental! - - We are considering adding project metrics to see how a project - performs. As a first step, we have added a{' '} - lead time for changes indicator that is calculated per - feature toggle based on the creation of the feature toggle and - when it was first turned on in an environment of type - production. - + {description}
- - DORA is a method for measuring the performance of your DevOps - teams. It measures four different metrics. You can read Google's - blog post about{' '} - - DORA metrics - {' '} - for more information. - - { diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx index cf1ff921a9..58427523a0 100644 --- a/frontend/src/component/project/Project/Project.tsx +++ b/frontend/src/component/project/Project/Project.tsx @@ -102,8 +102,7 @@ export const Project = () => { title: 'Metrics', path: `${basePath}/metrics`, name: 'dora', - flag: 'doraMetrics', - new: true, + isEnterprise: true, }, { title: 'Event log', diff --git a/frontend/src/component/project/Project/ProjectDoraMetrics/ProjectDoraMetrics.tsx b/frontend/src/component/project/Project/ProjectDoraMetrics/ProjectDoraMetrics.tsx index 2ad4c61c18..5cfb217d61 100644 --- a/frontend/src/component/project/Project/ProjectDoraMetrics/ProjectDoraMetrics.tsx +++ b/frontend/src/component/project/Project/ProjectDoraMetrics/ProjectDoraMetrics.tsx @@ -15,7 +15,6 @@ import { PageContent } from 'component/common/PageContent/PageContent'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { PageHeader } from 'component/common/PageHeader/PageHeader'; import { Badge } from 'component/common/Badge/Badge'; -import { ProjectDoraFeedback } from './ProjectDoraFeedback/ProjectDoraFeedback'; import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns'; import theme from 'themes/theme'; @@ -194,7 +193,6 @@ export const ProjectDoraMetrics = () => { return ( <> - , ): Promise { - if (this.config.flagResolver.isEnabled('doraMetrics')) { - const { projectId } = req.params; + const { projectId } = req.params; - const dora = await this.projectService.getDoraMetrics(projectId); + const dora = await this.projectService.getDoraMetrics(projectId); - this.openApiService.respondWithValidation( - 200, - res, - projectDoraMetricsSchema.$id, - dora, - ); - } else { - throw new InvalidOperationError( - 'Feature dora metrics is not enabled', - ); - } + this.openApiService.respondWithValidation( + 200, + res, + projectDoraMetricsSchema.$id, + dora, + ); } } diff --git a/src/lib/types/experimental.ts b/src/lib/types/experimental.ts index 7b5e15bccd..f6810809a7 100644 --- a/src/lib/types/experimental.ts +++ b/src/lib/types/experimental.ts @@ -23,7 +23,6 @@ export type IFlagKey = | 'filterInvalidClientMetrics' | 'lastSeenByEnvironment' | 'customRootRolesKillSwitch' - | 'doraMetrics' | 'variantTypeNumber' | 'privateProjects' | 'dependentFeatures' @@ -115,10 +114,6 @@ const flags: IFlags = { process.env.UNLEASH_EXPERIMENTAL_CUSTOM_ROOT_ROLES_KILL_SWITCH, false, ), - doraMetrics: parseEnvVarBoolean( - process.env.UNLEASH_EXPERIMENTAL_DORA_METRICS, - false, - ), dependentFeatures: parseEnvVarBoolean( process.env.UNLEASH_EXPERIMENTAL_DEPENDENT_FEATURES, false, diff --git a/src/server-dev.ts b/src/server-dev.ts index 37271519ee..7920390cf0 100644 --- a/src/server-dev.ts +++ b/src/server-dev.ts @@ -38,7 +38,6 @@ process.nextTick(async () => { anonymiseEventLog: false, responseTimeWithAppNameKillSwitch: false, lastSeenByEnvironment: true, - doraMetrics: true, variantTypeNumber: true, privateProjects: true, dependentFeatures: true,