Repository: strapi/strapi
File: packages/plugins/i18n/admin/src/contentManagerHooks/editView.tsx (TypeScript)

Code before:
  return {
    layout: {
      ...layout,
      components,
      layout: layout.layout.map((panel) => panel.map((row) => row.map(addLabelActionToField))),
    },
  } satisfies Pick<MutateEditViewArgs, 'layout'>;
};

const addLabelActionToField = (field: EditFieldLayout) => ({
  ...field,
  labelAction: <LabelAction name={field.name} attribute={field.attribute} />,
});

interface LabelActionProps {
  name: string;
  attribute: EditFieldLayout['attribute'];
}

const LabelAction = ({ name, attribute }: LabelActionProps) => {
  const { formatMessage } = useIntl();
  const { slug: model } = useParams<{ slug: string }>();
  const { edit } = useDocumentLayout(model!);

  const isLocalized = React.useMemo<boolean>(() => {
    return getEffectiveLocalization(name, attribute, edit);
  }, [name, attribute, edit]);

  if (!isLocalized) {
    return null;
  }

  const title = {
    id: getTranslation('Field.localized'),
    defaultMessage: 'This value is unique for the selected locale',
  } as const;

  return (
    <Span tag="span">
      <VisuallyHidden tag="span">{formatMessage(title)}</VisuallyHidden>
      <Tooltip label={formatMessage(title)}>
        {React.cloneElement((<Earth />) as React.ReactElement, {
          'aria-hidden': true,
          focusable: false, // See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable
        })}
      </Tooltip>
    </Span>
  );
};

const Span = styled(Flex)`

Review comment (performance):
Is the useMemo necessary? The function just determines if the attribute has i18n enabled so I don't think it's a very expensive operation

Code after:
      ...layout,
      components,
      layout: layout.layout.map((panel) => panel.map((row) => row.map(decorateField))),
    },
  } satisfies Pick<MutateEditViewArgs, 'layout'>;
};

const isFieldLocalized = (attribute: EditFieldLayout['attribute'], layout: EditLayout) => {
  const contentTypeLocalized =
    !!(layout.options as any)?.i18n && !!(layout.options as any).i18n.localized;

  if (!contentTypeLocalized) {
    return false;
  }

  const pluginOptions =
    attribute && typeof attribute === 'object' && 'pluginOptions' in (attribute as object)
      ? (attribute as { pluginOptions?: { i18n?: { localized?: boolean } } }).pluginOptions
      : undefined;

  return pluginOptions?.i18n?.localized === true;
};

const addLabelActionToField = (field: EditFieldLayout, layout: EditLayout) => {
  const localized = isFieldLocalized(field.attribute, layout);

  if (!localized) {
    return field;
  }

  const title: MessageDescriptor = {
    id: getTranslation('Field.localized'),
    defaultMessage: 'This value is unique for the selected locale',
  };

  return {
    ...field,
    labelAction: <LabelAction title={title} />,
  };
};

/* -------------------------------------------------------------------------------------------------
 * LabelAction
 * -----------------------------------------------------------------------------------------------*/

interface LabelActionProps {
  title: MessageDescriptor;
}

const LabelAction = ({ title }: LabelActionProps) => {
  const { formatMessage } = useIntl();