Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-24 01:18:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

New add plugins UI (#10538)

Browse source 
* New add plugins UI

* hover and height
This commit is contained in:
Rudhra Deep Biswas 2024-08-13 13:15:18 +05:30 committed by GitHub
parent 5dfcc56047
commit 523c80f695
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 63 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
frontend/src/GlobalDatasources/GlobalDataSourcesPage/index.jsx
View file

@ -31,7 +31,6 @@ export const GlobalDataSourcesPage = ({ darkMode = false, updateSelectedDatasour
const [addingDataSource, setAddingDataSource] = useState(false);
const [suggestingDataSource, setSuggestingDataSource] = useState(false);
const { t } = useTranslation();
const navigate = useNavigate();
const { admin } = authenticationService.currentSessionValue;
const marketplaceEnabled = admin && window.public_config?.ENABLE_MARKETPLACE_FEATURE == 'true';
const [modalProps, setModalProps] = useState({
@ -296,34 +295,6 @@ export const GlobalDataSourcesPage = ({ darkMode = false, updateSelectedDatasour
};
const renderCardGroup = (source, type) => {
if (type === 'Plugins' && source.length === 0) {
return (
<div className="add-plugins-container">
<div className="warning-container mb-2">
<SolidIcon name="warning" />
</div>
<div className="tj-text-sm font-weight-500 tj-text">No plugins added</div>
{admin && (
<>
<div className="tj-text-xsm font-weight-400 mt-2 mb-3">
Browse through plugins in marketplace to add them as a Data Source.{' '}
</div>
<ButtonSolid
onClick={() => {
marketplaceEnabled
? navigate('/integrations')
: toast.error('Please enable marketplace to add plugins');
}}
style={{ margin: 'auto' }}
variant="secondary"
>
Add plugins
</ButtonSolid>
</>
)}
</div>
);
}
const addDataSourceBtn = (item) => (
<ButtonSolid
disabled={addingDataSource}
@ -366,6 +337,36 @@ export const GlobalDataSourcesPage = ({ darkMode = false, updateSelectedDatasour
titleClassName={'datasource-card-title'}
/>
))}
{type === 'Plugins' && (
<div style={{ height: '122px', width: '164px' }} className={`col-md-2 mb-4 `}>
<div
className="card add-plugin-card"
role="button"
onClick={() => {
if (marketplaceEnabled) {
window.open('/integrations', '_blank');
} else {
toast.error('Please enable marketplace to add plugins');
}
}}
data-cy={`data-source-add-plugin`}
>
<div className="card-body">
<center style={{ paddingTop: '5px' }}>
<SolidIcon
name="plus"
fill={'var(--icon-default)'}
width={35}
height={35}
style={{ marginBottom: '8px' }}
/>
<br></br>
<span className={`datasource-card-title add-plugin-card-title`}>Add plugin</span>
</center>
</div>
</div>
</div>
)}
</div>
</>
);

33
frontend/src/_styles/global-datasources.scss
View file

@ -300,4 +300,37 @@
border-radius: 6px;
margin: auto;
}
}
.add-plugin-card{
border: 1px dashed var(--border-default, #CCD1D5);
background-color: var(--interactive-weak);
&:hover{
border: 1px dashed var(--border-strong, #CCD1D5);
background-color: var(--interactive-default);
}
}
.add-plugin-card-title{
font-weight: 500;
font-size: 14px;
line-height: 20px;
color: var(--text-default);
}
.dark-theme{
.add-plugin-card{
border: 1px dashed var(--border-default, #CCD1D5);
background-color: var(--interactive-weak);
&:hover{
border: 1px dashed var(--border-strong, #CCD1D5);
background-color: var(--interactive-default);
}
}
}