feat: command menu items can have description as tooltip now (#7455)

![image](https://github.com/Unleash/unleash/assets/964450/7a55a1a7-7aea-4f9c-96ac-46adf2edd36f)

frontend/src/component/commandBar/CommandFeatures.tsx

@@ -21,6 +21,7 @@ export const CommandFeatures = ({ searchString }: ICommandBar) => {
     const flags: CommandResultGroupItem[] = features.map((feature) => ({
         name: feature.name,
         link: `/projects/${feature.project}/features/${feature.name}`,
+        description: feature.description,
     }));
 
     return (

frontend/src/component/commandBar/RecentlyVisited/CommandResultGroup.tsx

@@ -10,7 +10,8 @@ import {
 import { Link } from 'react-router-dom';
 import type { Theme } from '@mui/material/styles/createTheme';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { StyledProjectIcon } from '../../layout/MainLayout/NavigationSidebar/IconRenderer';
+import { StyledProjectIcon } from 'component/layout/MainLayout/NavigationSidebar/IconRenderer';
+import { TooltipResolver } from 'component/common/TooltipResolver/TooltipResolver';
 
 const listItemButtonStyle = (theme: Theme) => ({
     borderRadius: theme.spacing(0.5),
@@ -37,6 +38,7 @@ const StyledListItemText = styled(ListItemText)(({ theme }) => ({
 export interface CommandResultGroupItem {
     name: string;
     link: string;
+    description?: string | null;
 }
 
 interface CommandResultGroupProps {
@@ -76,9 +78,15 @@ export const CommandResultGroup = ({
                                 elseShow={<Icon>{icon}</Icon>}
                             />
                         </StyledListItemIcon>
-                        <StyledListItemText>
-                            <Typography>{item.name}</Typography>
-                        </StyledListItemText>
+                        <TooltipResolver
+                            title={item.description}
+                            variant={'custom'}
+                            placement={'bottom-end'}
+                        >
+                            <StyledListItemText>
+                                <Typography>{item.name}</Typography>
+                            </StyledListItemText>
+                        </TooltipResolver>
                     </ListItemButton>
                 ))}
             </List>

frontend/src/component/common/TooltipResolver/TooltipResolver.tsx

@@ -3,7 +3,7 @@ import { Tooltip, type TooltipProps } from '@mui/material';
 import { HtmlTooltip } from '../HtmlTooltip/HtmlTooltip';
 
 export interface ITooltipResolverProps extends Omit<TooltipProps, 'title'> {
-    title?: string;
+    title?: string | null;
     titleComponent?: ReactNode;
     variant?: 'default' | 'custom';
 }

frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx

@@ -318,6 +318,7 @@ export const ProjectFeatureToggles = ({
                     id: index,
                     type: '-',
                     name: `Feature name ${index}`,
+                    description: '',
                     createdAt: new Date().toISOString(),
                     createdBy: {
                         id: 0,

frontend/src/openapi/models/createProjectSchema.ts

@@ -20,7 +20,7 @@ export interface CreateProjectSchema {
      */
     description?: string | null;
     /**
-     * A list of environments that should be enabled for this project. The list must contain at least one environment. If this property is missing, Unleash will default to enabling all non-deprecated environments for the project. This is a beta feature and is not yet generally available.
+     * A list of environments that should be enabled for this project. When provided, the list must contain at least one environment. If this property is missing, Unleash will default to enabling all non-deprecated environments for the project.
      * @minItems 1
      */
     environments?: string[];

frontend/src/openapi/models/createProjectSchemaChangeRequestEnvironmentsItem.ts

@@ -7,6 +7,6 @@
 export type CreateProjectSchemaChangeRequestEnvironmentsItem = {
     /** The name of the environment to configure change requests for. */
     name: string;
-    /** The number of approvals required for a change request to be fully approved and ready to applied in this environment. If no value is provided, it will be set to the default number, which is 1. Values will be clamped to between 1 and 10 inclusive. this is a beta feature is not yet generally available. */
+    /** The number of approvals required for a change request to be fully approved and ready to applied in this environment. If no value is provided, it will be set to the default number, which is 1. Values will be clamped to between 1 and 10 inclusive. */
     requiredApprovals?: number;
 };

frontend/src/openapi/models/featureSearchResponseSchema.ts

@@ -38,7 +38,7 @@ export interface FeatureSearchResponseSchema {
      * Detailed description of the feature
      * @nullable
      */
-    description?: string | null;
+    description: string | null;
     /** The list of environments where the feature can be used */
     environments: FeatureSearchEnvironmentSchema[];
     /** `true` if the feature was favorited, otherwise `false`. */

frontend/src/openapi/models/projectCreatedSchema.ts

@@ -10,7 +10,7 @@ import type { ProjectCreatedSchemaMode } from './projectCreatedSchemaMode';
  * Details about the newly created project.
  */
 export interface ProjectCreatedSchema {
-    /** The list of environments that have change requests enabled. This is a beta feature and may be subject to change. */
+    /** The list of environments that have change requests enabled. */
     changeRequestEnvironments?: ProjectCreatedSchemaChangeRequestEnvironmentsItem[];
     /** A default stickiness for the project affecting the default stickiness value for variants and Gradual Rollout strategy */
     defaultStickiness?: string;
@@ -20,7 +20,7 @@ export interface ProjectCreatedSchema {
      */
     description?: string | null;
     /**
-     * The environments enabled for the project. This is a beta feature and may be subject to change.
+     * The environments enabled for the project.
      * @minItems 1
      */
     environments?: string[];

frontend/src/utils/formatAccessText.ts

@@ -2,8 +2,8 @@ export const ACCESS_DENIED_TEXT = 'Access denied';
 
 export const formatAccessText = (
     hasAccess: boolean,
-    hasAccessText?: string,
-): string | undefined => {
+    hasAccessText?: string | null,
+): string | undefined | null => {
     if (hasAccess) {
         return hasAccessText;
     }

src/lib/openapi/spec/feature-search-response-schema.ts

@@ -14,6 +14,7 @@ export const featureSearchResponseSchema = {
     additionalProperties: false,
     required: [
         'name',
+        'description',
         'dependencyType',
         'type',
         'project',