Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Producer user select #1305

Merged
merged 12 commits into from
Sep 12, 2023
Merged

Producer user select #1305

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
7ced3cd
update the user under consumer list
aydin101 Sep 5, 2023
89684fa
add build
aydin101 Sep 5, 2023
311b72f
update the code to display at certain cond
aydin101 Sep 6, 2023
3a83e36
add build
aydin101 Sep 6, 2023
d7cc971
Merge remote-tracking branch 'origin/master' into producer-user-select
aydin101 Sep 12, 2023
db4ec5e
build
aydin101 Sep 12, 2023
2906a41
add changes regarding the selec schema
aydin101 Sep 12, 2023
7bb875a
add changes
aydin101 Sep 12, 2023
ab61ef7
update custom select
aydin101 Sep 12, 2023
d0498c8
add build
aydin101 Sep 12, 2023
97157df
change based on comment
aydin101 Sep 12, 2023
62a4674
add build
aydin101 Sep 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ui_src/src/components/createStationForm/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
78 changes: 49 additions & 29 deletions ui_src/src/components/selectSchema/index.js → ui_src/src/components/customSelect/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,70 +16,90 @@ import { ArrowDropDownRounded } from '@material-ui/icons';
import { useHistory } from 'react-router-dom';
import React, { useContext } from 'react';
import { Select } from 'antd';

import { BsPlus } from 'react-icons/bs';
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 SelectSchema = ({ options, onChange, value, placeholder }) => {
const CustomSelect = ({ options, onChange, value, placeholder, type = 'schema', handleCreateNew }) => {
const history = useHistory();

const handleChange = (e) => {
onChange(e);
};

const createNew = () => {
const createNewSchema = () => {
history.push(`${pathDomains.schemaverse}/create`);
};

const displayValue = value === '' || value === null ? null : value;

return (
<div className="select-schema-container">
<Select
className="select"
placeholder={placeholder}
value={value}
value={displayValue}
bordered={false}
suffixIcon={<ArrowDropDownRounded className="drop-down-icon" />}
onChange={handleChange}
placement="bottomRight"
popupClassName="select-schema-options"
notFoundContent={
<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 className="top">
<p className="no-result-found">No Result Found</p>
</div>
<div className="divider" />
<div className="bottom">
<Button
placeholder={
<div className="create-btn">
<BsPlus style={{ color: '#6557FF', fontSize: '18px' }} />
<p>Create a {type === 'schema' ? ' schema' : type === 'user' ? 'user' : ''}</p>
</div>
}
className="modal-btn"
width="83px"
height="32px"
colorType="purple"
radiusType="circle"
backgroundColorType={'none'}
fontSize="12px"
fontWeight="600"
onClick={() => {
return type === 'schema' ? createNewSchema() : type === 'user' ? handleCreateNew() : null;
}}
/>
</div>
</div>
}
>
{options?.map((schema) => {
aydin101 marked this conversation as resolved.
Show resolved Hide resolved
return (
<Option key={schema?.id} value={schema?.name}>
<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>
<>
<div className="schema-details">
<img
src={type === 'schema' ? SchemaIconSelect : type === 'user' ? usersIconActive : null}
alt="SchemaIconSelect"
height={20}
width={20}
/>
<p className="schema-name">{schema?.name}</p>
</div>
<p className="created-by">
{type === 'schema' ? <>{schema?.type} &#8226;</> : null}
{parsingDate(schema?.created_at)}
</p>
</>
</Option>
);
})}
Expand All @@ -88,4 +108,4 @@ const SelectSchema = ({ options, onChange, value, placeholder }) => {
);
};

export default SelectSchema;
export default CustomSelect;
62 changes: 55 additions & 7 deletions ...rc/src/components/selectSchema/style.scss → ...rc/src/components/customSelect/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -58,15 +57,53 @@
position: relative;
display: flex;
flex-direction: column;
align-items: center;
align-items: flex-start;
height: 100%;
justify-content: center;
width: 100%;
.top {
// padding-top: 18px;
padding-left: 6px;
padding-bottom: 8px;
.no-result-found {
color: #a3aeca;
text-align: center;
font-family: 'Inter';
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 22px;
}
}
.divider {
height: 1px;
background-color: #f0f0f0;
align-self: stretch;
padding: 0px;
margin-left: -12px;
margin-right: -12px;
}
.bottom {
padding-left: 6px;
padding-top: 4px;
margin-bottom: -4px;
}
.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;
Expand All @@ -76,8 +113,7 @@
font-size: 12px;
line-height: 17px;
margin-bottom: 10px;
color: #8F8F8F;

color: #8f8f8f;
}
}
}
Expand All @@ -88,3 +124,15 @@
}
}
}

.create-btn {
display: flex;
flex-direction: row;
gap: 3px;
justify-content: flex-start;
align-items: center;

img {
margin-bottom: 0px !important;
}
}
101 changes: 51 additions & 50 deletions ui_src/src/components/sdkExample/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 CustomSelect from '../customSelect';
import { ApiEndpoints } from '../../const/apiEndpoints';
import { httpRequest } from '../../services/http';

loader.init();
loader.config({ monaco });
Expand Down Expand Up @@ -79,9 +82,23 @@ const SdkExample = ({ consumer, showTabs = true, stationName, username, connecti
});
const [createUserLoader, setCreateUserLoader] = useState(false);
const [addUserModalIsOpen, addUserModalFlip] = useState(false);
const [users, setUsers] = useState([]);
const createUserRef = useRef(null);
const { Panel } = Collapse;

const getAllUsers = async () => {
try {
const data = await httpRequest('GET', ApiEndpoints.GET_ALL_USERS);
setUsers(data.application_users.map((user) => ({ ...user, name: user.username })));
} catch (error) {}
};

useEffect(() => {
if (!consumer) {
getAllUsers();
}
});

useEffect(() => {
protocolSelected === 'SDK' ? changeSDKDynamicCode(langSelected) : changeRestDynamicCode(langSelected);
}, []);
Expand Down Expand Up @@ -530,56 +547,40 @@ const SdkExample = ({ consumer, showTabs = true, stationName, username, connecti
}
>
<div className="parameters-section">
{(tabValue === 'SDK' || tabValueRest === 'Generate token') && (
<>
{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)}
value={formFields.userName}
/>
</Form.Item>
</span>
<span className="input-item">
<TitleComponent headerTitle="Password" typeTitle="sub-header" />
<Form.Item name="password">
<Input
placeholder="Type password"
type="password"
fontSize="14px"
radiusType="semi-round"
colorType="black"
backgroundColorType="none"
borderColorType="gray"
height="40px"
onBlur={(e) => updateFormFields('password', e.target.value)}
onChange={(e) => updateFormFields('password', e.target.value)}
value={formFields.password}
/>
</Form.Item>
</span>
</div>
</>
{(tabValue === 'SDK' || tabValueRest === 'Generate token') && withHeader && (
<div className="username-section">
<span className="input-item">
<TitleComponent headerTitle="Username" typeTitle="sub-header" />
<Form.Item>
<CustomSelect
placeholder={'Select user'}
value={formFields.userName}
options={users}
onChange={(e) => updateFormFields('userName', e)}
type="user"
handleCreateNew={() => addUserModalFlip(true)}
/>
</Form.Item>
</span>
<span className="input-item">
<TitleComponent headerTitle="Password" typeTitle="sub-header" />
<Form.Item name="password">
<Input
placeholder="Type password"
type="password"
fontSize="14px"
radiusType="semi-round"
colorType="black"
backgroundColorType="none"
borderColorType="gray"
height="40px"
onBlur={(e) => updateFormFields('password', e.target.value)}
onChange={(e) => updateFormFields('password', e.target.value)}
value={formFields.password}
/>
</Form.Item>
</span>
</div>
)}

{protocolSelected === 'REST' && tabValueRest === 'Generate token' && (
Expand Down
8 changes: 4 additions & 4 deletions ui_static_files/build/asset-manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"files": {
"main.css": "/static/css/main.d5e3d4f3.css",
"main.js": "/static/js/main.4d0f5c7a.js",
"main.css": "/static/css/main.4dcb1851.css",
"main.js": "/static/js/main.465916bb.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",
Expand Down Expand Up @@ -294,7 +294,7 @@
"static/media/closeNotification.svg": "/static/media/closeNotification.7551e8366682f9c6585bb1a694c4112a.svg"
},
"entrypoints": [
"static/css/main.d5e3d4f3.css",
"static/js/main.4d0f5c7a.js"
"static/css/main.4dcb1851.css",
"static/js/main.465916bb.js"
]
}
Loading