RND-370-add-info-button-to-the-3-dots

ui_src/src/components/connectorInfo/index.js

@@ -0,0 +1,102 @@
+// Copyright 2022-2023 The Memphis.dev Authors
+// Licensed under the Memphis Business Source License 1.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// Changed License: [Apache License, Version 2.0 (https://www.apache.org/licenses/LICENSE-2.0), as published by the Apache Foundation.
+//
+// https://github.com/memphisdev/memphis/blob/master/LICENSE
+//
+// Additional Use Grant: You may make use of the Licensed Work (i) only as part of your own product or service, provided it is not a message broker or a message queue product or service; and (ii) provided that you do not use, provide, distribute, or make available the Licensed Work as a Service.
+// A "Service" is a commercial offering, product, hosted, or managed service, that allows third parties (other than your own employees and contractors acting on your behalf) to access and/or use the Licensed Work or a substantial set of the features or functionality of the Licensed Work to third parties as a software-as-a-service, platform-as-a-service, infrastructure-as-a-service or other similar services that compete with Licensor products or services.
+
+import './style.scss';
+
+import React, { useEffect, useState } from 'react';
+import Modal from '../modal';
+import Spinner from '../spinner';
+import { ApiEndpoints } from '../../const/apiEndpoints';
+import { httpRequest } from '../../services/http';
+import { sendTrace } from '../../services/genericServices';
+import { connectorTypesSource, connectorTypesSink } from '../../connectors';
+
+const ConnectorInfo = ({ open, clickOutside, connectorId }) => {
+    const [loading, setLoading] = useState(false);
+    const [info, setInfo] = useState(null);
+
+    useEffect(() => {
+        !open && setInfo(null);
+        open && getConnectorInfo(connectorId);
+    }, [open]);
+
+    const getConnectorInfo = async (connectorId) => {
+        setLoading(true);
+        try {
+            const data = await httpRequest('GET', `${ApiEndpoints.GET_CONNECTOR_DETAILS}?connector_id=${connectorId}`);
+            arrangeData(data);
+            sendTrace('getConnectorInfo', {
+                connector_type: data?.connector_type,
+                type: data?.type
+            });
+        } catch (error) {
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const arrangeData = (data) => {
+        let fieldInputs;
+        if (data?.connector_type === 'source') {
+            let field = connectorTypesSource.find((connector) => connector?.name?.toLocaleLowerCase() === data?.type);
+            fieldInputs = field?.inputs?.Source;
+        } else if (data?.connector_type === 'sink') {
+            let field = connectorTypesSink.find((connector) => connector?.name?.toLocaleLowerCase() === data?.type);
+            fieldInputs = field?.inputs?.Sink;
+        }
+        let formFields = [];
+        fieldInputs?.forEach((field) => {
+            formFields.push({ name: field?.display, value: data[field?.name] || data?.settings[field?.name] });
+            if (field?.children) {
+                field?.options?.forEach((option) => {
+                    if (data?.settings[option?.toLocaleLowerCase()?.replace(/ /g, '_')]) {
+                        formFields.push({ name: option, value: data?.settings[option?.toLocaleLowerCase()?.replace(/ /g, '_')] });
+                    }
+                });
+            }
+        });
+        setInfo(formFields);
+    };
+
+    return (
+        <Modal
+            header={'Connector Information'}
+            className={'modal-wrapper produce-modal'}
+            width="550px"
+            height="50vh"
+            clickOutside={clickOutside}
+            open={open}
+            displayButtons={true}
+            rBtnText={'Close'}
+            rBtnClick={clickOutside}
+        >
+            <div className="connector-info">
+                {loading && (
+                    <div className="loader">
+                        <Spinner />
+                    </div>
+                )}
+                {!loading &&
+                    info?.map((field, index) => {
+                        return (
+                            <div key={index} className="field-conainer">
+                                <label className="field-name">{field?.name}</label>
+                                <label className="field-value">{field?.value}</label>
+                            </div>
+                        );
+                    })}
+            </div>
+        </Modal>
+    );
+};
+
+export default ConnectorInfo;

ui_src/src/components/connectorInfo/style.scss

@@ -0,0 +1,30 @@
+.connector-info {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    padding-top: 30px;
+    overflow-y: auto;
+    .loader {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        margin-top: 10px;
+    }
+    .field-conainer {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 20px;
+        .field-name {
+            color: #737373;
+            font-family: 'Inter';
+            font-size: 12px;
+            text-transform: capitalize;
+        }
+        .field-value {
+            color: #000;
+            font-family: 'Inter';
+            font-size: 14px;
+        }
+    }
+}

ui_src/src/const/apiEndpoints.js

@@ -59,6 +59,7 @@ export const ApiEndpoints = {
     STOP_CONNECTOR: '/stations/stopConnector',
     GET_CONNECTOR_ERRORS: '/stations/getConnectorErrors',
     PURGE_CONNECTOR_ERRORS: '/stations/purgeConnectorErrors',
+    GET_CONNECTOR_DETAILS: '/stations/getConnectorDetails',
 
     //Async Tasks
     GET_ASYNC_TASKS: '/asyncTasks/getAsyncTasks',

ui_src/src/domain/stationOverview/stationObservabilty/ProduceConsumList/index.js

@@ -26,6 +26,7 @@ import { ReactComponent as ConnectIcon } from '../../../../assets/images/connect
 import { IoPlayCircleOutline, IoRemoveCircleOutline, IoPause, IoWarning } from 'react-icons/io5';
 import { HiDotsVertical } from 'react-icons/hi';
 import { MdError } from 'react-icons/md';
+import { IoMdInformationCircle } from 'react-icons/io';
 import OverflowTip from '../../../../components/tooltip/overflowtip';
 import { ReactComponent as UnsupportedIcon } from '../../../../assets/images/unsupported.svg';
 import StatusIndication from '../../../../components/indication';
@@ -45,9 +46,10 @@ import Spinner from '../../../../components/spinner';
 import TooltipComponent from '../../../../components/tooltip/tooltip';
 import { isCloud } from '../../../../services/valueConvertor';
 import { sendTrace } from '../../../../services/genericServices';
-import { BiLogoGoLang, BiLogoPython } from "react-icons/bi"
-import { SiDotnet } from "react-icons/si";
-import { DiJavascript1 } from "react-icons/di";
+import { BiLogoGoLang, BiLogoPython } from 'react-icons/bi';
+import { SiDotnet } from 'react-icons/si';
+import { DiJavascript1 } from 'react-icons/di';
+import ConnectorInfo from '../../../../components/connectorInfo';
 
 const overlayStylesConnectors = {
     borderRadius: '8px',
@@ -93,6 +95,7 @@ const ProduceConsumList = ({ producer }) => {
     const [selectedConnector, setSelectedConnector] = useState(null);
     const [openConnectorModal, setOpenConnectorModal] = useState(false);
     const [openConnectorError, setOpenConnectorError] = useState(false);
+    const [openConnectorInfo, setOpenConnectorInfo] = useState(false);
     const [actionItem, setActionItem] = useState(null);
     const [loading, setLoader] = useState(false);
     const producerItemsList = [
@@ -370,15 +373,15 @@ const ProduceConsumList = ({ producer }) => {
         const lang = item?.sdk_language;
 
         const mapping = {
-            go: <BiLogoGoLang/>,
-            "node.js": <DiJavascript1/>,
-            python: <BiLogoPython/>,
-            ".NET": <SiDotnet/>
+            go: <BiLogoGoLang />,
+            'node.js': <DiJavascript1 />,
+            python: <BiLogoPython />,
+            '.NET': <SiDotnet />
         };
 
         const iconComponent = lang ? mapping[lang] : <ProducerIcon />;
 
-        return <div style={{fontSize: '17px', display: 'flex', alignItems: 'center'}}>{iconComponent}</div>;
+        return <div style={{ fontSize: '17px', display: 'flex', alignItems: 'center' }}>{iconComponent}</div>;
     }
 
     return (
@@ -471,9 +474,7 @@ const ProduceConsumList = ({ producer }) => {
                                                         <ConnectIcon />
                                                     </TooltipComponent>
                                                 ) : (
-                                                    <TooltipComponent text="producer">
-                                                        {getIconByLang(row)}
-                                                    </TooltipComponent>
+                                                    <TooltipComponent text="producer">{getIconByLang(row)}</TooltipComponent>
                                                 )}
                                                 <OverflowTip text={row.name} width={'80px'}>
                                                     {row.name}
@@ -530,6 +531,14 @@ const ProduceConsumList = ({ producer }) => {
                                                             icon={<IoRemoveCircleOutline />}
                                                             loader={loading && actionItem === 1}
                                                         />
+                                                        <MenuItem
+                                                            name={'Information'}
+                                                            onClick={() => {
+                                                                setOpenConnectorInfo(true);
+                                                                setOpenConnectorPopover(false);
+                                                            }}
+                                                            icon={<IoMdInformationCircle />}
+                                                        />
                                                         <MenuItem
                                                             name={'Erros'}
                                                             onClick={() => {
@@ -565,9 +574,7 @@ const ProduceConsumList = ({ producer }) => {
                                                         <ConnectIcon />
                                                     </TooltipComponent>
                                                 ) : (
-                                                    <TooltipComponent text="consumer">
-                                                        {getIconByLang(row)}
-                                                    </TooltipComponent>
+                                                    <TooltipComponent text="consumer">{getIconByLang(row)}</TooltipComponent>
                                                 )}
                                                 <OverflowTip text={row?.name} width={'80px'}>
                                                     {row?.name}
@@ -626,6 +633,14 @@ const ProduceConsumList = ({ producer }) => {
                                                             icon={<IoRemoveCircleOutline />}
                                                             loader={loading && actionItem === 1}
                                                         />
+                                                        <MenuItem
+                                                            name={'Information'}
+                                                            onClick={() => {
+                                                                setOpenConnectorInfo(true);
+                                                                setOpenConnectorPopover(false);
+                                                            }}
+                                                            icon={<IoMdInformationCircle />}
+                                                        />
                                                         <MenuItem
                                                             name={'Erros'}
                                                             onClick={() => {
@@ -816,6 +831,7 @@ const ProduceConsumList = ({ producer }) => {
                 <GenerateTokenModal host={restGWHost} restProducer stationName={stationState?.stationMetaData?.name} close={() => setGenerateModal(false)} />
             </Modal>
             <ConnectorError open={openConnectorError} clickOutside={() => setOpenConnectorError(false)} connectorId={selectedConnector?.id} />
+            <ConnectorInfo open={openConnectorInfo} clickOutside={() => setOpenConnectorInfo(false)} connectorId={selectedConnector?.id} />
         </div>
     );
 };

ui_src/src/domain/users/createUserDetails/index.js

@@ -123,17 +123,13 @@ const CreateUserDetails = ({ createUserRef, closeModal, handleLoader, userList,
                             formFields?.allow_read_permissions === null ||
                             formFields?.allow_read_permissions === undefined
                                 ? null
-                                : rbacTypeRead === 'stations'
-                                ? formFields?.allow_read_permissions
-                                : [formFields?.allow_read_permissions];
+                                : formFields?.allow_read_permissions;
                         bodyRequest['allow_write_permissions'] =
                             formFields?.allow_write_permissions?.length === 0 ||
                             formFields?.allow_write_permissions === null ||
                             formFields?.allow_write_permissions === undefined
                                 ? null
-                                : rbacTypeWrite === 'stations'
-                                ? formFields?.allow_write_permissions
-                                : [formFields?.allow_write_permissions];
+                                : formFields?.allow_write_permissions;
                     }
                     const data = await httpRequest('POST', ApiEndpoints.ADD_USER, bodyRequest);
                     if (data) {