Producer user select

ui_src/src/components/createStationForm/index.js

@@ -26,7 +26,7 @@ import TitleComponent from '../titleComponent';
 import SelectCheckBox from '../selectCheckBox';
 import { Context } from '../../hooks/store';
 import UpgradePlans from '../upgradePlans';
-import SelectSchema from '../selectSchema';
+import SelectSchema from '../customSelect';
 import RadioButton from '../radioButton';
 import LockFeature from '../lockFeature';
 import SelectComponent from '../select';

ui_src/src/components/customSelect/index.js

@@ -0,0 +1,130 @@
+// 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 { ArrowDropDownRounded } from '@material-ui/icons';
+import { useHistory } from 'react-router-dom';
+import React, { useContext } from 'react';
+import { Select } from 'antd';
+
+import SchemaIconSelect from '../../assets/images/schemaIconSelect.svg';
+import placeholderSchema from '../../assets/images/placeholderSchema.svg';
+import usersIconActive from '../../assets/images/usersIconActive.svg';
+import { parsingDate } from '../../services/valueConvertor';
+import { Context } from '../../hooks/store';
+import Button from '../button';
+import pathDomains from '../../router';
+
+const { Option } = Select;
+
+const CustomSelect = ({ options, onChange, value, placeholder, type = 'schema', handleCreateNew }) => {
+    const history = useHistory();
+
+    const handleChange = (e) => {
+        onChange(e);
+    };
+
+    const createNew = () => {
+        history.push(`${pathDomains.schemaverse}/create`);
+    };
+
+    const displayValue = value === '' || value === null ? null : value;
+
+    return (
+        <div className="select-schema-container">
+            <Select
+                className="select"
+                placeholder={placeholder}
+                value={displayValue}
+                bordered={false}
+                suffixIcon={<ArrowDropDownRounded className="drop-down-icon" />}
+                onChange={handleChange}
+                placement="bottomRight"
+                popupClassName="select-schema-options"
+                notFoundContent={
+                    type === 'schema' ? (
+                        <div className="no-schema-to-display">
+                            <img src={placeholderSchema} width="50" height="50" alt="placeholderSchema" />
+                            <p className="title">No schemas yet</p>
+                            <p className="sub-title">Get started by creating your first schema</p>
+                            <Button
+                                className="modal-btn"
+                                width="120px"
+                                height="34px"
+                                placeholder="Create schema"
+                                colorType="white"
+                                radiusType="circle"
+                                backgroundColorType="purple"
+                                fontSize="12px"
+                                fontFamily="InterSemiBold"
+                                aria-controls="usecse-menu"
+                                aria-haspopup="true"
+                                onClick={() => createNew()}
+                            />
+                        </div>
+                    ) : type === 'user' ? (
+                        <div className="no-schema-to-display">
+                            <div className="placeholder-background">
+                                <img src={usersIconActive} width={40} height={40} alt="placeholderSchema" />
+                            </div>
+                            <p className="title">No users yet</p>
+                            <p className="sub-title">Get started by creating your first user</p>
+                            <Button
+                                className="modal-btn"
+                                width="120px"
+                                height="34px"
+                                placeholder="Create user"
+                                colorType="white"
+                                radiusType="circle"
+                                backgroundColorType="purple"
+                                fontSize="12px"
+                                fontFamily="InterSemiBold"
+                                aria-controls="usecse-menu"
+                                aria-haspopup="true"
+                                onClick={handleCreateNew}
+                            />
+                        </div>
+                    ) : null
+                }
+            >
+                {options?.map((schema) => {
+                    return (
+                        <Option key={schema?.id} value={schema?.name}>
+                            {type === 'schema' ? (
+                                <>
+                                    <div className="schema-details">
+                                        <img src={SchemaIconSelect} alt="SchemaIconSelect" height="20px" />
+                                        <p className="schema-name">{schema?.name}</p>
+                                    </div>
+                                    <p className="created-by">
+                                        {schema?.type} &#8226; {parsingDate(schema?.created_at)}
+                                    </p>
+                                </>
+                            ) : type === 'user' ? (
+                                <>
+                                    <div className="schema-details">
+                                        <img src={usersIconActive} alt="usersIcon" height={20} width={20} />
+                                        <p className="schema-name">{schema?.name}</p>
+                                    </div>
+                                    <p className="created-by">{parsingDate(schema?.created_at)}</p>
+                                </>
+                            ) : null}
+                        </Option>
+                    );
+                })}
+            </Select>
+        </div>
+    );
+};
+
+export default CustomSelect;

ui_src/src/components/selectSchema/style.scss → ui_src/src/components/customSelect/style.scss

@@ -19,13 +19,12 @@
             margin-left: 10px;
         }
     }
-
 }
 .select-schema-options {
-    border: 1px solid #F0F0F0 !important;
+    border: 1px solid #f0f0f0 !important;
     box-shadow: 0px 3px 10px rgba(16, 10, 85, 0.1);
     border-radius: 8px !important;
-  
+
     p {
         margin: 0;
     }
@@ -62,11 +61,21 @@
         height: 100%;
         justify-content: center;
         width: 100%;
+        .placeholder-background {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 100%;
+            background-color: #efedfe;
+            margin-bottom: 5px;
+            width: 50px;
+            height: 50px;
+        }
         img {
             margin-bottom: 5px;
         }
         .title {
-            color: #1D1D1D ;
+            color: #1d1d1d;
             font-family: 'InterMedium';
             font-size: 16px;
             line-height: 16px;
@@ -76,8 +85,7 @@
             font-size: 12px;
             line-height: 17px;
             margin-bottom: 10px;
-            color: #8F8F8F;
-
+            color: #8f8f8f;
         }
     }
 }

ui_src/src/components/sdkExsample/index.js

@@ -30,7 +30,7 @@ import noCodeExample from '../../assets/images/noCodeExample.svg';
 import codeIcon from '../../assets/images/codeIcon.svg';
 import refresh from '../../assets/images/refresh.svg';
 import addUserIcon from '../../assets/images/addUserIcon.svg';
-import { Collapse } from 'antd';
+import { Collapse, Typography } from 'antd';
 
 import CollapseArrow from '../../assets/images/collapseArrow.svg';
 import SelectComponent from '../select';
@@ -43,6 +43,9 @@ import SegmentButton from '../segmentButton';
 import CreateUserDetails from '../../domain/users/createUserDetails';
 import { Divider, Form } from 'antd';
 import { FiMinusCircle, FiPlus } from 'react-icons/fi';
+import { httpRequest } from '../../services/http';
+import { ApiEndpoints } from '../../const/apiEndpoints';
+import CustomSelect from '../customSelect';
 
 loader.init();
 loader.config({ monaco });
@@ -53,6 +56,7 @@ const selectProtocolOption = ['NATS', 'HTTP (REST)'];
 const ExpandIcon = ({ isActive }) => <img className={isActive ? 'collapse-arrow open' : 'collapse-arrow close'} src={CollapseArrow} alt="collapse-arrow" />;
 
 const SdkExample = ({ consumer, showTabs = true, stationName, username, connectionCreds, withHeader = false }) => {
+    const [listofUsers, setListOfUsers] = useState([]);
     const [langSelected, setLangSelected] = useState('Go');
     const [protocolSelected, setProtocolSelected] = useState('NATS');
     const [codeExample, setCodeExample] = useState({
@@ -79,6 +83,17 @@ const SdkExample = ({ consumer, showTabs = true, stationName, username, connecti
     const createUserRef = useRef(null);
     const { Panel } = Collapse;
 
+    const getListOfUsers = async () => {
+        try {
+            const data = await httpRequest('GET', ApiEndpoints.GET_ALL_USERS);
+            setListOfUsers(data.application_users.map((item) => ({ ...item, name: item.username })));
+        } catch (error) {}
+    };
+
+    useEffect(() => {
+        getListOfUsers();
+    }, [addUserModalIsOpen]);
+
     useEffect(() => {
         protocolSelected === 'NATS' ? changeDynamicCode(langSelected) : changeProtocolDynamicCode(langSelected);
     }, []);
@@ -495,33 +510,21 @@ const SdkExample = ({ consumer, showTabs = true, stationName, username, connecti
                                         }
                                     >
                                         <div className="parameters-section">
-                                            {(tabValue === 'NATS' || tabValueRest === 'Generate token') && (
+                                            {(tabValue === 'NATS' || tabValueRest === 'Generate token') && withHeader && (
                                                 <>
-                                                    {withHeader && (
-                                                        <div className="new-user">
-                                                            <div className="generate-action" onClick={() => addUserModalFlip(true)}>
-                                                                <FiPlus />
-                                                                <span>Create new user</span>
-                                                            </div>
-                                                        </div>
-                                                    )}
                                                     <div className="username-section">
                                                         <span className="input-item">
                                                             <TitleComponent headerTitle="Username" typeTitle="sub-header" />
                                                             <Form.Item>
-                                                                <Input
-                                                                    placeholder="Type user name"
-                                                                    type="text"
-                                                                    fontSize="14px"
-                                                                    maxLength="220"
-                                                                    radiusType="semi-round"
-                                                                    colorType="black"
-                                                                    backgroundColorType="white"
-                                                                    borderColorType="gray"
-                                                                    height="40px"
-                                                                    onBlur={(e) => updateFormFields('userName', e.target.value)}
-                                                                    onChange={(e) => updateFormFields('userName', e.target.value)}
+                                                                <CustomSelect
+                                                                    placeholder={'Select user name'}
                                                                     value={formFields.userName}
+                                                                    options={listofUsers}
+                                                                    onChange={(e) => {
+                                                                        updateFormFields('userName', e);
+                                                                    }}
+                                                                    type="user"
+                                                                    handleCreateNew={() => addUserModalFlip(true)}
                                                                 />
                                                             </Form.Item>
                                                         </span>

ui_static_files/build/asset-manifest.json

@@ -1,7 +1,7 @@
 {
   "files": {
-    "main.css": "/static/css/main.739005f2.css",
-    "main.js": "/static/js/main.e0717c93.js",
+    "main.css": "/static/css/main.90d29879.css",
+    "main.js": "/static/js/main.ef5c935f.js",
     "static/js/617.a5f8c4fc.chunk.js": "/static/js/617.a5f8c4fc.chunk.js",
     "static/js/2542.27de8743.chunk.js": "/static/js/2542.27de8743.chunk.js",
     "static/js/1737.e134cfd4.chunk.js": "/static/js/1737.e134cfd4.chunk.js",
@@ -294,7 +294,7 @@
     "static/media/closeNotification.svg": "/static/media/closeNotification.7551e8366682f9c6585bb1a694c4112a.svg"
   },
   "entrypoints": [
-    "static/css/main.739005f2.css",
-    "static/js/main.e0717c93.js"
+    "static/css/main.90d29879.css",
+    "static/js/main.ef5c935f.js"
   ]
 }