Skip to content

Commit

Permalink
ToolkitWorkspace.js refactoring done
Browse files Browse the repository at this point in the history
  • Loading branch information
@jedan2506
jedan2506 committed Jul 31, 2023
1 parent 2371a99 commit c7030eb
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 49 deletions.
73 changes: 24 additions & 49 deletions gui/pages/Content/Toolkits/ToolkitWorkspace.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,87 +109,62 @@ export default function ToolkitWorkspace({env, toolkitDetails, internalId}) {
}, [internalId]);

return (<>
'
<div className="row">
<div className="col-3"></div>
<div className="col-6" style={{overflowY: 'scroll', height: 'calc(100vh - 92px)', padding: '25px 20px'}}>
<div className="col-6 col-6-scrollable">
<div className={styles.tools_container}>
<div style={{display: 'flex', justifyContent: 'flex-start', marginBottom: '20px', width: '95%'}}>
<div>
<Image src={returnToolkitIcon(toolkitDetails?.name)} alt="toolkit-icon" width={45} height={45}
style={{borderRadius: '25px', background: 'black'}}/>
</div>
<div style={{display: 'flex', alignItems: 'center'}}>
<div style={{marginLeft: '15px', textAlign: 'left', paddingRight: '10px'}}>
<div style={{fontSize: '17px', marginTop: '-3px'}}>{toolkitDetails.name}</div>
<div className={styles.toolkit_description}
style={!showDescription ? {overflow: 'hidden'} : {display: 'block'}}>
{`${showDescription ? toolkitDetails.description : toolkitDetails.description.slice(0, 70)}`}
{toolkitDetails.description.length > 70 &&
<div className="horizontal_container align_start mb_20">
<Image src={returnToolkitIcon(toolkitDetails?.name)} alt="toolkit-icon" width={45} height={45} className="bg_black border_radius_25" />
<div className="vertical_containers ml_15 text_align_left mr_10">
<div className="text_17">{toolkitDetails.name}</div>
<div className={styles.toolkit_description} style={!showDescription ? {overflow: 'hidden'} : {display: 'block'}}>
{`${showDescription ? toolkitDetails.description : toolkitDetails.description.slice(0, 70)}`}
{toolkitDetails.description.length > 70 &&
<span className={styles.show_more_button} onClick={() => setShowDescription(!showDescription)}>
{showDescription ? '...less' : '...more'}
</span>}
</div>
</div>
</div>
</div>
<div style={{display: 'flex', alignItems: 'center', marginBottom: '20px'}}>
<div className={styles.tool1_box}
onClick={() => setLocalStorageValue('toolkit_tab_' + String(internalId), 'configuration', setActiveTab)}
style={activeTab === 'configuration' ? {background: '#454254'} : {background: 'transparent'}}>
<div className="horizontal_container mb_20">
<div className={activeTab === 'configuration' ? 'tab_button_small_selected' : 'tab_button_small'}
onClick={() => setLocalStorageValue('toolkit_tab_' + String(internalId), 'configuration', setActiveTab)}>
<div className={styles.tab_text}>Configuration</div>
</div>
<div className={styles.tool1_box}
onClick={() => setLocalStorageValue('toolkit_tab_' + String(internalId), 'tools_included', setActiveTab)}
style={activeTab === 'tools_included' ? {background: '#454254'} : {background: 'transparent'}}>
<div className={activeTab === 'tools_included' ? 'tab_button_small_selected' : 'tab_button_small'}
onClick={() => setLocalStorageValue('toolkit_tab_' + String(internalId), 'tools_included', setActiveTab)}>
<div className={styles.tab_text}>Tools Included</div>
</div>
</div>
{!loading && activeTab === 'configuration' && <div>
{apiConfigs.length > 0 ? (apiConfigs.map((config, index) => (
<div key={index}>
<div style={{
color: '#888888',
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
marginBottom: '20px'
}}>
<label style={{marginBottom: '6px'}}>{convertToTitleCase(config.key)}</label>
<div className="vertical_containers color_gray mb_20 text_align_left">
<label className="mb_6">{convertToTitleCase(config.key)}</label>
<div className={styles.search_box}>
<input type="text" style={{color: 'white', width: '100%'}} value={config.value || ''}
onChange={(event) => handleKeyChange(event, index)}/>
<input className="color_white w_100" type="text" value={config.value || ''} onChange={(event) => handleKeyChange(event, index)}/>
</div>
</div>
</div>
))) : (<div style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
marginTop: '40px',
width: '100%'
}}>
))) : (<div className="vertical_container mt_40 w_100">
<Image width={150} height={60} src="/images/no_permissions.svg" alt="no-permissions"/>
<span className={styles.feed_title} style={{marginTop: '8px'}}>No Keys found!</span>
<span className="feed_title mt_8">No Keys found!</span>
</div>)}

{apiConfigs.length > 0 && (
<div style={{marginLeft: 'auto', display: 'flex', justifyContent: 'space-between'}}>
<div>{authenticateToolkits.includes(toolkitDetails.name) &&
<button style={{width: 'fit-content'}} className="primary_button"
onClick={() => handleAuthenticateClick(toolkitDetails.name)}>Authenticate Tool</button>
}</div>
<div style={{display: 'flex', justifyContent: 'flex-end'}}>
<div className="horizontal_space_between">
{authenticateToolkits.includes(toolkitDetails.name) &&
<button className="primary_button w_fit_content" onClick={() => handleAuthenticateClick(toolkitDetails.name)}>Authenticate Tool</button>}
<button className="primary_button" onClick={handleUpdateChanges}>Update Changes</button>
</div>
</div>)}
</div>}
{activeTab === 'tools_included' && <div>
{toolsIncluded.map((tool, index) => (
<div key={index} className={styles.tools_included}>
<div>
<div style={{color: 'white'}}>{tool.name}</div>
<div style={{color: '#888888', marginTop: '5px'}}>{tool.description}</div>
<div className="color_white">{tool.name}</div>
<div className="color_gray mt_5">{tool.description}</div>
</div>
</div>
))}
Expand Down
30 changes: 30 additions & 0 deletions gui/pages/_app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -716,6 +716,7 @@ p {
}

.mt_4{margin-top: 4px;}
.mt_5{margin-top: 5px;}
.mt_6{margin-top: 6px;}
.mt_8{margin-top: 8px;}
.mt_10{margin-top: 10px;}
Expand Down Expand Up @@ -895,6 +896,14 @@ p {
line-height: normal;
}

.text_17{
color: #FFF;
font-size: 17px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

.text_20_bold{
color: #FFF;
font-size: 20px;
Expand Down Expand Up @@ -986,6 +995,7 @@ p {

.justify_center{justify-content: center}
.justify_end{justify-content: flex-end}
.justify_start{justify-content: flex-start}
.justify_space_between{justify-content: space-between}

.display_flex{display: inline-flex}
Expand Down Expand Up @@ -1015,6 +1025,7 @@ p {
.gap_20{gap:20px;}

.border_radius_8{border-radius: 8px;}
.border_radius_25{border-radius: 25px;}

.color_white{color:#FFFFFF}
.color_gray{color:#888888}
Expand Down Expand Up @@ -1455,6 +1466,25 @@ tr{
background: #454254;
}

.tab_button_small, .tab_button_small_selected{
height: 30px;
font-size: 12px;
text-align: center;
display: flex;
align-items: center;
padding: 8px;
border-radius: 8px;
cursor: pointer;
}

.tab_button_small{
background: transparent;
}

.tab_button_small_selected{
background: #454254;
}

.detail_top {
width: 100%;
height: fit-content;
Expand Down

0 comments on commit c7030eb

Please sign in to comment.