public render()

in src/Explorer/Controls/Settings/SettingsComponent.tsx [1147:1391]
218 lines of code
15 McCabe index (conditional complexity)

  public render(): JSX.Element {
    const scaleComponentProps: ScaleComponentProps = {
      collection: this.collection,
      database: this.database,
      isFixedContainer: this.isFixedContainer,
      isGlobalSecondaryIndex: this.isGlobalSecondaryIndex,
      onThroughputChange: this.onThroughputChange,
      throughput: this.state.throughput,
      throughputBaseline: this.state.throughputBaseline,
      autoPilotThroughput: this.state.autoPilotThroughput,
      autoPilotThroughputBaseline: this.state.autoPilotThroughputBaseline,
      isAutoPilotSelected: this.state.isAutoPilotSelected,
      wasAutopilotOriginallySet: this.state.wasAutopilotOriginallySet,
      onAutoPilotSelected: this.onAutoPilotSelected,
      onMaxAutoPilotThroughputChange: this.onMaxAutoPilotThroughputChange,
      onScaleSaveableChange: this.onScaleSaveableChange,
      onScaleDiscardableChange: this.onScaleDiscardableChange,
      throughputError: this.state.throughputError,
    };

    if (!this.isCollectionSettingsTab) {
      return (
        <div className="settingsV2MainContainer">
          <div className="settingsV2TabsContainer">
            <ScaleComponent {...scaleComponentProps} />
          </div>
        </div>
      );
    }

    const subSettingsComponentProps: SubSettingsComponentProps = {
      collection: this.collection,
      isAnalyticalStorageEnabled: this.isAnalyticalStorageEnabled,
      changeFeedPolicyVisible: this.changeFeedPolicyVisible,
      timeToLive: this.state.timeToLive,
      timeToLiveBaseline: this.state.timeToLiveBaseline,
      onTtlChange: this.onTtlChange,
      timeToLiveSeconds: this.state.timeToLiveSeconds,
      timeToLiveSecondsBaseline: this.state.timeToLiveSecondsBaseline,
      onTimeToLiveSecondsChange: this.onTimeToLiveSecondsChange,
      displayedTtlSeconds: this.state.displayedTtlSeconds,
      onDisplayedTtlSecondsChange: this.onDisplayedTtlChange,
      geospatialConfigType: this.state.geospatialConfigType,
      geospatialConfigTypeBaseline: this.state.geospatialConfigTypeBaseline,
      onGeoSpatialConfigTypeChange: this.onGeoSpatialConfigTypeChange,
      analyticalStorageTtlSelection: this.state.analyticalStorageTtlSelection,
      analyticalStorageTtlSelectionBaseline: this.state.analyticalStorageTtlSelectionBaseline,
      onAnalyticalStorageTtlSelectionChange: this.onAnalyticalStorageTtlSelectionChange,
      analyticalStorageTtlSeconds: this.state.analyticalStorageTtlSeconds,
      analyticalStorageTtlSecondsBaseline: this.state.analyticalStorageTtlSecondsBaseline,
      onAnalyticalStorageTtlSecondsChange: this.onAnalyticalStorageTtlSecondsChange,
      changeFeedPolicy: this.state.changeFeedPolicy,
      changeFeedPolicyBaseline: this.state.changeFeedPolicyBaseline,
      onChangeFeedPolicyChange: this.onChangeFeedPolicyChange,
      onSubSettingsSaveableChange: this.onSubSettingsSaveableChange,
      onSubSettingsDiscardableChange: this.onSubSettingsDiscardableChange,
    };

    const containerPolicyComponentProps: ContainerPolicyComponentProps = {
      vectorEmbeddingPolicy: this.state.vectorEmbeddingPolicy,
      vectorEmbeddingPolicyBaseline: this.state.vectorEmbeddingPolicyBaseline,
      onVectorEmbeddingPolicyChange: this.onVectorEmbeddingPolicyChange,
      onVectorEmbeddingPolicyDirtyChange: this.onVectorEmbeddingPolicyDirtyChange,
      isVectorSearchEnabled: this.isVectorSearchEnabled,
      fullTextPolicy: this.state.fullTextPolicy,
      fullTextPolicyBaseline: this.state.fullTextPolicyBaseline,
      onFullTextPolicyChange: this.onFullTextPolicyChange,
      onFullTextPolicyDirtyChange: this.onFullTextPolicyDirtyChange,
      isFullTextSearchEnabled: this.isFullTextSearchEnabled,
      shouldDiscardContainerPolicies: this.state.shouldDiscardContainerPolicies,
      resetShouldDiscardContainerPolicyChange: this.resetShouldDiscardContainerPolicies,
      isGlobalSecondaryIndex: this.isGlobalSecondaryIndex,
    };

    const indexingPolicyComponentProps: IndexingPolicyComponentProps = {
      shouldDiscardIndexingPolicy: this.state.shouldDiscardIndexingPolicy,
      resetShouldDiscardIndexingPolicy: this.resetShouldDiscardIndexingPolicy,
      indexingPolicyContent: this.state.indexingPolicyContent,
      indexingPolicyContentBaseline: this.state.indexingPolicyContentBaseline,
      onIndexingPolicyContentChange: this.onIndexingPolicyContentChange,
      logIndexingPolicySuccessMessage: this.logIndexingPolicySuccessMessage,
      indexTransformationProgress: this.state.indexTransformationProgress,
      refreshIndexTransformationProgress: this.refreshIndexTransformationProgress,
      onIndexingPolicyDirtyChange: this.onIndexingPolicyDirtyChange,
      isVectorSearchEnabled: this.isVectorSearchEnabled,
    };

    const mongoIndexingPolicyComponentProps: MongoIndexingPolicyComponentProps = {
      mongoIndexes: this.state.currentMongoIndexes,
      onIndexDrop: this.onIndexDrop,
      indexesToDrop: this.state.indexesToDrop,
      onRevertIndexDrop: this.onRevertIndexDrop,
      indexesToAdd: this.state.indexesToAdd,
      onRevertIndexAdd: this.onRevertIndexAdd,
      onIndexAddOrChange: this.onIndexAddOrChange,
      indexTransformationProgress: this.state.indexTransformationProgress,
      refreshIndexTransformationProgress: this.refreshIndexTransformationProgress,
      onMongoIndexingPolicySaveableChange: this.onMongoIndexingPolicySaveableChange,
      onMongoIndexingPolicyDiscardableChange: this.onMongoIndexingPolicyDiscardableChange,
    };

    const computedPropertiesComponentProps: ComputedPropertiesComponentProps = {
      computedPropertiesContent: this.state.computedPropertiesContent,
      computedPropertiesContentBaseline: this.state.computedPropertiesContentBaseline,
      logComputedPropertiesSuccessMessage: this.logComputedPropertiesSuccessMessage,
      onComputedPropertiesContentChange: this.onComputedPropertiesContentChange,
      onComputedPropertiesDirtyChange: this.onComputedPropertiesDirtyChange,
      resetShouldDiscardComputedProperties: this.resetShouldDiscardComputedProperties,
      shouldDiscardComputedProperties: this.state.shouldDiscardComputedProperties,
    };

    const conflictResolutionPolicyComponentProps: ConflictResolutionComponentProps = {
      collection: this.collection,
      conflictResolutionPolicyMode: this.state.conflictResolutionPolicyMode,
      conflictResolutionPolicyModeBaseline: this.state.conflictResolutionPolicyModeBaseline,
      onConflictResolutionPolicyModeChange: this.onConflictResolutionPolicyModeChange,
      conflictResolutionPolicyPath: this.state.conflictResolutionPolicyPath,
      conflictResolutionPolicyPathBaseline: this.state.conflictResolutionPolicyPathBaseline,
      onConflictResolutionPolicyPathChange: this.onConflictResolutionPolicyPathChange,
      conflictResolutionPolicyProcedure: this.state.conflictResolutionPolicyProcedure,
      conflictResolutionPolicyProcedureBaseline: this.state.conflictResolutionPolicyProcedureBaseline,
      onConflictResolutionPolicyProcedureChange: this.onConflictResolutionPolicyProcedureChange,
      onConflictResolutionDirtyChange: this.onConflictResolutionDirtyChange,
    };

    const throughputBucketsComponentProps: ThroughputBucketsComponentProps = {
      currentBuckets: this.state.throughputBuckets,
      throughputBucketsBaseline: this.state.throughputBucketsBaseline,
      onBucketsChange: this.onThroughputBucketChange,
      onSaveableChange: this.onThroughputBucketsSaveableChange,
    };

    const partitionKeyComponentProps: PartitionKeyComponentProps = {
      database: useDatabases.getState().findDatabaseWithId(this.collection.databaseId),
      collection: this.collection,
      explorer: this.props.settingsTab.getContainer(),
      isReadOnly: isFabricNative(),
    };

    const globalSecondaryIndexComponentProps: GlobalSecondaryIndexComponentProps = {
      collection: this.collection,
      explorer: this.props.settingsTab.getContainer(),
    };

    const tabs: SettingsV2TabInfo[] = [];
    if (!hasDatabaseSharedThroughput(this.collection) && this.offer) {
      tabs.push({
        tab: SettingsV2TabTypes.ScaleTab,
        content: <ScaleComponent {...scaleComponentProps} />,
      });
    }

    tabs.push({
      tab: SettingsV2TabTypes.SubSettingsTab,
      content: <SubSettingsComponent {...subSettingsComponentProps} />,
    });

    if (this.isVectorSearchEnabled || this.isFullTextSearchEnabled) {
      tabs.push({
        tab: SettingsV2TabTypes.ContainerVectorPolicyTab,
        content: <ContainerPolicyComponent {...containerPolicyComponentProps} />,
      });
    }

    if (this.shouldShowIndexingPolicyEditor) {
      tabs.push({
        tab: SettingsV2TabTypes.IndexingPolicyTab,
        content: <IndexingPolicyComponent {...indexingPolicyComponentProps} />,
      });
    } else if (userContext.apiType === "Mongo") {
      const mongoIndexTabContext = this.getMongoIndexTabContent(mongoIndexingPolicyComponentProps);
      if (mongoIndexTabContext) {
        tabs.push({
          tab: SettingsV2TabTypes.IndexingPolicyTab,
          content: mongoIndexTabContext,
        });
      }
    }

    if (this.hasConflictResolution()) {
      tabs.push({
        tab: SettingsV2TabTypes.ConflictResolutionTab,
        content: <ConflictResolutionComponent {...conflictResolutionPolicyComponentProps} />,
      });
    }

    if (this.shouldShowPartitionKeyEditor) {
      tabs.push({
        tab: SettingsV2TabTypes.PartitionKeyTab,
        content: <PartitionKeyComponent {...partitionKeyComponentProps} />,
      });
    }

    if (this.shouldShowComputedPropertiesEditor) {
      tabs.push({
        tab: SettingsV2TabTypes.ComputedPropertiesTab,
        content: <ComputedPropertiesComponent {...computedPropertiesComponentProps} />,
      });
    }

    if (this.throughputBucketsEnabled) {
      tabs.push({
        tab: SettingsV2TabTypes.ThroughputBucketsTab,
        content: <ThroughputBucketsComponent {...throughputBucketsComponentProps} />,
      });
    }

    if (this.isGlobalSecondaryIndex) {
      tabs.push({
        tab: SettingsV2TabTypes.GlobalSecondaryIndexTab,
        content: <GlobalSecondaryIndexComponent {...globalSecondaryIndexComponentProps} />,
      });
    }

    const pivotProps: IPivotProps = {
      onLinkClick: this.onPivotChange,
      selectedKey: SettingsV2TabTypes[this.state.selectedTab],
    };

    const pivotItems = tabs.map((tab) => {
      const pivotItemProps: IPivotItemProps = {
        itemKey: SettingsV2TabTypes[tab.tab],
        style: { marginTop: 20 },
        headerText: getTabTitle(tab.tab),
      };

      return (
        <PivotItem key={pivotItemProps.itemKey} {...pivotItemProps}>
          {tab.content}
        </PivotItem>
      );
    });

    return (
      <div className="settingsV2MainContainer">
        {this.shouldShowKeyspaceSharedThroughputMessage() && (
          <div>This table shared throughput is configured at the keyspace</div>
        )}

        <div className="settingsV2TabsContainer">
          <Pivot {...pivotProps}>{pivotItems}</Pivot>
        </div>
      </div>
    );
  }