export function ConfigEditor()

in src/components/ConfigEditor.tsx [25:155]
121 lines of code
14 McCabe index (conditional complexity)

export function ConfigEditor(props: Props) {
  const { options, onOptionsChange } = props;

  const onURLChange = (event: ChangeEvent<HTMLInputElement>) => {
    const jsonData = {
      ...options.jsonData,
      URL: event.target.value,
    };
    onOptionsChange({ ...options, jsonData });
  };

  const onTypeChange = (v: any) => {
    const secureJsonData = (options.secureJsonData || {}) as MySecureJsonData;
    const jsonData = {
      ...options.jsonData,
      type: v.value,
      username: '',
      basicAuth: '',
    };
    
    if (v.value === AuthenticationType[0].value) {
      secureJsonData.password = secureJsonData.password;
      jsonData.username = options.jsonData.username;
      jsonData.basicAuth = options.jsonData.basicAuth;
    }
    const p = {
      ...options,
      jsonData,
      secureJsonData,
    };
    onOptionsChange(p);
  };

  const onUserChange = (event: ChangeEvent<HTMLInputElement>) => {
    const d = options.jsonData.basicAuth && options.jsonData.basicAuth.split('Basic ')[1] || '';
    const password = d && atob(d).split(':')[1] || '';
    const basicAuth = `Basic ${btoa(encodeURI(`${event.target.value}:${password}`))}`;
    const jsonData = {
      ...options.jsonData,
      username: event.target.value,
      basicAuth,
    };

    onOptionsChange({
      ...options,
      jsonData,
    });
  };

  const onPasswordChange = (event: ChangeEvent<HTMLInputElement>) => {
    const basicAuth = `Basic ${btoa(encodeURI(`${options.jsonData.username}:${event.target.value}`))}`;
    const jsonData = {
      ...options.jsonData,
      basicAuth,
    };

    onOptionsChange({
      ...options,
      jsonData,
      secureJsonData: {
        password: event.target.value,
      }
    });
  };

  const onResetPassword = () => {
    onOptionsChange({
      ...options,
      jsonData: {
        ...options.jsonData,
        basicAuth: '',
      },
      secureJsonFields: {
        ...options.secureJsonFields,
        password: false,
      },
      secureJsonData: {
        ...options.secureJsonData,
        password: '',
      },
    });
  };

  const secureJsonData = (options.secureJsonData || {}) as MySecureJsonData;
  const { secureJsonFields, jsonData } = options;

  return (
    <div className="gf-form-group">
      <InlineField label="URL" labelWidth={18}>
        <Input
          onChange={onURLChange}
          value={jsonData.URL || ''}
          placeholder="http://skywalking.example.com/graphql"
          width={40}
        />
      </InlineField>
      <InlineField label="Authentication Type" labelWidth={18} >
        <Select
          options={AuthenticationType}
          value={jsonData.type || AuthenticationType[1].value}
          onChange={onTypeChange}
          width={40}
          placeholder="Choose an authentication type"
          menuPlacement="bottom"
        />
      </InlineField>
      {jsonData.type === AuthenticationType[0].value &&
      <div>
        <InlineField label="User Name" labelWidth={18}>
        <Input
          onChange={onUserChange}
          value={jsonData.username || ''}
          placeholder="Please input username"
          width={40}
        />
      </InlineField>
      <InlineField label="Password" labelWidth={18}>
        <SecretInput
          isConfigured={(secureJsonFields && secureJsonFields.password) as boolean}
          type="password"
          value={secureJsonData.password || ''}
          placeholder="secure password field (backend only)"
          width={40}
          onReset={onResetPassword}
          onChange={onPasswordChange}
        />
      </InlineField>
    </div>}
    </div>
  );
}