Bugfix rnd 320 general enhanecements

ui_src/src/components/Tabs/index.js

@@ -24,7 +24,7 @@ import CheckboxComponent from '../checkBox';
 import { PriorityHighRounded } from '@material-ui/icons';
 import CloudOnly from '../cloudOnly';
 
-const CustomTabs = ({ tabs, onChange, value, disabled, length, tooltip, icon = false, checkbox = false, defaultActiveKey, tabsCounter }) => {
+const CustomTabs = ({ tabs, onChange, value, disabled, length, tooltip, icon = false, checkbox = false, defaultActiveKey, tabsCounter, icons }) => {
     return (
         <div className={!disabled ? 'tabs-container hover' : 'tabs-container'}>
             <Tabs
@@ -36,6 +36,7 @@ const CustomTabs = ({ tabs, onChange, value, disabled, length, tooltip, icon = f
                         disabled: tab?.disabled || disabled,
                         label: (
                             <label className="tabs-name" style={{ width: length && length[index] && '135px' }}>
+                                {icons && icons[index] && !icon && icons[index]}
                                 {checkbox && <CheckboxComponent checked={tab.checked} />}
                                 <TooltipComponent text={tooltip && tooltip[index]}>
                                     <>

ui_src/src/components/cloneModal/index.js

@@ -17,19 +17,34 @@ import { FiDownload } from 'react-icons/fi';
 import Copy from '../copy';
 import CustomTabs from '../Tabs';
 import { githubUrls } from '../../const/globalConst';
+import { SiLinux, SiApple, SiWindows11 } from 'react-icons/si';
 
 const CloneModal = ({ type }) => {
-    const [tabValue, setTabValue] = useState('HTTPS');
+    const [tabValue, setTabValue] = useState(type === 'cli' ? 'Windows' : 'HTTPS');
     const downloadRepoArchive = async () => {
         window.open(githubUrls[type].DOWNLOAD_URL, '_blank');
     };
 
     return (
         <div className="clone-wrapper">
-            <p className="title"> Clone</p>
-            <p className="subtitle">Kindly clone our explanatory repository to quickly start.</p>
-            <CustomTabs tabs={['HTTPS', 'SSH']} size={'small'} tabValue={tabValue} onChange={(tabValue) => setTabValue(tabValue)} />
-            {tabValue === 'HTTPS' ? (
+            {type === 'cli' ? (
+                <>
+                    <p className="title">Functions Template Generator</p>
+                </>
+            ) : (
+                <>
+                    <p className="title">Clone</p>
+                    <p className="subtitle">Kindly clone our explanatory repository to quickly start.</p>
+                </>
+            )}
+            <CustomTabs
+                tabs={type === 'cli' ? ['Windows', 'Mac', 'Linux RPM', 'Linux APK'] : ['HTTPS', 'SSH']}
+                icons={type === 'cli' ? [<SiWindows11 />, <SiApple />, <SiLinux />, <SiLinux />] : []}
+                size={'small'}
+                tabValue={tabValue}
+                onChange={(tabValue) => setTabValue(tabValue)}
+            />
+            {type !== 'cli' && tabValue === 'HTTPS' && (
                 <>
                     <div className="url-wrapper">
                         <p className="url-text"> {githubUrls[type].MEMPHIS_GIT_HTTPS}</p>
@@ -38,7 +53,8 @@ const CloneModal = ({ type }) => {
                         </div>
                     </div>
                 </>
-            ) : (
+            )}
+            {type !== 'cli' && tabValue === 'SSH' && (
                 <>
                     <div className="url-wrapper">
                         <p className="url-text"> {githubUrls[type].MEMPHIS_GIT_SSH}</p>
@@ -48,23 +64,42 @@ const CloneModal = ({ type }) => {
                     </div>
                 </>
             )}
+            {type === 'cli' && (
+                <>
+                    <div className="url-wrapper">
+                        <p className="url-text"> {githubUrls[type][tabValue]}</p>
+                        <div className="icon">
+                            <Copy width="18" data={githubUrls[type][tabValue]} />
+                        </div>
+                    </div>
+                    <p className="create-func-cli">Create a basic Memphis function template</p>
+                    <div className="url-wrapper">
+                        <p className="url-text"> {githubUrls[type]?.code}</p>
+                        <div className="icon">
+                            <Copy width="18" data={githubUrls[type]?.code} />
+                        </div>
+                    </div>
+                </>
+            )}
             <p className="secondary-text">Use Git or checkout with SVN using the web URL.</p>
 
-            <div className="footer">
-                <Button
-                    placeholder={
-                        <div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
-                            <FiDownload width={16} height={14} /> Download ZIP
-                        </div>
-                    }
-                    colorType={'purple'}
-                    onClick={downloadRepoArchive}
-                    fontSize={'14px'}
-                    fontWeight={500}
-                    border="none"
-                    backgroundColorType={'none'}
-                />
-            </div>
+            {type !== 'cli' && (
+                <div className="footer">
+                    <Button
+                        placeholder={
+                            <div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
+                                <FiDownload width={16} height={14} /> Download ZIP
+                            </div>
+                        }
+                        colorType={'purple'}
+                        onClick={downloadRepoArchive}
+                        fontSize={'14px'}
+                        fontWeight={500}
+                        border="none"
+                        backgroundColorType={'none'}
+                    />
+                </div>
+            )}
         </div>
     );
 };

ui_src/src/components/cloneModal/style.scss

@@ -52,6 +52,11 @@
             cursor: pointer;
         }
     }
+    .create-func-cli {
+        font-size: 14px;
+        font-family: 'InterMedium';
+        margin: 15px 0px 5px 0px;
+    }
     .footer {
         border-top: 1px solid #e4e4e4;
         display: flex;

ui_src/src/components/connectorError/index.js

@@ -38,15 +38,13 @@ const ConnectorError = ({ open, clickOutside, connectorId }) => {
     const [logs, setLogs] = useState(null);
 
     useEffect(() => {
-        open && getConnectorErrors();
+        open && getConnectorErrors(connectorId);
     }, [open]);
 
-    const getConnectorErrors = async () => {
+    const getConnectorErrors = async (connectorId) => {
         setLoading(true);
         try {
-            const data = await httpRequest('GET', ApiEndpoints.GET_CONNECTOR_ERRORS, {
-                connector_id: connectorId
-            });
+            const data = await httpRequest('GET', `${ApiEndpoints.GET_CONNECTOR_ERRORS}?connector_id=${connectorId}`);
             setLogs(data?.logs);
         } catch (error) {
         } finally {

ui_src/src/components/connectorModal/index.js

@@ -81,8 +81,8 @@ const ConnectorModal = ({ open, clickOutside, newConnecor, source }) => {
         else setIsEditing(true);
         value !== '' &&
             conntectorsNewFields[index]?.options?.push({
-                name: value,
-                value: value
+                name: value?.trim(),
+                value: value?.trim()
             });
         setConnectorInputFields(conntectorsNewFields);
     };
@@ -115,15 +115,19 @@ const ConnectorModal = ({ open, clickOutside, newConnecor, source }) => {
         );
     const onFinish = async () => {
         try {
-            await connectorForm.validateFields();
             if (step === 1) {
-                isCloud() ? createConnector() : setCloudModalOpen(true);
+                try {
+                    await connectorForm.validateFields();
+                    isCloud() ? createConnector() : setCloudModalOpen(true);
+                } catch (err) {
+                    return;
+                }
             } else {
                 resError ? setStep(1) : clickOutside();
                 setError(null);
             }
         } catch (err) {
-            console.log(err);
+            return;
         }
     };
 
@@ -133,7 +137,6 @@ const ConnectorModal = ({ open, clickOutside, newConnecor, source }) => {
         setStep(2);
         try {
             const modifiedSettings = { ...formFields?.settings };
-
             for (const key in modifiedSettings) {
                 if (Array.isArray(modifiedSettings[key])) {
                     modifiedSettings[key] = modifiedSettings[key].join(',');
@@ -155,7 +158,7 @@ const ConnectorModal = ({ open, clickOutside, newConnecor, source }) => {
         }
     };
 
-    const generateFormItem = (input, index) => {
+    const generateFormItem = (input, index, depth, inputName) => {
         return (
             <>
                 <Form.Item
@@ -247,10 +250,17 @@ const ConnectorModal = ({ open, clickOutside, newConnecor, source }) => {
                         />
                     )}
                 </Form.Item>
-                {input?.children &&
+
+                {depth === 0 &&
+                    input?.children &&
                     formFields?.settings &&
                     formFields?.settings[input?.name] &&
-                    connectorInputFields[index][formFields?.settings[input?.name]]?.map((child, index) => generateFormItem(child, index))}
+                    connectorInputFields[index][formFields?.settings[input?.name]]?.map((child, index) => generateFormItem(child, index, depth + 1, input?.name))}
+
+                {depth === 1 &&
+                    input?.children &&
+                    formFields?.settings[input?.name] &&
+                    input[formFields?.settings[input?.name]]?.map((child, index) => generateFormItem(child, index, depth + 1, input?.name))}
             </>
         );
     };
@@ -267,7 +277,6 @@ const ConnectorModal = ({ open, clickOutside, newConnecor, source }) => {
             }
             className={'modal-wrapper produce-modal'}
             width="550px"
-            height="60vh"
             clickOutside={clickOutside}
             open={open}
             displayButtons={true}
@@ -317,16 +326,19 @@ const ConnectorModal = ({ open, clickOutside, newConnecor, source }) => {
                                 disabled={false}
                             />
                         </Form.Item>
-                        <Divider />
-                        <div className="connector-inputs">
-                            {formFields?.type &&
-                                connectorInputFields?.map((input, index) => {
-                                    return generateFormItem(input, index);
-                                })}
-                        </div>
+                        {formFields?.type && (
+                            <>
+                                <Divider />
+                                <div className="connector-inputs">
+                                    {connectorInputFields?.map((input, index) => {
+                                        return generateFormItem(input, index, 0);
+                                    })}
+                                </div>
+                            </>
+                        )}
                     </Form>
                 )}
-                {step === 2 && !resError && (
+                {step === 2 && (!resError || (resError && Object.keys(resError)?.length === 0)) && (
                     <div className="validation">
                         {loading ? (
                             <>
@@ -339,7 +351,7 @@ const ConnectorModal = ({ open, clickOutside, newConnecor, source }) => {
                     </div>
                 )}
 
-                {step === 2 && resError && !loading && <div className="result">{resError}</div>}
+                {step === 2 && resError && Object.keys(resError)?.length > 0 && !loading && <div className="result">{resError}</div>}
             </div>
             <CloudModal type="cloud" open={cloudModalopen} handleClose={() => setCloudModalOpen(false)} />
         </Modal>

ui_src/src/components/connectorModal/style.scss

@@ -29,14 +29,14 @@
         position: relative;
     }
     .connector-inputs {
-        height: calc(100% - 215px);
+        height: 350px;
         overflow-y: auto;
         padding: 2px;
     }
     .validation {
         width: 100%;
         margin: 20px 0px;
-        height: calc(100% - 40px);
+        height: 400px;
         border-radius: 12px;
         border: 1px solid #dcdcdc;
         display: flex;
@@ -48,7 +48,7 @@
     .result {
         width: 100%;
         margin: 20px 0px;
-        height: calc(100% - 40px);
+        height: 400px;
         border-radius: 12px;
         border: 1px solid #dcdcdc;
         padding: 20px;

ui_src/src/components/customSelect/index.js

@@ -96,7 +96,7 @@ const CustomSelect = ({ options, onChange, value, placeholder, type = 'schema',
                 )}
                 {options?.map((schema) => {
                     return (
-                        <Option key={schema?.id} value={schema?.name}>
+                        <Option key={schema?.id || schema} value={schema?.name || schema}>
                             <>
                                 <div className="schema-details">
                                     <img
@@ -105,7 +105,7 @@ const CustomSelect = ({ options, onChange, value, placeholder, type = 'schema',
                                         height={20}
                                         width={20}
                                     />
-                                    <p className="schema-name">{schema?.name}</p>
+                                    <p className="schema-name">{schema?.name || schema}</p>
                                 </div>
                                 <p className="created-by">
                                     {type === 'schema' ? <>{schema?.type} &#8226; </> : null}

ui_src/src/components/refreshButton/index.js

@@ -0,0 +1,34 @@
+// 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 from 'react';
+import { Spin, Badge } from 'antd';
+import { SyncOutlined } from '@ant-design/icons';
+import { ReactComponent as RefreshIcon } from '../../assets/images/refresh.svg';
+
+const RefreshButton = ({ refreshIndeicator, onClick, isLoading }) => {
+    return (
+        <span className="update-refresh">
+            {refreshIndeicator && <Badge dot />}
+            <div className="refresh-btn" onClick={onClick}>
+                {isLoading ? (
+                    <Spin indicator={<SyncOutlined style={{ color: '#6557FF', fontSize: '16px' }} spin />} />
+                ) : (
+                    <RefreshIcon alt="refreshIcon" style={{ path: { color: '#6557FF' } }} />
+                )}
+            </div>
+        </span>
+    );
+};
+
+export default RefreshButton;

ui_src/src/components/refreshButton/style.scss

@@ -0,0 +1,21 @@
+.update-refresh {
+    display: flex;
+    position: relative;
+    .ant-badge {
+        position: absolute;
+        right: 5px;
+        top: 5px;
+        z-index: 5;
+    }
+    .refresh-btn {
+        background-color: #ffffff;
+        border-radius: 50%;
+        box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+        width: 34px;
+        height: 34px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+    }
+}

ui_src/src/connectors/index.js

@@ -6,7 +6,7 @@ import { kafka } from './kafka';
 import { kinesis } from './kinesis';
 
 export const connectorTypes = [
-    { name: 'Kafka', icon: KafkaIcon, comment: 'Supported version: v1.0.3', inputs: kafka },
+    { name: 'Kafka', icon: KafkaIcon, comment: 'Supported version: 0.9 and above', inputs: kafka },
     // { name: 'kinesis', icon: KinesisIcon, inputs: kinesis },
     { name: 'S3', icon: S3LogoIcon, disabled: true, soon: true }
 ];