From 582b33e121209199771083df2bea7a45d3c05e5e Mon Sep 17 00:00:00 2001 From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com> Date: Thu, 13 Jun 2024 13:00:57 +0200 Subject: [PATCH] Feat: feature view created by field - frontend (#7382) add "Created by:" to feature overview meta and align other items --- .../PermissionIconButton.tsx | 4 +-- .../FeatureOverviewMetaData/DependencyRow.tsx | 4 +++ .../FeatureOverviewMetaData.tsx | 26 +++++++++++++++++++ frontend/src/interfaces/featureToggle.ts | 8 ++++++ frontend/src/openapi/models/featureSchema.ts | 3 +++ .../openapi/models/featureSchemaCreatedBy.ts | 17 ++++++++++++ frontend/src/openapi/models/index.ts | 1 + .../openapi/models/searchFeaturesParams.ts | 4 +++ 8 files changed, 65 insertions(+), 2 deletions(-) create mode 100644 frontend/src/openapi/models/featureSchemaCreatedBy.ts diff --git a/frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx b/frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx index c558a06b36..3fd3fc3b5d 100644 --- a/frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx +++ b/frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx @@ -25,7 +25,7 @@ interface IPermissionIconButtonProps { edge?: IconButtonProps['edge']; tooltipProps?: Omit; sx?: IconButtonProps['sx']; - size?: string; + size?: 'small' | 'medium' | 'large'; } interface IButtonProps extends IPermissionIconButtonProps { @@ -87,7 +87,7 @@ const BasePermissionIconButton = ({ {...rest} disabled={!access || disabled} aria-labelledby={id} - size='large' + size={rest.size || 'large'} > {children} diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/DependencyRow.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/DependencyRow.tsx index 65ee8e276f..b04afbdedf 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/DependencyRow.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/DependencyRow.tsx @@ -107,12 +107,16 @@ export const DependencyRow: FC<{ feature: IFeatureToggle }> = ({ feature }) => { Dependency: { setShowDependencyDialogue(true); }} + sx={(theme) => ({ + marginBottom: theme.spacing(0.4), + })} > Add parent feature diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx index 01a521eb96..108a2e0c7b 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx @@ -21,6 +21,7 @@ import { useShowDependentFeatures } from './useShowDependentFeatures'; import type { ILastSeenEnvironments } from 'interfaces/featureToggle'; import { FeatureLifecycle } from '../FeatureLifecycle/FeatureLifecycle'; import { MarkCompletedDialogue } from '../FeatureLifecycle/MarkCompletedDialogue'; +import { UserAvatar } from 'component/common/UserAvatar/UserAvatar'; const StyledContainer = styled('div')(({ theme }) => ({ borderRadius: theme.shape.borderRadiusLarge, @@ -83,6 +84,10 @@ const StyledDescription = styled('p')({ wordBreak: 'break-word', }); +const StyledUserAvatar = styled(UserAvatar)(({ theme }) => ({ + margin: theme.spacing(1), +})); + export const StyledLabel = styled('span')(({ theme }) => ({ color: theme.palette.text.secondary, marginRight: theme.spacing(1), @@ -98,6 +103,7 @@ const FeatureOverviewMetaData = () => { const [showDelDialog, setShowDelDialog] = useState(false); const [showMarkCompletedDialogue, setShowMarkCompletedDialogue] = useState(false); + const flagCreatorEnabled = useUiFlag('flagCreator'); const { locationSettings } = useLocationSettings(); const showDependentFeatures = useShowDependentFeatures(feature.project); @@ -166,6 +172,7 @@ const FeatureOverviewMetaData = () => { {description} { No description.{' '} { /> + ( + + + + Created by: + {feature.createdBy?.name} + + + + + )} + /> } diff --git a/frontend/src/interfaces/featureToggle.ts b/frontend/src/interfaces/featureToggle.ts index 4ac60e69c1..3b97ce95d7 100644 --- a/frontend/src/interfaces/featureToggle.ts +++ b/frontend/src/interfaces/featureToggle.ts @@ -38,6 +38,9 @@ export type Lifecycle = { enteredStageAt: string; }; +/** + * @deprecated use FeatureSchema from openapi + */ export interface IFeatureToggle { stale: boolean; archived: boolean; @@ -57,6 +60,11 @@ export interface IFeatureToggle { dependencies: Array; lifecycle?: Lifecycle; children: Array; + createdBy?: { + id: string; + name: string; + imageUrl: string; + }; } export interface IDependency { diff --git a/frontend/src/openapi/models/featureSchema.ts b/frontend/src/openapi/models/featureSchema.ts index 13f961bee3..9fc629fac5 100644 --- a/frontend/src/openapi/models/featureSchema.ts +++ b/frontend/src/openapi/models/featureSchema.ts @@ -3,6 +3,7 @@ * Do not edit manually. * See `gen:api` script in package.json */ +import type { FeatureSchemaCreatedBy } from './featureSchemaCreatedBy'; import type { FeatureSchemaDependenciesItem } from './featureSchemaDependenciesItem'; import type { FeatureEnvironmentSchema } from './featureEnvironmentSchema'; import type { FeatureSchemaLifecycle } from './featureSchemaLifecycle'; @@ -28,6 +29,8 @@ export interface FeatureSchema { * @nullable */ createdAt?: string | null; + /** User who created the feature flag */ + createdBy?: FeatureSchemaCreatedBy; /** The list of parent dependencies. This is an experimental field and may change. */ dependencies?: FeatureSchemaDependenciesItem[]; /** diff --git a/frontend/src/openapi/models/featureSchemaCreatedBy.ts b/frontend/src/openapi/models/featureSchemaCreatedBy.ts new file mode 100644 index 0000000000..f0dfb667ef --- /dev/null +++ b/frontend/src/openapi/models/featureSchemaCreatedBy.ts @@ -0,0 +1,17 @@ +/** + * Generated by Orval + * Do not edit manually. + * See `gen:api` script in package.json + */ + +/** + * User who created the feature flag + */ +export type FeatureSchemaCreatedBy = { + /** The user id */ + id: number; + /** URL used for the user profile image */ + imageUrl: string; + /** Name of the user */ + name: string; +}; diff --git a/frontend/src/openapi/models/index.ts b/frontend/src/openapi/models/index.ts index 9798d5e8c7..10286c37e7 100644 --- a/frontend/src/openapi/models/index.ts +++ b/frontend/src/openapi/models/index.ts @@ -543,6 +543,7 @@ export * from './featureLifecycleSchemaItem'; export * from './featureLifecycleSchemaItemStage'; export * from './featureMetricsSchema'; export * from './featureSchema'; +export * from './featureSchemaCreatedBy'; export * from './featureSchemaDependenciesItem'; export * from './featureSchemaLifecycle'; export * from './featureSchemaLifecycleStage'; diff --git a/frontend/src/openapi/models/searchFeaturesParams.ts b/frontend/src/openapi/models/searchFeaturesParams.ts index 31007fa2d3..14df9c2d5e 100644 --- a/frontend/src/openapi/models/searchFeaturesParams.ts +++ b/frontend/src/openapi/models/searchFeaturesParams.ts @@ -21,6 +21,10 @@ export type SearchFeaturesParams = { * The feature flag type to filter by. The type can be specified with an operator. The supported operators are IS, IS_NOT, IS_ANY_OF, IS_NONE_OF. */ type?: string; + /** + * The feature flag creator to filter by. The creators can be specified with an operator. The supported operators are IS, IS_NOT, IS_ANY_OF, IS_NONE_OF. + */ + createdBy?: string; /** * The list of feature tags to filter by. Feature tag has to specify a type and a value joined with a colon. */