feat: add webhook-style UI for developer_telemetry plugin

config-ui/src/plugins/components/connection-list/index.tsx

@@ -27,6 +27,7 @@ import { PATHS } from '@/config';
 import { useAppSelector } from '@/hooks';
 import { getPluginConfig, ConnectionStatus, ConnectionForm } from '@/plugins';
 import { WebHookConnection } from '@/plugins/register/webhook';
+import { DeveloperTelemetryConnection } from '@/plugins/register/developer-telemetry';
 
 const ModalTitle = styled.div`
   display: flex;
@@ -67,6 +68,10 @@ export const ConnectionList = ({ plugin, onCreate }: Props) => {
     return <WebHookConnection />;
   }
 
+  if (plugin === 'developer_telemetry') {
+    return <DeveloperTelemetryConnection />;
+  }
+
   const handleShowForm = (id: ID) => {
     setOpen(true);
     setConnectionId(id);

config-ui/src/plugins/register/developer-telemetry/components/create-dialog.tsx

@@ -0,0 +1,132 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { useState } from 'react';
+import { CheckCircleOutlined } from '@ant-design/icons';
+import { Modal, Input, InputNumber } from 'antd';
+
+import { Block, CopyText, ExternalLink } from '@/components';
+import { request, operator } from '@/utils';
+import { formatReportEndpoint } from './utils';
+
+import * as S from '../styled';
+
+interface Props {
+  open: boolean;
+  onCancel: () => void;
+  onSubmitAfter?: (id: ID) => void;
+}
+
+export const CreateDialog = ({ open, onCancel, onSubmitAfter }: Props) => {
+  const [operating, setOperating] = useState(false);
+  const [step, setStep] = useState(1);
+  const [name, setName] = useState('');
+  const [record, setRecord] = useState({
+    id: 0,
+    reportEndpoint: '',
+    apiKey: '',
+    endpoint: '',
+  });
+
+  const handleSubmit = async () => {
+    if (step === 1) {
+      const [success, res] = await operator(
+        async () => {
+          const response = await request('/plugins/developer_telemetry/connections', {
+            method: 'POST',
+            data: {
+              name,
+              endpoint: window.location.origin,
+              proxy: '',
+              rateLimitPerHour: 10000,
+            },
+          });
+          return response;
+        },
+        {
+          setOperating,
+          hideToast: true,
+        },
+      );
+
+      if (success && res) {
+        setStep(2);
+        setRecord({
+          id: res.id,
+          apiKey: res.apiKey?.apiKey || '',
+          endpoint: res.endpoint || window.location.origin,
+          reportEndpoint: formatReportEndpoint(
+            res.endpoint || window.location.origin,
+            res.id,
+            res.apiKey?.apiKey || '',
+          ),
+        });
+        onSubmitAfter?.(res.id);
+      }
+    } else {
+      onCancel();
+    }
+  };
+
+  return (
+    <Modal
+      open={open}
+      width={820}
+      centered
+      title="Add a New Developer Telemetry"
+      footer={step === 2 ? null : undefined}
+      okText={step === 1 ? 'Generate POST URL' : 'Done'}
+      okButtonProps={{
+        disabled: step === 1 && !name,
+        loading: operating,
+      }}
+      onCancel={onCancel}
+      onOk={handleSubmit}
+    >
+      {step === 1 && (
+        <S.Wrapper>
+          <Block
+            title="Developer Telemetry Name"
+            description="Give your Developer Telemetry a unique name to help you identify it in the future."
+            required
+          >
+            <Input placeholder="Developer Telemetry Name" value={name} onChange={(e) => setName(e.target.value)} />
+          </Block>
+        </S.Wrapper>
+      )}
+      {step === 2 && (
+        <S.Wrapper>
+          <h2>
+            <CheckCircleOutlined />
+            <span>CURL commands generated. Please copy them now.</span>
+          </h2>
+          <p>
+            A non-expired API key is automatically generated for the authentication of the developer telemetry. This key
+            will only show now. You can revoke it in the developer telemetry page at any time.
+          </p>
+          <Block title="Telemetry Data">
+            <h5>Post to send developer metrics</h5>
+            <CopyText content={record.reportEndpoint} />
+          </Block>
+        </S.Wrapper>
+      )}
+    </Modal>
+  );
+};
+
+export default CreateDialog;

config-ui/src/plugins/register/developer-telemetry/components/delete-dialog.tsx

@@ -0,0 +1,81 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { useState, useMemo } from 'react';
+import { Modal } from 'antd';
+
+import { request, operator } from '@/utils';
+import { TelemetryConnectionType } from '../types';
+
+interface Props {
+  initialId: ID;
+  connections: TelemetryConnectionType[];
+  onCancel: () => void;
+  onSubmitAfter?: (id: ID) => void;
+}
+
+export const DeleteDialog = ({ initialId, connections, onCancel, onSubmitAfter }: Props) => {
+  const connection = useMemo(() => connections.find((c) => c.id === initialId), [initialId, connections]);
+  const [operating, setOperating] = useState(false);
+
+  const handleSubmit = async () => {
+    const [success] = await operator(
+      async () => {
+        await request(`/plugins/developer_telemetry/connections/${initialId}`, {
+          method: 'DELETE',
+        });
+      },
+      {
+        setOperating,
+        formatMessage: () => 'Connection deleted successfully',
+      },
+    );
+
+    if (success) {
+      onSubmitAfter?.(initialId);
+      onCancel();
+    }
+  };
+
+  if (!connection) {
+    return null;
+  }
+
+  return (
+    <Modal
+      open
+      width={820}
+      centered
+      title="Delete Telemetry Connection"
+      okText="Delete"
+      okButtonProps={{
+        danger: true,
+        loading: operating,
+      }}
+      onCancel={onCancel}
+      onOk={handleSubmit}
+    >
+      <p>
+        Are you sure you want to delete the connection <strong>{connection.name}</strong>?
+      </p>
+      <p>This action cannot be undone. All associated API keys will be revoked.</p>
+    </Modal>
+  );
+};
+
+export default DeleteDialog;

config-ui/src/plugins/register/developer-telemetry/components/edit-dialog.tsx

@@ -0,0 +1,88 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { useState, useMemo, useEffect } from 'react';
+import { Modal, Input } from 'antd';
+
+import { Block } from '@/components';
+import { request, operator } from '@/utils';
+import { TelemetryConnectionType } from '../types';
+
+interface Props {
+  initialId: ID;
+  connections: TelemetryConnectionType[];
+  onCancel: () => void;
+}
+
+export const EditDialog = ({ initialId, connections, onCancel }: Props) => {
+  const connection = useMemo(() => connections.find((c) => c.id === initialId), [initialId, connections]);
+  const [operating, setOperating] = useState(false);
+  const [name, setName] = useState('');
+
+  useEffect(() => {
+    if (connection) {
+      setName(connection.name);
+    }
+  }, [connection]);
+
+  const handleSubmit = async () => {
+    const [success] = await operator(
+      async () => {
+        await request(`/plugins/developer_telemetry/connections/${initialId}`, {
+          method: 'PATCH',
+          data: {
+            name,
+          },
+        });
+      },
+      {
+        setOperating,
+      },
+    );
+
+    if (success) {
+      onCancel();
+    }
+  };
+
+  if (!connection) {
+    return null;
+  }
+
+  return (
+    <Modal
+      open
+      width={820}
+      centered
+      title="Edit Connection Name"
+      okText="Save"
+      okButtonProps={{
+        disabled: !name,
+        loading: operating,
+      }}
+      onCancel={onCancel}
+      onOk={handleSubmit}
+    >
+      <Block title="Name" required>
+        <Input value={name} onChange={(e) => setName(e.target.value)} />
+      </Block>
+    </Modal>
+  );
+};
+
+export default EditDialog;

config-ui/src/plugins/register/developer-telemetry/components/index.ts

@@ -0,0 +1,23 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+export { default as CreateDialog } from './create-dialog';
+export { default as ViewDialog } from './view-dialog';
+export { default as EditDialog } from './edit-dialog';
+export { default as DeleteDialog } from './delete-dialog';
+export { default as SelectorDialog } from './selector-dialog';