Untitled

  const renderCustomFieldsWithLabel = ({
    isLoadingCustomFields,
    customFieldsControlObject,
    requiredFields,
    customFieldsConfig,
  }: {
    isLoadingCustomFields: boolean;
    customFieldsControlObject: CreateTicketStoreState['customFieldsControlObject'];
    requiredFields: TicketFieldConfig[];
    customFieldsConfig: TicketFieldConfig[];
  }) => {
    const getCustomFieldsLabel = (): string => {
      const selectedRequiredFields = Object.values(customFieldsControlObject)
        .filter((value: InputOption | null) => value !== null)
        .map(value => value.name);
      const allFieldsConfigured =
        selectedRequiredFields.length === requiredFields.length;
      const customFieldsLabel = allFieldsConfigured
        ? selectedRequiredFields.join('/')
        : 'Selected project/type';
      return `${customFieldsLabel} requires filling the following values:`;
    }

    return (
      (customFieldsConfig.length > 0 || isLoadingCustomFields) &&
      <>
        <Grid item xs={12}>
          <Divider />
        </Grid>
        <Grid item xs={12}>
          {isLoadingCustomFields && (
            <>
              <Typography>Loading fields</Typography>
              <span style={{ display: 'inline-block', width: 20 }}></span>
              <CircularProgress size={20} />
            </>
          )}
          {!isLoadingCustomFields && (
            <>
              <Typography>
                {getCustomFieldsLabel()}
              </Typography>
            </>
          )}
        </Grid>
        {customFieldsConfig.map(field => prepareFieldUIItem(field))}
      </>
    );
  };