name: formatMessage()

in Composer/packages/client/src/pages/knowledge-base/table-view.tsx [551:683]
127 lines of code
18 McCabe index (conditional complexity)

        name: formatMessage('Question'),
        fieldName: 'question',
        minWidth: 250,
        maxWidth: 450,
        isResizable: true,
        data: 'string',
        onRender: (item: QnASectionItem, index) => {
          const isExpanded = expandedIndex === index;
          const questions = isExpanded ? item.Questions : item.Questions.slice(0, 1);
          const isSourceSectionInDialog =
            item.fileId.endsWith(qnaSuffix(locale)) && !dialogId.endsWith(qnaSuffix(locale));
          const isAllowEdit = dialogId !== 'all' && !isSourceSectionInDialog;
          const isCreatingQnA =
            item.fileId === createQnAPairSettings.groupKey && index === createQnAPairSettings.sectionIndex;

          const addQuestionButton = (
            <ActionButton
              styles={addAlternative}
              onClick={() => {
                setCreatingQuestionInKthSection(item.sectionId);
                TelemetryClient.track('AlternateQnAPhraseAdded');
              }}
            >
              {formatMessage('+ Add alternative phrasing')}
            </ActionButton>
          );

          return (
            <div data-is-focusable css={formCell}>
              {questions.map((question, qIndex: number) => {
                const isQuestionEmpty = question.content === '';
                const isOnlyQuestion = questions.length === 1 && qIndex === 0;
                return (
                  <div key={question.id}>
                    <EditableField
                      key={question.id}
                      ariaLabel={formatMessage(`Question is {content}`, { content: question.content })}
                      containerStyles={{ name: 'questionField', styles: 'height: 35px' }}
                      depth={0}
                      disabled={isAllowEdit}
                      enableIcon={isExpanded}
                      extraContent={
                        qIndex === 0 && !isExpanded && !isQuestionEmpty ? ` (${item.Questions.length})` : ''
                      }
                      iconProps={{
                        iconName: 'Cancel',
                      }}
                      id={question.id}
                      name={question.content}
                      placeholder={formatMessage('Add new question')}
                      required={isOnlyQuestion}
                      requiredMessage={formatMessage('At least one question is required')}
                      resizable={false}
                      styles={editableField}
                      value={question.content}
                      onBlur={(_id, value = '') => {
                        const newValue = value?.trim();
                        const isChanged = question.content !== newValue;
                        if ((!newValue && isOnlyQuestion) || !isChanged) return;

                        if (isCreatingQnA) {
                          const creatingQnAItem = createQnAPairSettings.item;
                          const fileId = createQnAPairSettings.groupKey;
                          if (!creatingQnAItem) return;
                          const updatedItem = {
                            ...creatingQnAItem,
                            Question: newValue,
                          };
                          setCreateQnAPairSettings({
                            ...createQnAPairSettings,
                            item: updatedItem,
                          });
                          onCreateNewQnAPairsEnd(fileId, updatedItem);
                        } else {
                          onUpdateQnAQuestion(item.fileId, item.sectionId, question.id, newValue);
                        }
                      }}
                      onChange={() => {}}
                      onFocus={() => setExpandedIndex(index)}
                    />
                  </div>
                );
              })}

              {kthSectionIsCreatingQuestion === item.sectionId ? (
                <EditableField
                  key={''}
                  componentFocusOnMount
                  required
                  ariaLabel={formatMessage('Question is empty now')}
                  containerStyles={{ name: 'questionField', styles: 'height: 35px' }}
                  depth={0}
                  disabled={isAllowEdit}
                  id={'NewQuestion'}
                  name={'New Question'}
                  placeholder={formatMessage('Add new question')}
                  styles={editableField}
                  value={''}
                  onBlur={(_id, value) => {
                    const newValue = value?.trim();
                    if (!newValue) {
                      setCreatingQuestionInKthSection('');
                      return;
                    }

                    if (isCreatingQnA) {
                      const creatingQnAItem = createQnAPairSettings.item;
                      const fileId = createQnAPairSettings.groupKey;
                      if (!creatingQnAItem) return;
                      const updatedItem = {
                        ...creatingQnAItem,
                        Question: newValue,
                      };
                      setCreateQnAPairSettings({
                        ...createQnAPairSettings,
                        item: updatedItem,
                      });
                      onCreateNewQnAPairsEnd(fileId, updatedItem);
                    } else {
                      onCreateNewQuestion(item.fileId, item.sectionId, newValue);
                    }

                    setCreatingQuestionInKthSection('');
                  }}
                  onChange={() => {}}
                  onFocus={() => setExpandedIndex(index)}
                />
              ) : (
                addQuestionButton
              )}
            </div>
          );
        },