content: t()

in hugegraph-hubble/hubble-fe/src/components/graph-management/data-analyze/DynamicAddEdge.tsx [149:271]
119 lines of code
6 McCabe index (conditional complexity)

                content: t('addition.common.add-fail'),
                size: 'medium',
                showCloseIcon: false
              });
            }

            handleDrawerClose();
          }}
        >
          {t('addition.common.add')}
        </Button>,
        <Button size="medium" style={{ width: 60 }} onClick={handleDrawerClose}>
          {t('addition.common.cancel')}
        </Button>
      ]}
    >
      <div className="data-analyze-dynamic-add-options">
        <div
          className="data-analyze-dynamic-add-option"
          style={{ marginBottom: 24 }}
        >
          <div>
            {title === t('addition.common.out-edge')
              ? t('addition.common.source')
              : t('addition.common.target')}
            ：
          </div>
          <span>{dataAnalyzeStore.rightClickedGraphData.id}</span>
        </div>
        <div className="data-analyze-dynamic-add-option">
          <div>{t('addition.common.edge-type')}：</div>
          <Select
            size="medium"
            trigger="click"
            selectorName={t('addition.common.edge-type-select-desc')}
            value={dataAnalyzeStore.newGraphEdgeConfigs.label}
            width={420}
            onChange={(value: string) => {
              dataAnalyzeStore.setNewGraphDataConfig('edge', 'label', value);
              dataAnalyzeStore.syncNewGraphDataProperties('edge');
              dataAnalyzeStore.initValidateAddGraphDataErrorMessage('edge');
            }}
            dropdownClassName="data-analyze-sidebar-select"
          >
            {dataAnalyzeStore.relatedGraphEdges.map((label) => (
              <Select.Option value={label} key={label}>
                {label}
              </Select.Option>
            ))}
          </Select>
        </div>

        {!isUndefined(selectedEdgeLabel) && (
          <>
            <div
              className="data-analyze-dynamic-add-option"
              // override style bugs in index.less
              style={{ alignItems: 'normal' }}
            >
              <div style={{ lineHeight: '32px' }}>
                {title === t('addition.common.out-edge')
                  ? t('addition.common.target')
                  : t('addition.common.source')}
                ：
              </div>
              <div>
                <Input
                  size="medium"
                  width={420}
                  placeholder={`${t('addition.common.please-input')}${
                    title === t('addition.common.out-edge')
                      ? t('addition.common.target')
                      : t('addition.common.source')
                  }ID`}
                  errorLocation="layer"
                  errorMessage={
                    dataAnalyzeStore.validateAddGraphEdgeErrorMessage!.id
                  }
                  value={dataAnalyzeStore.newGraphEdgeConfigs.id}
                  onChange={(e: any) => {
                    dataAnalyzeStore.setNewGraphDataConfig(
                      'edge',
                      'id',
                      e.value
                    );

                    dataAnalyzeStore.validateAddGraphEdge('id', false);
                  }}
                  onBlur={() => {
                    dataAnalyzeStore.validateAddGraphEdge('id', false);
                  }}
                />
              </div>
            </div>

            {dataAnalyzeStore.newGraphEdgeConfigs.properties.nonNullable
              .size !== 0 && (
              <div className="data-analyze-dynamic-add-option data-analyze-dynamic-add-option-with-expand">
                <div>{t('addition.common.required-property')}：</div>
                <div className="data-analyze-dynamic-add-option-expands">
                  <div className="data-analyze-dynamic-add-option-expand">
                    <div>{t('addition.common.property')}</div>
                    <div>{t('addition.common.property-value')}</div>
                  </div>
                  {nonNullableProperties.map((property) => (
                    <div
                      className="data-analyze-dynamic-add-option-expand"
                      key={property}
                    >
                      <div>{property}</div>
                      <div>
                        <Input
                          size="medium"
                          width={190}
                          placeholder={t('addition.common.property-input-desc')}
                          errorLocation="layer"
                          errorMessage={dataAnalyzeStore.validateAddGraphEdgeErrorMessage?.properties.nonNullable.get(
                            property
                          )}
                          value={dataAnalyzeStore.newGraphEdgeConfigs.properties.nonNullable.get(
                            property
                          )}
                          onChange={(e: any) => {