Added and optimized missing RatingFieldDisplay component (#5904)

The display for Rating field type was missing, I just added it based on
RatingInput in readonly mode and optimized a bit for performance also.

Fixes https://github.com/twentyhq/twenty/issues/5900

packages/twenty-front/src/modules/object-record/record-field/components/FieldDisplay.tsx

@@ -2,9 +2,11 @@ import { useContext } from 'react';
 
 import { BooleanFieldDisplay } from '@/object-record/record-field/meta-types/display/components/BooleanFieldDisplay';
 import { LinksFieldDisplay } from '@/object-record/record-field/meta-types/display/components/LinksFieldDisplay';
+import { RatingFieldDisplay } from '@/object-record/record-field/meta-types/display/components/RatingFieldDisplay';
 import { isFieldBoolean } from '@/object-record/record-field/types/guards/isFieldBoolean';
 import { isFieldDisplayedAsPhone } from '@/object-record/record-field/types/guards/isFieldDisplayedAsPhone';
 import { isFieldLinks } from '@/object-record/record-field/types/guards/isFieldLinks';
+import { isFieldRating } from '@/object-record/record-field/types/guards/isFieldRating';
 import { isFieldChipDisplay } from '@/object-record/utils/getRecordChipGeneratorPerObjectPerField';
 
 import { FieldContext } from '../contexts/FieldContext';
@@ -82,5 +84,7 @@ export const FieldDisplay = () => {
     <JsonFieldDisplay />
   ) : isFieldBoolean(fieldDefinition) ? (
     <BooleanFieldDisplay />
+  ) : isFieldRating(fieldDefinition) ? (
+    <RatingFieldDisplay />
   ) : null;
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/RatingFieldDisplay.tsx

@@ -0,0 +1,8 @@
+import { useRatingFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useRatingFieldDisplay';
+import { RatingInput } from '@/ui/field/input/components/RatingInput';
+
+export const RatingFieldDisplay = () => {
+  const { rating } = useRatingFieldDisplay();
+
+  return <RatingInput value={rating} readonly />;
+};

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/RatingFieldDisplay.perf.stories.tsx

@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ComponentDecorator } from 'twenty-ui';
+
+import { RatingFieldDisplay } from '@/object-record/record-field/meta-types/display/components/RatingFieldDisplay';
+import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator';
+import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
+import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory';
+
+const meta: Meta = {
+  title: 'UI/Data/Field/Display/RatingFieldDisplay',
+  decorators: [
+    MemoryRouterDecorator,
+    getFieldDecorator('person', 'testRating'),
+    ComponentDecorator,
+  ],
+  component: RatingFieldDisplay,
+  args: {},
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RatingFieldDisplay>;
+
+export const Default: Story = {};
+
+export const Performance = getProfilingStory({
+  componentName: 'RatingFieldDisplay',
+  averageThresholdInMs: 0.5,
+  numberOfRuns: 50,
+  numberOfTestsPerRun: 100,
+});

packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useRatingFieldDisplay.ts

@@ -0,0 +1,23 @@
+import { useContext } from 'react';
+
+import { FieldRatingValue } from '@/object-record/record-field/types/FieldMetadata';
+import { useRecordFieldValue } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
+
+import { FieldContext } from '../../contexts/FieldContext';
+
+export const useRatingFieldDisplay = () => {
+  const { entityId, fieldDefinition } = useContext(FieldContext);
+
+  const fieldName = fieldDefinition.metadata.fieldName;
+
+  const fieldValue = useRecordFieldValue(entityId, fieldName) as
+    | FieldRatingValue
+    | undefined;
+
+  const rating = fieldValue ?? 'RATING_1';
+
+  return {
+    fieldDefinition,
+    rating,
+  };
+};