Config.tsx 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. import React from 'react';
  2. import useAppParams from 'lib/hooks/useAppParams';
  3. import { Controller, useForm } from 'react-hook-form';
  4. import { ErrorMessage } from '@hookform/error-message';
  5. import { yupResolver } from '@hookform/resolvers/yup';
  6. import { RouterParamsClusterConnectConnector } from 'lib/paths';
  7. import yup from 'lib/yupExtended';
  8. import Editor from 'components/common/Editor/Editor';
  9. import { Button } from 'components/common/Button/Button';
  10. import {
  11. useConnectorConfig,
  12. useUpdateConnectorConfig,
  13. } from 'lib/hooks/api/kafkaConnect';
  14. import {
  15. ConnectEditWarningMessageStyled,
  16. ConnectEditWrapperStyled,
  17. } from './Config.styled';
  18. const validationSchema = yup.object().shape({
  19. config: yup.string().required().isJsonObject(),
  20. });
  21. interface FormValues {
  22. config: string;
  23. }
  24. const Config: React.FC = () => {
  25. const routerParams = useAppParams<RouterParamsClusterConnectConnector>();
  26. const { data: config } = useConnectorConfig(routerParams);
  27. const mutation = useUpdateConnectorConfig(routerParams);
  28. const {
  29. handleSubmit,
  30. control,
  31. reset,
  32. formState: { isDirty, isSubmitting, isValid, errors },
  33. setValue,
  34. } = useForm<FormValues>({
  35. mode: 'onChange',
  36. resolver: yupResolver(validationSchema),
  37. defaultValues: {
  38. config: JSON.stringify(config, null, '\t'),
  39. },
  40. });
  41. React.useEffect(() => {
  42. if (config) {
  43. setValue('config', JSON.stringify(config, null, '\t'));
  44. }
  45. }, [config, setValue]);
  46. const onSubmit = async (values: FormValues) => {
  47. try {
  48. const requestBody = JSON.parse(values.config.trim());
  49. await mutation.mutateAsync(requestBody);
  50. reset(values);
  51. } catch (e) {
  52. // do nothing
  53. }
  54. };
  55. const hasCredentials = JSON.stringify(config, null, '\t').includes(
  56. '"******"'
  57. );
  58. return (
  59. <ConnectEditWrapperStyled>
  60. {hasCredentials && (
  61. <ConnectEditWarningMessageStyled>
  62. Please replace ****** with the real credential values to avoid
  63. accidentally breaking your connector config!
  64. </ConnectEditWarningMessageStyled>
  65. )}
  66. <form onSubmit={handleSubmit(onSubmit)} aria-label="Edit connect form">
  67. <div>
  68. <Controller
  69. control={control}
  70. name="config"
  71. render={({ field }) => (
  72. <Editor {...field} readOnly={isSubmitting} />
  73. )}
  74. />
  75. </div>
  76. <div>
  77. <ErrorMessage errors={errors} name="config" />
  78. </div>
  79. <Button
  80. buttonSize="M"
  81. buttonType="primary"
  82. type="submit"
  83. disabled={!isValid || isSubmitting || !isDirty}
  84. >
  85. Submit
  86. </Button>
  87. </form>
  88. </ConnectEditWrapperStyled>
  89. );
  90. };
  91. export default Config;