tnsu-approval-route/frontend/src/webparts/approvalAdmin/ApprovalAdminWebPart.ts

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import { type IPropertyPaneConfiguration, PropertyPaneDropdown, PropertyPaneTextField } from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';

import ApprovalAdmin from './components/ApprovalAdmin';
import { IApprovalAdminProps } from './components/IApprovalAdminProps';

export interface IApprovalAdminWebPartProps {
  apiBaseUrl: string;
  aadResourceId: string;
  portalBaseUrl: string;
}

// Единственные два адреса, которыми реально пользуются (прод и локальный backend,
// см. backend/Tnsu.ApprovalRoute.Api/Properties/launchSettings.json) — селект
// вместо текстового поля, чтобы переключаться одним кликом, а не перепечатывать
// url и рисковать опечаткой в проде.
const API_BASE_URL_PROD = 'https://api.tnsu.kz/approval-route';
const API_BASE_URL_LOCAL = 'http://localhost:5080';

export default class ApprovalAdminWebPart extends BaseClientSideWebPart<IApprovalAdminWebPartProps> {

  public render(): void {
    const element: React.ReactElement<IApprovalAdminProps> = React.createElement(ApprovalAdmin, {
      context: this.context,
      apiBaseUrl: this.properties.apiBaseUrl,
      aadResourceId: this.properties.aadResourceId,
      portalBaseUrl: this.properties.portalBaseUrl
    });

    ReactDom.render(element, this.domElement);
  }

  protected onInit(): Promise<void> {
    // Прод-адрес по умолчанию: пакуем именно под прод (heft package-solution --production).
    // Для локальной разработки переключите в панели свойств веб-части на «Локально».
    this.properties.apiBaseUrl = this.properties.apiBaseUrl || API_BASE_URL_PROD;
    this.properties.aadResourceId = this.properties.aadResourceId || 'api://9232d9e2-9807-4753-808f-07250e5474b0';
    this.properties.portalBaseUrl = this.properties.portalBaseUrl || 'https://api.tnsu.kz';
    return Promise.resolve();
  }

  protected onDispose(): void {
    ReactDom.unmountComponentAtNode(this.domElement);
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: 'Подключение к Tnsu.ApprovalRoute.Api'
          },
          groups: [
            {
              groupName: 'API',
              groupFields: [
                PropertyPaneDropdown('apiBaseUrl', {
                  label: 'Api Base Url',
                  selectedKey: this.properties.apiBaseUrl,
                  options: [
                    { key: API_BASE_URL_PROD, text: `Прод (${API_BASE_URL_PROD})` },
                    { key: API_BASE_URL_LOCAL, text: `Локально (${API_BASE_URL_LOCAL})` }
                  ]
                }),
                PropertyPaneTextField('portalBaseUrl', {
                  label: 'Портал справочников (api.tnsu.kz)',
                  description: 'Откуда берутся списки компаний и отделов. Ходим напрямую, тем же AAD-токеном.'
                })
              ]
            }
          ]
        }
      ]
    };
  }
}