From 78273e4ff30d7012aa91f6549115587dc31a6e0b Mon Sep 17 00:00:00 2001 From: Fredrik Strand Oseberg Date: Wed, 13 Sep 2023 15:50:42 +0200 Subject: [PATCH] chore: dora cleanup (#4676) This PR adds: * Generated types for useProjectDoraMetrics * Mobile enhancements * Tooltips --------- Co-authored-by: Thomas Heartman --- .../src/component/project/Project/Project.tsx | 23 +++--- .../ProjectDoraFeedback.tsx | 41 +++++++++-- .../ProjectDoraMetrics/ProjectDoraMetrics.tsx | 72 ++++++++++++++----- .../useProjectDoraMetrics.ts | 10 ++- frontend/src/interfaces/featureToggle.ts | 2 +- .../models/addRoleAccessToProject400.ts | 14 ++++ .../models/addRoleAccessToProject401.ts | 14 ++++ .../models/addRoleAccessToProject403.ts | 14 ++++ .../models/addRoleAccessToProject404.ts | 14 ++++ .../models/addRoleAccessToProject415.ts | 14 ++++ .../changeRequestCreateFeatureSchema.ts | 9 ++- ...stCreateFeatureSchemaOneOfOnefourAction.ts | 16 ----- ...geRequestCreateFeatureSchemaOneOfOneone.ts | 4 +- ...estCreateFeatureSchemaOneOfOneoneAction.ts | 2 +- ...eRequestCreateFeatureSchemaOneOfOnesix.ts} | 6 +- ...estCreateFeatureSchemaOneOfOnesixAction.ts | 16 +++++ ...RequestCreateFeatureSchemaOneOfOnethree.ts | 16 +++++ ...tCreateFeatureSchemaOneOfOnethreeAction.ts | 16 +++++ ...reateFeatureSchemaOneOfOnethreePayload.ts} | 2 +- .../openapi/models/createApiTokenSchema.ts | 24 ++----- .../models/createApiTokenSchemaOneOf.ts | 12 ++-- .../models/createApiTokenSchemaOneOfAllOf.ts | 10 --- .../createApiTokenSchemaOneOfAllOfTwo.ts | 10 --- .../models/createApiTokenSchemaOneOfFour.ts | 21 ++++-- .../createApiTokenSchemaOneOfFourAllOf.ts | 10 --- .../createApiTokenSchemaOneOfOnezero.ts | 11 --- ...reateApiTokenSchemaOneOfOnezeroAllOfTwo.ts | 13 ---- .../models/createApiTokenSchemaOneOfSeven.ts | 11 --- .../createApiTokenSchemaOneOfSevenAllOf.ts | 16 ----- .../createApiTokenSchemaOneOfSevenAllOfTwo.ts | 10 --- ...f.ts => createApiTokenSchemaOneOfThree.ts} | 6 +- ...Two.ts => createApiTokenSchemaOneOfTwo.ts} | 6 +- .../createFeatureNamingPatternSchema.ts | 17 +++++ .../models/createProjectApiToken404.ts | 14 ++++ .../openapi/models/createStrategySchema.ts | 6 ++ .../createStrategyVariantSchemaPayload.ts | 2 +- .../createStrategyVariantSchemaPayloadType.ts | 3 +- .../models/deleteProjectApiToken400.ts | 14 ++++ .../models/deleteProjectApiToken404.ts | 14 ++++ .../src/openapi/models/doraFeaturesSchema.ts | 15 ++++ .../src/openapi/models/eventSchemaType.ts | 4 ++ .../models/featureEnvironmentSchema.ts | 2 + .../src/openapi/models/getProjectDora401.ts | 14 ++++ .../src/openapi/models/getProjectDora403.ts | 14 ++++ .../src/openapi/models/getProjectDora404.ts | 14 ++++ .../models/groupWithProjectRoleSchema.ts | 2 + .../openapi/models/healthOverviewSchema.ts | 2 + .../src/openapi/models/healthReportSchema.ts | 2 + frontend/src/openapi/models/index.ts | 51 +++++++++---- ...SchemaResultAnyOfFourVariantPayloadType.ts | 1 + .../openapi/models/projectAddAccessSchema.ts | 12 ++-- .../models/projectAddRoleAccessSchema.ts | 17 +++++ ...> projectAddRoleAccessSchemaGroupsItem.ts} | 2 +- ...=> projectAddRoleAccessSchemaUsersItem.ts} | 2 +- .../models/projectDoraMetricsSchema.ts | 16 +++++ .../openapi/models/projectOverviewSchema.ts | 2 + .../openapi/models/removeGroupAccess401.ts | 14 ++++ .../openapi/models/removeGroupAccess403.ts | 14 ++++ .../openapi/models/removeGroupAccess404.ts | 14 ++++ .../src/openapi/models/removeUserAccess401.ts | 14 ++++ .../src/openapi/models/removeUserAccess403.ts | 14 ++++ .../src/openapi/models/removeUserAccess404.ts | 14 ++++ .../openapi/models/searchEventsSchemaType.ts | 4 ++ .../src/openapi/models/setRolesForGroup401.ts | 14 ++++ .../src/openapi/models/setRolesForGroup403.ts | 14 ++++ .../src/openapi/models/setRolesForGroup404.ts | 14 ++++ .../src/openapi/models/setRolesForUser401.ts | 14 ++++ .../src/openapi/models/setRolesForUser403.ts | 14 ++++ .../src/openapi/models/setRolesForUser404.ts | 14 ++++ .../models/strategyVariantSchemaPayload.ts | 2 +- .../strategyVariantSchemaPayloadType.ts | 3 +- .../models/userWithProjectRoleSchema.ts | 2 + .../openapi/models/validateFeatureSchema.ts | 2 + .../openapi/models/variantSchemaPayload.ts | 2 +- .../models/variantSchemaPayloadType.ts | 3 +- 75 files changed, 681 insertions(+), 212 deletions(-) create mode 100644 frontend/src/openapi/models/addRoleAccessToProject400.ts create mode 100644 frontend/src/openapi/models/addRoleAccessToProject401.ts create mode 100644 frontend/src/openapi/models/addRoleAccessToProject403.ts create mode 100644 frontend/src/openapi/models/addRoleAccessToProject404.ts create mode 100644 frontend/src/openapi/models/addRoleAccessToProject415.ts delete mode 100644 frontend/src/openapi/models/changeRequestCreateFeatureSchemaOneOfOnefourAction.ts rename frontend/src/openapi/models/{changeRequestCreateFeatureSchemaOneOfOnefour.ts => changeRequestCreateFeatureSchemaOneOfOnesix.ts} (54%) create mode 100644 frontend/src/openapi/models/changeRequestCreateFeatureSchemaOneOfOnesixAction.ts create mode 100644 frontend/src/openapi/models/changeRequestCreateFeatureSchemaOneOfOnethree.ts create mode 100644 frontend/src/openapi/models/changeRequestCreateFeatureSchemaOneOfOnethreeAction.ts rename frontend/src/openapi/models/{changeRequestCreateFeatureSchemaOneOfOneonePayload.ts => changeRequestCreateFeatureSchemaOneOfOnethreePayload.ts} (72%) delete mode 100644 frontend/src/openapi/models/createApiTokenSchemaOneOfAllOf.ts delete mode 100644 frontend/src/openapi/models/createApiTokenSchemaOneOfAllOfTwo.ts delete mode 100644 frontend/src/openapi/models/createApiTokenSchemaOneOfFourAllOf.ts delete mode 100644 frontend/src/openapi/models/createApiTokenSchemaOneOfOnezero.ts delete mode 100644 frontend/src/openapi/models/createApiTokenSchemaOneOfOnezeroAllOfTwo.ts delete mode 100644 frontend/src/openapi/models/createApiTokenSchemaOneOfSeven.ts delete mode 100644 frontend/src/openapi/models/createApiTokenSchemaOneOfSevenAllOf.ts delete mode 100644 frontend/src/openapi/models/createApiTokenSchemaOneOfSevenAllOfTwo.ts rename frontend/src/openapi/models/{createApiTokenSchemaOneOfOnezeroAllOf.ts => createApiTokenSchemaOneOfThree.ts} (81%) rename frontend/src/openapi/models/{createApiTokenSchemaOneOfFourAllOfTwo.ts => createApiTokenSchemaOneOfTwo.ts} (52%) create mode 100644 frontend/src/openapi/models/createFeatureNamingPatternSchema.ts create mode 100644 frontend/src/openapi/models/createProjectApiToken404.ts create mode 100644 frontend/src/openapi/models/deleteProjectApiToken400.ts create mode 100644 frontend/src/openapi/models/deleteProjectApiToken404.ts create mode 100644 frontend/src/openapi/models/doraFeaturesSchema.ts create mode 100644 frontend/src/openapi/models/getProjectDora401.ts create mode 100644 frontend/src/openapi/models/getProjectDora403.ts create mode 100644 frontend/src/openapi/models/getProjectDora404.ts create mode 100644 frontend/src/openapi/models/projectAddRoleAccessSchema.ts rename frontend/src/openapi/models/{projectAddAccessSchemaGroupsItem.ts => projectAddRoleAccessSchemaGroupsItem.ts} (72%) rename frontend/src/openapi/models/{projectAddAccessSchemaUsersItem.ts => projectAddRoleAccessSchemaUsersItem.ts} (72%) create mode 100644 frontend/src/openapi/models/projectDoraMetricsSchema.ts create mode 100644 frontend/src/openapi/models/removeGroupAccess401.ts create mode 100644 frontend/src/openapi/models/removeGroupAccess403.ts create mode 100644 frontend/src/openapi/models/removeGroupAccess404.ts create mode 100644 frontend/src/openapi/models/removeUserAccess401.ts create mode 100644 frontend/src/openapi/models/removeUserAccess403.ts create mode 100644 frontend/src/openapi/models/removeUserAccess404.ts create mode 100644 frontend/src/openapi/models/setRolesForGroup401.ts create mode 100644 frontend/src/openapi/models/setRolesForGroup403.ts create mode 100644 frontend/src/openapi/models/setRolesForGroup404.ts create mode 100644 frontend/src/openapi/models/setRolesForUser401.ts create mode 100644 frontend/src/openapi/models/setRolesForUser403.ts create mode 100644 frontend/src/openapi/models/setRolesForUser404.ts diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx index 7158e29919..842f176e17 100644 --- a/frontend/src/component/project/Project/Project.tsx +++ b/frontend/src/component/project/Project/Project.tsx @@ -14,7 +14,7 @@ import { StyledTabContainer, StyledTopRow, } from './Project.styles'; -import { Box, Paper, Tabs, Typography } from '@mui/material'; +import { Box, Paper, Tabs, Typography, styled } from '@mui/material'; import { FileUpload } from '@mui/icons-material'; import useToast from 'hooks/useToast'; import useQueryParams from 'hooks/useQueryParams'; @@ -40,6 +40,15 @@ import { EnterpriseBadge } from 'component/common/EnterpriseBadge/EnterpriseBadg import { Badge } from 'component/common/Badge/Badge'; import { ProjectDoraMetrics } from './ProjectDoraMetrics/ProjectDoraMetrics'; +const StyledBadge = styled(Badge)(({ theme }) => ({ + position: 'absolute', + top: 5, + right: 20, + [theme.breakpoints.down('md')]: { + top: 2, + }, +})); + export const Project = () => { const projectId = useRequiredPathParam('projectId'); const params = useQueryParams(); @@ -228,17 +237,9 @@ export const Project = () => { + New - + } /> {(tab.isEnterprise && diff --git a/frontend/src/component/project/Project/ProjectDoraMetrics/ProjectDoraFeedback/ProjectDoraFeedback.tsx b/frontend/src/component/project/Project/ProjectDoraMetrics/ProjectDoraFeedback/ProjectDoraFeedback.tsx index ddd11aabcf..02841a7dc4 100644 --- a/frontend/src/component/project/Project/ProjectDoraMetrics/ProjectDoraFeedback/ProjectDoraFeedback.tsx +++ b/frontend/src/component/project/Project/ProjectDoraMetrics/ProjectDoraFeedback/ProjectDoraFeedback.tsx @@ -14,6 +14,18 @@ const StyledOuterContainer = styled(Box)(({ theme }) => ({ const StyledBtnContainer = styled(Box)(({ theme }) => ({ marginTop: theme.spacing(3), + [theme.breakpoints.down('md')]: { + display: 'flex', + flexDirection: 'column', + }, +})); + +const StyledBtn = styled(Button)(({ theme }) => ({ + marginRight: theme.spacing(1), + [theme.breakpoints.down('md')]: { + marginRight: 0, + marginBottom: theme.spacing(1), + }, })); const StyledDivider = styled(Divider)(({ theme }) => ({ @@ -26,6 +38,10 @@ const StyledFlexBox = styled(Box)(({ theme }) => ({ alignItems: 'center', marginTop: theme.spacing(1), marginRight: theme.spacing(3), + [theme.breakpoints.down('sm')]: { + display: 'flex', + flexDirection: 'column', + }, })); const StyledIconWrapper = styled(Box)(({ theme }) => ({ @@ -73,7 +89,7 @@ export const ProjectDoraFeedback = () => { } }; - const recipientEmail = 'recipient@example.com'; + 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`; @@ -95,6 +111,22 @@ export const ProjectDoraFeedback = () => { production. +
+ + + 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. + + { {' '} Is this useful to you? - +