Merge pull request #1539 from memphisdev/bugfix-RND-359-webhook-modal…

…-wrong-url RND-359 + RND-326
superstreamlabs · Dec 19, 2023 · 51118ba · 51118ba
2 parents 01b2975 + 80153d7
commit 51118ba
Show file tree

Hide file tree

Showing 18 changed files with 186 additions and 98 deletions.
diff --git a/ui_src/src/App.scss b/ui_src/src/App.scss
@@ -44,8 +44,8 @@
 }
 
 ::-webkit-scrollbar {
-    width: 3px;
-    height: 4px;
+    width: 0px;
+    height: 0px;
 }
 
 ::-webkit-scrollbar-thumb {

diff --git a/ui_src/src/components/cloneModal/style.scss b/ui_src/src/components/cloneModal/style.scss
@@ -26,9 +26,7 @@
         align-items: center;
         justify-content: space-between;
         padding-left: 13px;
-
-        gap: 26px;
-
+        height: 40px;
         border-radius: 4px;
         border: 1px solid #e7e7e7;
 
@@ -38,6 +36,16 @@
             font-family: 'InterMedium';
             font-size: 14px;
             line-height: 20px;
+            overflow-x: auto;
+            white-space: nowrap;
+            max-width: 430px;
+            height: 100%;
+            display: flex;
+            align-items: center;
+        }
+        p.url-text::-webkit-scrollbar {
+            width: 3px;
+            height: 4px;
         }
         .icon {
             height: 33px;
@@ -52,6 +60,10 @@
             cursor: pointer;
         }
     }
+    div.url-wrapper::-webkit-scrollbar {
+        width: 3px;
+        height: 4px;
+    }
     .create-func-cli {
         font-size: 14px;
         font-family: 'InterMedium';

diff --git a/ui_src/src/components/connectorError/index.js b/ui_src/src/components/connectorError/index.js
@@ -38,6 +38,7 @@ const ConnectorError = ({ open, clickOutside, connectorId }) => {
     const [logs, setLogs] = useState(null);
 
     useEffect(() => {
+        !open && setLogs(null);
         open && getConnectorErrors(connectorId);
     }, [open]);
 

diff --git a/ui_src/src/components/connectorModal/index.js b/ui_src/src/components/connectorModal/index.js
@@ -28,14 +28,12 @@ import { httpRequest } from '../../services/http';
 import CloudModal from '../cloudModal';
 import { isCloud } from '../../services/valueConvertor';
 import { sendTrace } from '../../services/genericServices';
-
 import { connectorTypes } from '../../connectors';
 
 const ConnectorModal = ({ open, clickOutside, newConnecor, source }) => {
     const [stationState, stationDispatch] = useContext(StationStoreContext);
     const [connectorForm] = Form.useForm();
     const [step, setStep] = useState(1);
-    const [isEditing, setIsEditing] = useState(false);
     const [loading, setLoading] = useState(false);
     const [formFields, setFormFields] = useState({
         connector_type: source ? 'Source' : 'Sink'
@@ -50,7 +48,6 @@ const ConnectorModal = ({ open, clickOutside, newConnecor, source }) => {
             setFormFields({
                 connector_type: source ? 'Source' : 'Sink'
             });
-            setIsEditing(false);
             setLoading(false);
             setError(null);
         }
@@ -74,19 +71,6 @@ const ConnectorModal = ({ open, clickOutside, newConnecor, source }) => {
         let settings = formFields?.settings || {};
         settings[key] = value;
         setFormFields({ ...formFields, settings });
-        isEditing && setIsEditing(false);
-    };
-
-    const handleSearch = (value, index) => {
-        let conntectorsNewFields = [...connectorInputFields];
-        if (isEditing) conntectorsNewFields[index]?.options?.splice(-1, 1);
-        else setIsEditing(true);
-        value !== '' &&
-            conntectorsNewFields[index]?.options?.push({
-                name: value?.trim(),
-                value: value?.trim()
-            });
-        setConnectorInputFields(conntectorsNewFields);
     };
 
     const connectorModalTitle =
@@ -237,24 +221,21 @@ const ConnectorModal = ({ open, clickOutside, newConnecor, source }) => {
                     )}
                     {input?.type === 'multi' && (
                         <Select
-                            mode="multiple"
-                            colorType="black"
-                            backgroundColorType="none"
-                            fontFamily="Inter"
-                            borderColorType="gray"
-                            radiusType="semi-round"
-                            popupClassName="select-options"
-                            showSearch
+                            mode="tags"
                             placeholder={input?.placeholder}
-                            options={input?.options}
-                            onSearch={(e) => handleSearch(e, index)}
-                            onChange={(e) => {
-                                updateMultiFormState(input?.name, e, index);
-                                connectorForm.setFieldValue(input?.name, e);
+                            value={formFields?.settings ? formFields?.settings[input?.name] : []}
+                            onChange={(values) => {
+                                updateMultiFormState(input?.name, values, index);
+                                connectorForm.setFieldValue(input?.name, values);
                             }}
-                            autoClearSearchValue
-                            style={{ width: '100%', borderRadius: '5px', minHeight: '40px' }}
-                        />
+                            style={{ width: '100%' }}
+                            onInputValueChange={(value) => {
+                                updateMultiFormState(input?.name, value, index);
+                            }}
+                            popupClassName="select-options"
+                        >
+                            {formFields?.settings && formFields?.settings[input?.name]?.map((item) => <Select.Option key={item}>{item}</Select.Option>)}
+                        </Select>
                     )}
                 </Form.Item>
 

diff --git a/ui_src/src/components/consumerWithStatus/index.js b/ui_src/src/components/consumerWithStatus/index.js
@@ -16,10 +16,8 @@ import StatusIndication from '../indication';
 const ConsumerWithStatus = ({ name, count, is_active }) => {
     return (
         <>
-            <span className="title-with-count">
-            {name}
-            </span>   
-            {count > 1 && <span className="consumer-number-title">{count}</span>}
+            <span className="title-with-count">{name}</span>
+            {count > 1 && <span className="consumer-number-title">{count?.toLocaleString()}</span>}
             <status is="x3d">
                 <StatusIndication is_active={is_active} is_deleted={false} />
             </status>

diff --git a/ui_src/src/components/select/index.js b/ui_src/src/components/select/index.js
@@ -63,7 +63,8 @@ const SelectComponent = ({
             borderRadius,
             height: height || '40px',
             fontFamily: fontFamily || 'Inter',
-            fontSize: fontSize || '14px'
+            fontSize: fontSize || '14px',
+            overflowY: 'auto'
         }
     };
 

diff --git a/ui_src/src/components/select/style.scss b/ui_src/src/components/select/style.scss
@@ -16,7 +16,15 @@
         background-color: transparent;
     }
     .ant-select-selection-item span {
-        display: none;
+        // display: none;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .comment {
+            margin-left: 5px;
+            color: #5e5e68 !important;
+            font-family: 'Inter' !important;
+        }
     }
     label {
         display: flex;

diff --git a/ui_src/src/connectors/kafka.js b/ui_src/src/connectors/kafka.js
@@ -251,7 +251,7 @@ export const kafka = {
         {
             name: 'memphis_max_time_wait',
             display: 'Max time to wait for a batch of messages (seconds)',
-            placeholder: 5,
+            placeholder: 2,
             type: 'string',
             required: false,
             description: 'The duration which a batch of messages is awaited till processing'

diff --git a/ui_src/src/const/localStorageConsts.js b/ui_src/src/const/localStorageConsts.js
@@ -47,4 +47,4 @@ export const LOCAL_STORAGE_FUNCTION_PAGE_VIEW = 'function_page_view';
 export const LOCAL_STORAGE_PRODUCER_COMMUNICATION_TYPE = 'producer_communication_type';
 export const LOCAL_STORAGE_PRODUCER_PROGRAMMING_LANGUAGE = 'producer_programming_language';
 export const LOCAL_STORAGE_CONSUMER_COMMUNICATION_TYPE = 'consumer_communication_type';
-export const LOCAL_STORAGE_CONSUMER_PROGRAMMING_LANGUAGE = 'consumer_programming_language';
+export const LOCAL_STORAGE_CONSUMER_PROGRAMMING_LANGUAGE = 'consumer_programming_language';
diff --git a/ui_src/src/domain/stationOverview/components/generateTokenModal/index.js b/ui_src/src/domain/stationOverview/components/generateTokenModal/index.js
@@ -224,14 +224,14 @@ const GenerateTokenModal = ({ host, close, returnToken, restProducer, stationNam
                             <div className="api-token">
                                 <p className="field-title">Produce</p>
                                 <div className="input-and-copy" onClick={() => produceConsumeRest('produce')}>
-                                    <span className="url-span">{`https://${host}.restgw.cloud.memphis.dev/stations/${stationName}/produce/single?authorization=${userToken?.jwt_refresh_token}`}</span>
+                                    <span className="url-span">{`${host}.restgw.cloud.memphis.dev/stations/${stationName}/produce/single?authorization=${userToken?.jwt_refresh_token}`}</span>
                                     <Copy data={userToken?.jwt_refresh_token} width={20} />
                                 </div>
                             </div>
                             <div className="api-token">
                                 <p className="field-title">Consume</p>
                                 <div className="input-and-copy" onClick={() => produceConsumeRest('consume')}>
-                                    <span className="url-span">{`https://${host}.restgw.cloud.memphis.dev/stations/${stationName}/consume/batch?authorization=${userToken?.jwt_refresh_token}`}</span>
+                                    <span className="url-span">{`${host}.restgw.cloud.memphis.dev/stations/${stationName}/consume/batch?authorization=${userToken?.jwt_refresh_token}`}</span>
                                     <Copy data={userToken?.jwt_refresh_token} width={20} />
                                 </div>
                             </div>

diff --git a/ui_src/src/domain/stationOverview/components/generateTokenModal/style.scss b/ui_src/src/domain/stationOverview/components/generateTokenModal/style.scss
@@ -60,6 +60,10 @@
         white-space: nowrap;
         padding: 0px 15px;
     }
+    span.url-span::-webkit-scrollbar {
+        width: 3px;
+        height: 4px;
+    }
     .button-container {
         margin-top: 20px;
     }