Frontend refactor (#929)

* Toolkits.js refactor * Toolkits.js refactoring done * Agents.js refactoring done * Minor Changes * Knowledge.js refactoring on way * ResourceManager.js refactoring on way * ResourceList.js refactoring on way * TopBar.js refactoring done * Sidebar.js ready for Product Hunt Release * Topbar.js ready for Product Hunt Release * Sidebar.js refactoring done * ApmDashboard.js refactoring done * AddKnowledge.js refactoring done * AddTool.js refactoring done * ToolkitWorkspace.js refactoring done * MarketTools.js refactoring done * MarketAgent.js refactoring done * RunHistory.js refactoring done * Product Hunt Changes Reverted
TransformerOptimus · Jul 31, 2023 · dba2dca · dba2dca
1 parent 776d289
commit dba2dca
Show file tree

Hide file tree

Showing 20 changed files with 332 additions and 290 deletions.
diff --git a/gui/pages/Content/APM/ApmDashboard.js b/gui/pages/Content/APM/ApmDashboard.js
diff --git a/gui/pages/Content/Agents/RunHistory.js b/gui/pages/Content/Agents/RunHistory.js
@@ -25,49 +25,30 @@ export default function RunHistory({runs, setHistory, selectedRunId, setSelected
   });
 
   return (<>
-    <div style={{width: '20%', height: '100%'}}>
-      <div className={styles.detail_top}>
-        <div style={{display: 'flex'}}>
-          <div style={{display: 'flex', alignItems: 'center', paddingLeft: '0'}} className={styles.tab_text}>
-            <div>
-              <Image width={16} height={16} src="/images/update.svg" alt="update-icon"/>
-            </div>
-            <div style={{marginLeft: '7px'}}>Run history</div>
-          </div>
-        </div>
-        <div style={{display: 'flex'}}>
-          <div style={{display: 'flex', alignItems: 'center', cursor: 'pointer'}} onClick={() => setHistory(false)}>
-            <Image width={28} height={28} src="/images/close_history.svg" alt="close-history-icon"/>
-          </div>
+    <div className="w_20 h_100">
+      <div className="detail_top mt_8 mb_8">
+        <div className="text_12 horizontal_container padding_0 gap_6">
+          <Image width={16} height={16} src="/images/update.svg" alt="update-icon"/>
+          <div className="color_white lh_16">Run history</div>
         </div>
+        <Image className="cursor_pointer" onClick={() => setHistory(false)} width={28} height={28} src="/images/close_history.svg" alt="close-history-icon"/>
       </div>
-      <div className={styles.detail_body} style={{overflowY: "auto", maxHeight: '80vh', position: 'relative'}}>
-        {runs && runs.map((run) => (<div key={run.id} onClick={() => setSelectedRun(run)} className={styles.history_box}
-                                         style={selectedRunId === run.id ? {background: '#474255'} : {background: '#272335'}}>
-          <div style={{display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '10px'}}>
-            <div style={{display: 'flex', order: '0'}}>
-              {run.status === 'RUNNING' &&
-                <div><Image width={14} height={14} style={{mixBlendMode: 'exclusion'}} src="/images/loading.gif"
-                            alt="loading-icon"/></div>}
-              <div className={styles.text_block}
-                   style={run.status === 'RUNNING' ? {marginLeft: '7px'} : {}}>{run.name}</div>
-            </div>
+
+      <div className="detail_body mb_20">
+        {runs && runs.map((run) => (<div key={run.id} onClick={() => setSelectedRun(run)} className={selectedRunId === run.id ? 'history_box_selected' : 'history_box'}>
+          <div className="horizontal_container mb_14">
+            {run.status === 'RUNNING' && <Image className="mix_blend_mode mr_7" width={14} height={14} src="/images/loading.gif" alt="loading-icon"/>}
+            <div className="text_ellipsis">{run.name}</div>
             {/*{run.notification_count > 0 && <div className={styles.notification_bubble}>{run.notification_count}</div>}*/}
           </div>
-          <div style={{display: 'flex', alignItems: 'center', justifyContent: 'flex-start'}}>
-            <div style={{display: 'flex', alignItems: 'center'}}>
-              <div>
-                <Image width={12} height={12} src="/images/calls_made.svg" alt="call-icon"/>
-              </div>
-              <div className={styles.history_info}>
-                {formatNumber(run?.num_of_calls || 0)} Calls
-              </div>
+          <div className="horizontal_container align_center">
+            <div className="horizontal_container w_fit_content">
+              <Image width={12} height={12} src="/images/calls_made.svg" alt="call-icon"/>
+              <div className="text_10 ml_4">{formatNumber(run?.num_of_calls || 0)} Calls</div>
             </div>
-            <div style={{display: 'flex', alignItems: 'center', marginLeft: '10px'}}>
-              <div>
-                <Image width={12} height={12} src="/images/schedule.svg" alt="schedule-icon"/>
-              </div>
-              <div className={styles.history_info}>
+            <div className="horizontal_container ml_10 w_fit_content">
+              <Image width={12} height={12} src="/images/schedule.svg" alt="schedule-icon"/>
+              <div className="text_10 ml_4">
                 {formatTimeDifference(run.time_difference)}
               </div>
             </div>

diff --git a/gui/pages/Content/Knowledge/AddKnowledge.js b/gui/pages/Content/Knowledge/AddKnowledge.js
@@ -26,7 +26,7 @@ export default function AddKnowledge({internalId, sendKnowledgeData}) {
   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">
         <KnowledgeForm internalId={internalId}
                        knowledgeId={null}
                        knowledgeName={knowledgeName}

diff --git a/gui/pages/Content/Marketplace/Market.module.css b/gui/pages/Content/Marketplace/Market.module.css
@@ -515,9 +515,3 @@
     overflow-y:scroll;
     overflow-x:hidden;
 }
-
-.tools_icon{
-    border-radius: 25px;
-    background: black;
-    position: relative;
-}
diff --git a/gui/pages/Content/Marketplace/MarketAgent.js b/gui/pages/Content/Marketplace/MarketAgent.js
@@ -45,33 +45,25 @@ export default function MarketAgent() {
   }
 
   return (
-    <div style={showMarketplace ? {marginLeft: '8px'} : {marginLeft: '3px'}}>
-      <div className={styles.rowContainer} style={{maxHeight: '78vh', overflowY: 'auto'}}>
+    <div className={showMarketplace ? 'ml_8' : 'ml_3'}>
+      <div className="w_100 overflowY_auto mxh_78vh">
         {!isLoading ? <div>
           {agentTemplates.length > 0 ? <div className={styles.resources}>{agentTemplates.map((item, index) => (
-            <div className={styles.market_tool} key={item.id} style={{cursor: 'pointer'}}
-                 onClick={() => handleTemplateClick(item)}>
-              <div style={{display: 'inline', overflow: 'auto'}}>
+            <div className="market_tool cursor_pointer" key={item.id} onClick={() => handleTemplateClick(item)}>
+              <div className="horizontal_container overflow_auto">
                 <div>{item.name}</div>
-                <div style={{color: '#888888', lineHeight: '16px'}}>by SuperAgi&nbsp;<Image width={14} height={14}
+                <div className="color_gray lh_16">by SuperAgi&nbsp;<Image width={14} height={14}
                                                                                             src="/images/is_verified.svg"
                                                                                             alt="is_verified"/></div>
-                <div className={styles.tool_description} style={{marginTop: '8px'}}>{item.description}</div>
+                <div className="text_ellipsis mt_8 color_gray">{item.description}</div>
               </div>
             </div>
-          ))}</div> : <div style={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            marginTop: '40px',
-            width: '100%'
-          }}>
+          ))}</div> : <div className="center_container mt_40">
             <Image width={150} height={60} src="/images/no_permissions.svg" alt="no-permissions"/>
-            <span className={styles.feed_title} style={{marginTop: '8px'}}>No Agent Templates found!</span>
+            <span className="feed_title mt_8">No Agent Templates found!</span>
           </div>}
-        </div> : <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', height: '75vh'}}>
-          <div className="signInInfo" style={{fontSize: '16px', fontFamily: 'Source Code Pro'}}>{loadingText}</div>
+        </div> : <div className="horizontal_container_center h_75vh">
+          <div className="signInInfo text_16 ff_sourceCode">{loadingText}</div>
         </div>}
       </div>
     </div>

diff --git a/gui/pages/Content/Marketplace/MarketKnowledge.js b/gui/pages/Content/Marketplace/MarketKnowledge.js
@@ -46,15 +46,14 @@ export default function MarketKnowledge() {
   }
 
   return (
-    <div style={showMarketplace ? {marginLeft: '8px'} : {marginLeft: '3px'}}>
-      <div className={styles.rowContainer} style={{maxHeight: '78vh', overflowY: 'auto'}}>
+    <div className={showMarketplace ? 'ml_8' : 'ml_3'}>
+      <div className="w_100 overflowY_auto mxh_78vh">
         {!isLoading ? <div>
           {knowledgeTemplates.length > 0 ? <div className={styles.resources}>{knowledgeTemplates.map((item, index) => (
             <div className={styles.market_tool} key={item.id} style={{cursor: 'pointer', display: 'block'}}
                  onClick={() => handleTemplateClick(item)}>
               <div style={{display: 'inline', overflow: 'auto'}}>
-                {/*<Image style={{borderRadius: '25px',background:'black',position:'absolute'}} width={40} height={40} src="/images/app-logo-light.png" alt="tool-icon"/>*/}
-                <div style={{display: 'flex', flexDirection: 'row', width: '100%', justifyContent: 'space-between'}}>
+                <div className="horizontal_space_between">
                   <span>{item.name}</span>
                   {item.is_installed &&
                     <div className={styles1.installed_knowledge_card_class}>{'\u2713'}&nbsp;Installed</div>}
@@ -68,22 +67,15 @@ export default function MarketKnowledge() {
                 }}>by {item.contributed_by}&nbsp;{'\u00B7'}&nbsp;<Image
                   width={14} height={14} src="/images/upload_icon.svg" alt="upload-icon"/>&nbsp;{item.install_number}
                 </div>
-                <div className={styles.tool_description}>{item.description}</div>
+                <div className="text_ellipsis mt_6 color_gray">{item.description}</div>
               </div>
             </div>
-          ))}</div> : <div style={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            marginTop: '40px',
-            width: '100%'
-          }}>
+          ))}</div> : <div className="center_container mt_40">
             <Image width={150} height={60} src="/images/no_permissions.svg" alt="no-permissions"/>
-            <span className={styles.feed_title} style={{marginTop: '8px'}}>No Knowledge found!</span>
+            <span className="feed_title mt_8" style={{marginTop: '8px'}}>No Knowledge found!</span>
           </div>}
-        </div> : <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', height: '75vh'}}>
-          <div className="signInInfo" style={{fontSize: '16px', fontFamily: 'Source Code Pro'}}>{loadingText}</div>
+        </div> : <div className="horizontal_container_center h_75vh">
+          <div className="signInInfo text_16 ff_sourceCode">{loadingText}</div>
         </div>}
       </div>
     </div>

diff --git a/gui/pages/Content/Marketplace/MarketTools.js b/gui/pages/Content/Marketplace/MarketTools.js
@@ -47,26 +47,26 @@ export default function MarketTools() {
   }
 
   return (
-    <div style={showMarketplace ? {marginLeft: '8px'} : {marginLeft: '3px'}}>
-      <div className={styles.rowContainer} style={{maxHeight: '78vh', overflowY: 'auto'}}>
+    <div className={showMarketplace ? 'ml_8' : 'ml_3'}>
+      <div className="w_100 overflowY_auto mxh_78vh">
         {!isLoading ? <div>
           {toolTemplates.length > 0 ? <div className={styles.resources}>{toolTemplates.map((item) => (
-            <div className={styles.market_tool} key={item.id} style={{cursor: 'pointer'}} onClick={() => handleTemplateClick(item)}>
-              <div style={{display: 'inline-flex', overflow: 'auto'}}>
-                <Image className={styles.tools_icon} width={40} height={40} src={returnToolkitIcon(item.name)} alt="tool-icon"/>
+            <div className="market_tool cursor_pointer" key={item.id} onClick={() => handleTemplateClick(item)}>
+              <div className="horizontal_container overflow_auto">
+                <Image className="tool_icon" width={40} height={40} src={returnToolkitIcon(item.name)} alt="tool-icon"/>
                 <div className="ml_12 mb_8">
                     <div>{item.name}</div>
-                    <div style={{color: '#888888', lineHeight: '16px'}}>by SuperAgi&nbsp;<Image width={14} height={14} src="/images/is_verified.svg" alt="is_verified"/></div>
+                    <div className="color_gray lh_16">by SuperAgi&nbsp;<Image width={14} height={14} src="/images/is_verified.svg" alt="is_verified"/></div>
                 </div>
               </div>
-              <div className={styles.tool_description}>{item.description}</div>
+              <div className="text_ellipsis mt_6 color_gray">{item.description}</div>
             </div>
           ))}</div> : <div className="center_container mt_40">
             <Image width={150} height={60} src="/images/no_permissions.svg" alt="no-permissions"/>
-            <span className={styles.feed_title} style={{marginTop: '8px'}}>No Tools found!</span>
+            <span className="feed_title mt_8">No Tools found!</span>
           </div>}
-        </div> : <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', height: '75vh'}}>
-          <div className="signInInfo" style={{fontSize: '16px', fontFamily: 'Source Code Pro'}}>{loadingText}</div>
+        </div> : <div className="horizontal_container_center h_75vh">
+          <div className="signInInfo text_16 ff_sourceCode">{loadingText}</div>
         </div>}
       </div>
     </div>

diff --git a/gui/pages/Content/Toolkits/AddTool.js b/gui/pages/Content/Toolkits/AddTool.js
@@ -58,24 +58,16 @@ export default function AddTool({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>
-          <div className={styles1.page_title}>Add a new tool</div>
-        </div>
-        <div style={{marginTop: '10px'}}>
-          <div>
-            <label className={styles1.form_label}>Github Repository URL</label><br/>
-            <label className={styles1.form_label}>Paste your toolkits Github repo url here and we will sync &
-              install</label>
-            <input placeholder="Enter URL here" className="input_medium" type="text" value={githubURL}
-                   onChange={handleURLChange}/>
-          </div>
-          <div style={{marginTop: '15px', display: 'flex', justifyContent: 'flex-end'}}>
-            <button style={{marginRight: '7px'}} className="secondary_button"
-                    onClick={() => removeTab(-2, "new tool", "Add_Toolkit", internalId)}>Cancel
-            </button>
-            <button disabled={!addClickable} className="primary_button" onClick={handleAddTool}>Add tool</button>
-          </div>
+      <div className="col-6 col-6-scrollable">
+        <div className="page_title mt_10">Add a new tool</div>
+        <label className="form_label_13">Github Repository URL</label><br/>
+        <label className="form_label_13">Paste your toolkits Github repo url here and we will sync & install</label>
+        <input placeholder="Enter URL here" className="input_medium" type="text" value={githubURL} onChange={handleURLChange}/>
+
+        <div className="horizontal_container justify_end mt_14">
+          <button className="secondary_button mr_7" onClick={() => removeTab(-2, "new tool", "Add_Toolkit", internalId)}>Cancel
+          </button>
+          <button disabled={!addClickable} className="primary_button" onClick={handleAddTool}>Add tool</button>
         </div>
       </div>
       <div className="col-3"></div>