@strapi/admin 4.15.0 → 4.15.2

package/admin/src/content-manager/components/InputUID/endActionStyle.js

@@ -1,43 +0,0 @@
-import { FieldAction, Flex } from '@strapi/design-system';
-import styled, { keyframes } from 'styled-components';
-
-export const FieldActionWrapper = styled(FieldAction)`
-  svg {
-    height: 1rem;
-    width: 1rem;
-    path {
-      fill: ${({ theme }) => theme.colors.neutral400};
-    }
-  }
-
-  svg:hover {
-    path {
-      fill: ${({ theme }) => theme.colors.primary600};
-    }
-  }
-`;
-
-export const TextValidation = styled(Flex)`
-  svg {
-    height: ${12 / 16}rem;
-    width: ${12 / 16}rem;
-
-    path {
-      fill: ${({ theme, available }) =>
-        available ? theme.colors.success600 : theme.colors.danger600};
-    }
-  }
-`;
-
-const rotation = keyframes`
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(359deg);
-  }
-`;
-
-export const LoadingWrapper = styled(Flex)`
-  animation: ${rotation} 2s infinite linear;
-`;

package/admin/src/content-manager/components/InputUID/index.js

@@ -1,286 +0,0 @@
-import * as React from 'react';
-
-import { Flex, TextInput, Typography } from '@strapi/design-system';
-import {
-  useAPIErrorHandler,
-  useCMEditViewDataManager,
-  useFetchClient,
-  useNotification,
-} from '@strapi/helper-plugin';
-import { CheckCircle, ExclamationMarkCircle, Loader, Refresh } from '@strapi/icons';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import { useMutation, useQuery } from 'react-query';
-
-import { useDebounce } from '../../../hooks/useDebounce';
-
-import { FieldActionWrapper, LoadingWrapper, TextValidation } from './endActionStyle';
-import UID_REGEX from './regex';
-
-const InputUID = React.forwardRef(
-  (
-    {
-      contentTypeUID,
-      hint,
-      disabled,
-      error,
-      intlLabel,
-      labelAction,
-      name,
-      onChange,
-      value,
-      placeholder,
-      required,
-    },
-    forwardedRef
-  ) => {
-    const [availability, setAvailability] = React.useState(null);
-    const [showRegenerate, setShowRegenerate] = React.useState(false);
-    /**
-     * @type {string | null}
-     */
-    const debouncedValue = useDebounce(value, 300);
-    const { modifiedData, initialData } = useCMEditViewDataManager();
-    const toggleNotification = useNotification();
-    const { formatAPIError } = useAPIErrorHandler();
-    const { formatMessage } = useIntl();
-    const { post } = useFetchClient();
-
-    const label = intlLabel.id
-      ? formatMessage(
-          { id: intlLabel.id, defaultMessage: intlLabel.defaultMessage },
-          { ...intlLabel.values }
-        )
-      : name;
-
-    const formattedPlaceholder = placeholder
-      ? formatMessage(
-          { id: placeholder.id, defaultMessage: placeholder.defaultMessage },
-          { ...placeholder.values }
-        )
-      : '';
-
-    /**
-     * @type {import('react-query').UseQueryResult<string>}
-     */
-    const { data: defaultGeneratedUID, isLoading: isGeneratingDefaultUID } = useQuery({
-      queryKey: ['uid', { contentTypeUID, field: name, data: modifiedData }],
-      async queryFn({ queryKey }) {
-        const [, body] = queryKey;
-
-        const {
-          data: { data },
-        } = await post('/content-manager/uid/generate', body);
-
-        return data;
-      },
-      onError(err) {
-        toggleNotification({
-          type: 'warning',
-          message: formatAPIError(err),
-        });
-      },
-      enabled: !value && required,
-    });
-
-    /**
-     * If the defaultGeneratedUID is available, then we set it as the value,
-     * but we also want to set it as the initialValue too.
-     */
-    React.useEffect(() => {
-      if (defaultGeneratedUID) {
-        onChange({ target: { name, value: defaultGeneratedUID, type: 'text' } }, true);
-      }
-    }, [defaultGeneratedUID, name, onChange]);
-
-    const { mutate: generateUID, isLoading: isGeneratingUID } = useMutation({
-      async mutationFn(body) {
-        const {
-          data: { data },
-        } = await post('/content-manager/uid/generate', body);
-
-        return data;
-      },
-      onSuccess(data) {
-        onChange({ target: { name, value: data, type: 'text' } });
-      },
-      onError(err) {
-        toggleNotification({
-          type: 'warning',
-          message: formatAPIError(err),
-        });
-      },
-    });
-
-    /**
-     * @type {import('react-query').UseQueryResult<{ isAvailable: boolean }>
-     */
-    const { data: availabilityData, isLoading: isCheckingAvailability } = useQuery({
-      queryKey: [
-        'uid',
-        { contentTypeUID, field: name, value: debouncedValue ? debouncedValue.trim() : '' },
-      ],
-      async queryFn({ queryKey }) {
-        const [, body] = queryKey;
-
-        const { data } = await post('/content-manager/uid/check-availability', body);
-
-        return data;
-      },
-      enabled: Boolean(
-        debouncedValue !== initialData[name] &&
-          debouncedValue &&
-          UID_REGEX.test(debouncedValue.trim())
-      ),
-      onError(err) {
-        toggleNotification({
-          type: 'warning',
-          message: formatAPIError(err),
-        });
-      },
-    });
-
-    React.useEffect(() => {
-      /**
-       * always store the data in state because that way as seen below
-       * we can then remove the data to stop showing the label.
-       */
-      setAvailability(availabilityData);
-
-      let timer;
-
-      if (availabilityData?.isAvailable) {
-        timer = setTimeout(() => {
-          setAvailability(null);
-        }, 4000);
-      }
-
-      return () => {
-        if (timer) {
-          clearTimeout(timer);
-        }
-      };
-    }, [availabilityData]);
-
-    const isLoading = isGeneratingDefaultUID || isGeneratingUID || isCheckingAvailability;
-
-    return (
-      <TextInput
-        ref={forwardedRef}
-        disabled={disabled}
-        error={error}
-        endAction={
-          <Flex position="relative" gap={1}>
-            {availability && !showRegenerate && (
-              <TextValidation
-                alignItems="center"
-                gap={1}
-                justifyContent="flex-end"
-                available={!!availability?.isAvailable}
-                data-not-here-outer
-                position="absolute"
-                pointerEvents="none"
-                right={6}
-                width="100px"
-              >
-                {availability?.isAvailable ? <CheckCircle /> : <ExclamationMarkCircle />}
-
-                <Typography
-                  textColor={availability.isAvailable ? 'success600' : 'danger600'}
-                  variant="pi"
-                >
-                  {formatMessage(
-                    availability.isAvailable
-                      ? {
-                          id: 'content-manager.components.uid.available',
-                          defaultMessage: 'Available',
-                        }
-                      : {
-                          id: 'content-manager.components.uid.unavailable',
-                          defaultMessage: 'Unavailable',
-                        }
-                  )}
-                </Typography>
-              </TextValidation>
-            )}
-
-            {!disabled && (
-              <>
-                {showRegenerate && (
-                  <TextValidation alignItems="center" justifyContent="flex-end" gap={1}>
-                    <Typography textColor="primary600" variant="pi">
-                      {formatMessage({
-                        id: 'content-manager.components.uid.regenerate',
-                        defaultMessage: 'Regenerate',
-                      })}
-                    </Typography>
-                  </TextValidation>
-                )}
-
-                <FieldActionWrapper
-                  onClick={() => generateUID({ contentTypeUID, field: name, data: modifiedData })}
-                  label={formatMessage({
-                    id: 'content-manager.components.uid.regenerate',
-                    defaultMessage: 'Regenerate',
-                  })}
-                  onMouseEnter={() => setShowRegenerate(true)}
-                  onMouseLeave={() => setShowRegenerate(false)}
-                >
-                  {isLoading ? (
-                    <LoadingWrapper data-testid="loading-wrapper">
-                      <Loader />
-                    </LoadingWrapper>
-                  ) : (
-                    <Refresh />
-                  )}
-                </FieldActionWrapper>
-              </>
-            )}
-          </Flex>
-        }
-        hint={hint}
-        label={label}
-        labelAction={labelAction}
-        name={name}
-        onChange={onChange}
-        placeholder={formattedPlaceholder}
-        value={value || ''}
-        required={required}
-      />
-    );
-  }
-);
-
-InputUID.propTypes = {
-  contentTypeUID: PropTypes.string.isRequired,
-  disabled: PropTypes.bool,
-  error: PropTypes.string,
-  intlLabel: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    defaultMessage: PropTypes.string.isRequired,
-    values: PropTypes.object,
-  }).isRequired,
-  labelAction: PropTypes.element,
-  name: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-  value: PropTypes.string,
-  placeholder: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    defaultMessage: PropTypes.string.isRequired,
-    values: PropTypes.object,
-  }),
-  required: PropTypes.bool,
-  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
-};
-
-InputUID.defaultProps = {
-  disabled: false,
-  error: undefined,
-  labelAction: undefined,
-  placeholder: undefined,
-  value: '',
-  required: false,
-  hint: '',
-};
-
-export { InputUID };

package/admin/src/content-manager/components/InputUID/regex.js

@@ -1,3 +0,0 @@
-const UID_REGEX = /^[A-Za-z0-9-_.~]*$/;
-
-export default UID_REGEX;

package/admin/src/content-manager/components/Inputs/index.js

@@ -1,288 +0,0 @@
-import React, { memo, useMemo } from 'react';
-
-import { GenericInput, NotAllowedInput, useLibrary } from '@strapi/helper-plugin';
-import get from 'lodash/get';
-import isEqual from 'lodash/isEqual';
-import omit from 'lodash/omit';
-import take from 'lodash/take';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-
-import { useContentTypeLayout } from '../../hooks';
-import { getFieldName } from '../../utils';
-import Blocks from '../BlocksEditor';
-import { InputUID } from '../InputUID';
-import { RelationInputDataManager } from '../RelationInputDataManager';
-import Wysiwyg from '../Wysiwyg';
-
-import { connect, generateOptions, getInputType, select, VALIDATIONS_TO_OMIT } from './utils';
-
-function Inputs({
-  allowedFields,
-  componentUid,
-  fieldSchema,
-  formErrors,
-  isCreatingEntry,
-  keys,
-  labelAction,
-  metadatas,
-  onChange,
-  readableFields,
-  shouldNotRunValidations,
-  queryInfos,
-  value,
-  size,
-  customFieldInputs,
-}) {
-  const { fields } = useLibrary();
-  const { formatMessage } = useIntl();
-  const { contentType: currentContentTypeLayout } = useContentTypeLayout();
-
-  const disabled = useMemo(() => !get(metadatas, 'editable', true), [metadatas]);
-  const { type, customField: customFieldUid } = fieldSchema;
-  const error = get(formErrors, [keys], null);
-
-  const fieldName = useMemo(() => {
-    return getFieldName(keys);
-  }, [keys]);
-
-  const validations = useMemo(() => {
-    const inputValidations = omit(
-      fieldSchema,
-      shouldNotRunValidations
-        ? [...VALIDATIONS_TO_OMIT, 'required', 'minLength']
-        : VALIDATIONS_TO_OMIT
-    );
-
-    const regexpString = fieldSchema.regex || null;
-
-    if (regexpString) {
-      const regexp = new RegExp(regexpString);
-
-      if (regexp) {
-        inputValidations.regex = regexp;
-      }
-    }
-
-    return inputValidations;
-  }, [fieldSchema, shouldNotRunValidations]);
-
-  const isRequired = useMemo(() => get(validations, ['required'], false), [validations]);
-
-  const isChildOfDynamicZone = useMemo(() => {
-    const attributes = get(currentContentTypeLayout, ['attributes'], {});
-    const foundAttributeType = get(attributes, [fieldName[0], 'type'], null);
-
-    return foundAttributeType === 'dynamiczone';
-  }, [currentContentTypeLayout, fieldName]);
-
-  const inputType = getInputType(type);
-
-  const inputValue = type === 'media' && !value ? [] : value;
-
-  const isUserAllowedToEditField = useMemo(() => {
-    const joinedName = fieldName.join('.');
-
-    if (allowedFields.includes(joinedName)) {
-      return true;
-    }
-
-    if (isChildOfDynamicZone) {
-      return allowedFields.includes(fieldName[0]);
-    }
-
-    const isChildOfComponent = fieldName.length > 1;
-
-    if (isChildOfComponent) {
-      const parentFieldName = take(fieldName, fieldName.length - 1).join('.');
-
-      return allowedFields.includes(parentFieldName);
-    }
-
-    return false;
-  }, [allowedFields, fieldName, isChildOfDynamicZone]);
-
-  const isUserAllowedToReadField = useMemo(() => {
-    const joinedName = fieldName.join('.');
-
-    if (readableFields.includes(joinedName)) {
-      return true;
-    }
-
-    if (isChildOfDynamicZone) {
-      return readableFields.includes(fieldName[0]);
-    }
-
-    const isChildOfComponent = fieldName.length > 1;
-
-    if (isChildOfComponent) {
-      const parentFieldName = take(fieldName, fieldName.length - 1).join('.');
-
-      return readableFields.includes(parentFieldName);
-    }
-
-    return false;
-  }, [readableFields, fieldName, isChildOfDynamicZone]);
-
-  const shouldDisplayNotAllowedInput = useMemo(() => {
-    return isUserAllowedToReadField || isUserAllowedToEditField;
-  }, [isUserAllowedToEditField, isUserAllowedToReadField]);
-
-  const shouldDisableField = useMemo(() => {
-    if (!isCreatingEntry) {
-      const doesNotHaveRight = isUserAllowedToReadField && !isUserAllowedToEditField;
-
-      if (doesNotHaveRight) {
-        return true;
-      }
-
-      return disabled;
-    }
-
-    return disabled;
-  }, [disabled, isCreatingEntry, isUserAllowedToEditField, isUserAllowedToReadField]);
-
-  const options = useMemo(
-    () => generateOptions(fieldSchema.enum || [], isRequired),
-    [fieldSchema, isRequired]
-  );
-
-  const { label, description, placeholder, visible } = metadatas;
-
-  if (visible === false) {
-    return null;
-  }
-
-  if (!shouldDisplayNotAllowedInput) {
-    return (
-      <NotAllowedInput
-        description={description ? { id: description, defaultMessage: description } : null}
-        intlLabel={{ id: label, defaultMessage: label }}
-        labelAction={labelAction}
-        error={error && formatMessage(error)}
-        name={keys}
-        required={isRequired}
-      />
-    );
-  }
-
-  if (type === 'relation') {
-    return (
-      <RelationInputDataManager
-        {...metadatas}
-        {...fieldSchema}
-        componentUid={componentUid}
-        description={
-          metadatas.description
-            ? formatMessage({
-                id: metadatas.description,
-                defaultMessage: metadatas.description,
-              })
-            : undefined
-        }
-        intlLabel={{
-          id: metadatas.label,
-          defaultMessage: metadatas.label,
-        }}
-        labelAction={labelAction}
-        isUserAllowedToEditField={isUserAllowedToEditField}
-        isUserAllowedToReadField={isUserAllowedToReadField}
-        name={keys}
-        placeholder={
-          metadatas.placeholder
-            ? {
-                id: metadatas.placeholder,
-                defaultMessage: metadatas.placeholder,
-              }
-            : null
-        }
-        queryInfos={queryInfos}
-        size={size}
-        value={value}
-        error={error && formatMessage(error)}
-      />
-    );
-  }
-
-  const customInputs = {
-    uid: InputUID,
-    media: fields.media,
-    wysiwyg: Wysiwyg,
-    blocks: Blocks,
-    ...fields,
-    ...customFieldInputs,
-  };
-
-  return (
-    <GenericInput
-      attribute={fieldSchema}
-      autoComplete="new-password"
-      intlLabel={{ id: label, defaultMessage: label }}
-      // in case the default value of the boolean is null, attribute.default doesn't exist
-      isNullable={inputType === 'bool' && [null, undefined].includes(fieldSchema.default)}
-      description={description ? { id: description, defaultMessage: description } : null}
-      disabled={shouldDisableField}
-      error={error}
-      labelAction={labelAction}
-      contentTypeUID={currentContentTypeLayout.uid}
-      customInputs={customInputs}
-      multiple={fieldSchema.multiple || false}
-      name={keys}
-      onChange={onChange}
-      options={options}
-      placeholder={placeholder ? { id: placeholder, defaultMessage: placeholder } : null}
-      required={fieldSchema.required || false}
-      step={getStep(type)}
-      type={customFieldUid || inputType}
-      // validations={validations}
-      value={inputValue}
-      withDefaultValue={false}
-    />
-  );
-}
-
-Inputs.defaultProps = {
-  componentUid: undefined,
-  formErrors: {},
-  labelAction: undefined,
-  size: undefined,
-  value: null,
-  queryInfos: {},
-  customFieldInputs: {},
-};
-
-Inputs.propTypes = {
-  allowedFields: PropTypes.array.isRequired,
-  componentUid: PropTypes.string,
-  fieldSchema: PropTypes.object.isRequired,
-  formErrors: PropTypes.object,
-  keys: PropTypes.string.isRequired,
-  isCreatingEntry: PropTypes.bool.isRequired,
-  labelAction: PropTypes.element,
-  metadatas: PropTypes.object.isRequired,
-  onChange: PropTypes.func.isRequired,
-  readableFields: PropTypes.array.isRequired,
-  size: PropTypes.number,
-  shouldNotRunValidations: PropTypes.bool.isRequired,
-  value: PropTypes.any,
-  queryInfos: PropTypes.shape({
-    containsKey: PropTypes.string,
-    defaultParams: PropTypes.object,
-    endPoint: PropTypes.string,
-  }),
-  customFieldInputs: PropTypes.object,
-};
-
-const getStep = (type) => {
-  switch (type) {
-    case 'float':
-    case 'decimal':
-      return 0.01;
-    default:
-      return 1;
-  }
-};
-
-const Memoized = memo(Inputs, isEqual);
-
-export default connect(Memoized, select);

package/admin/src/content-manager/components/Inputs/utils/VALIDATIONS_TO_OMIT.js

@@ -1,13 +0,0 @@
-const validationsToOmit = [
-  'type',
-  'model',
-  'via',
-  'collection',
-  'default',
-  'plugin',
-  'enum',
-  'regex',
-  'pluginOptions',
-];
-
-export default validationsToOmit;

package/admin/src/content-manager/components/Inputs/utils/connect.js

@@ -1,12 +0,0 @@
-import React from 'react';
-
-function connect(WrappedComponent, select) {
-  return (props) => {
-    // eslint-disable-next-line react/prop-types
-    const selectors = select(props.keys);
-
-    return <WrappedComponent {...props} {...selectors} />;
-  };
-}
-
-export default connect;

package/admin/src/content-manager/components/Inputs/utils/generateOptions.js

@@ -1,32 +0,0 @@
-const generateOptions = (options, isRequired = false) => {
-  return [
-    {
-      metadatas: {
-        intlLabel: {
-          id: 'components.InputSelect.option.placeholder',
-          defaultMessage: 'Choose here',
-        },
-        disabled: isRequired,
-        hidden: isRequired,
-      },
-      key: '__enum_option_null',
-      value: '',
-    },
-    ...options.map((option) => {
-      return {
-        metadatas: {
-          intlLabel: {
-            id: option,
-            defaultMessage: option,
-          },
-          hidden: false,
-          disabled: false,
-        },
-        key: option,
-        value: option,
-      };
-    }),
-  ];
-};
-
-export default generateOptions;