Skip to content

Commit

Permalink
Merge pull request #1456 from memphisdev/bugfix/RND-248-functions-ui-…
Browse files Browse the repository at this point in the history 
…bugs

Functions UI Bugs
  • Loading branch information
@SvetaMemphis
SvetaMemphis committed Nov 28, 2023
2 parents 17b52d8 + 00d7289 commit d5869d0
Show file tree
Hide file tree
Showing 28 changed files with 760 additions and 974 deletions.
3 changes: 2 additions & 1 deletion ui_src/src/components/Tabs/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
.tabs-name {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
.error-icon {
background-color: rgba(217, 45, 32, 0.1);
Expand Down Expand Up @@ -59,7 +60,7 @@
}
.ant-checkbox-wrapper:hover .ant-checkbox-inner,
.ant-checkbox:hover .ant-checkbox-inner,
.ant-checkbox-input:focus+.ant-checkbox-inner {
.ant-checkbox-input:focus + .ant-checkbox-inner {
border-radius: 50% !important;
}
}
Expand Down
33 changes: 7 additions & 26 deletions ui_src/src/components/copy/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,52 +14,33 @@ import React, { useState } from 'react';
import { ReactComponent as CopyIcon } from '../../assets/images/copy.svg';
import { ReactComponent as CopiedIcon } from '../../assets/images/copied.svg';
import './style.scss';
import { Popover } from 'antd';

const overlayStylesPopover = {
width: '83px',
marginTop: '8px'
};

const Copy = ({ data, key, width = '16', text }) => {
const [copied, setCopied] = useState(false);
const [copied, setCopied] = useState(null);

const handleCopyWithKey = (key, data) => {
setCopied(key);
data && navigator.clipboard.writeText(data);
setTimeout(() => {
setCopied(null);
}, 1200);
}, 3000);
};

const handleCopy = (data) => {
setCopied(true);
data && navigator.clipboard.writeText(data);
setTimeout(() => {
setCopied(false);
}, 1200);
}, 3000);
};

const CopyComponent = key ? (copied === key ? CopiedIcon : CopyIcon) : copied ? CopiedIcon : CopyIcon;

return (
<Popover
overlayInnerStyle={overlayStylesPopover}
overlayClassName="copy-wrapper-popover"
title="Copied"
trigger="click"
placement="bottom"
onOpenChange={() => setCopied(!copied)}
open={copied}
onClick={() => {
setCopied(false);
}}
>
<div className="copy-wrapper" onClick={() => (key ? handleCopyWithKey(key, data) : handleCopy(data))}>
<CopyComponent alt="copy" width={width} />
{text && <span className={`copy-text ${copied && ' copied'}`}>{text}</span>}
</div>
</Popover>
<div className="copy-wrapper" onClick={() => (key ? handleCopyWithKey(key, data) : handleCopy(data))}>
<CopyComponent alt="copy" width={width} />
{text && <span className={`copy-text ${copied && ' copied'}`}>{text}</span>}
</div>
);
};

Expand Down
5 changes: 0 additions & 5 deletions ui_src/src/components/copy/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,4 @@
.copy-wrapper {
&-popover {
.ant-popover-arrow {
display: initial!important;
}
}
cursor: pointer;
display: flex;
align-items: center;
Expand Down
20 changes: 10 additions & 10 deletions ui_src/src/components/sideBar/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,16 +208,16 @@ function SideBar() {
const PopoverActionItem = ({ icon, name, onClick, upgrade }) => {
upgrade && setBannerType('upgrade');
return (
<div className="item-wrap">
<div
className="item"
onClick={() => {
if (upgrade) {
setCloudModalOpen(true);
setPopoverQuickActions(false);
} else onClick();
}}
>
<div
className="item-wrap"
onClick={() => {
if (upgrade) {
setCloudModalOpen(true);
setPopoverQuickActions(false);
} else onClick();
}}
>
<div className="item">
<span className="icons">{icon}</span>
<p className="item-title">{name}</p>
</div>
Expand Down
33 changes: 2 additions & 31 deletions ui_src/src/components/upgradePlans/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,17 +191,6 @@ const UpgradePlans = ({ open, onClose, content, isExternal = true }) => {
>
<Fragment>
<div className="instructions-redirect">
{downgradeInstructions['feature-integration-slack'] && (
<div className="redirect-section">
<div className="violations-list">
<p className="violation-title"> Using Slack integration is violating the new plan</p>
<div className="hint-line">
<HiOutlineExclamationCircle />
<span>Please fix the following issues before performing a downgrade</span>
</div>
</div>
</div>
)}
{downgradeInstructions['feature-management-users'] && (
<div className="redirect-section">
<p className="violation-title">Too many management users ({downgradeInstructions['feature-management-users']['usage']})</p>
Expand Down Expand Up @@ -291,26 +280,8 @@ const UpgradePlans = ({ open, onClose, content, isExternal = true }) => {
</div>
</div>
)}
{downgradeInstructions['feature-apply-functions'] && (
<div className="violations-list">
<p className="violation-title">Some stations have attached functions</p>
<div className="hint-line">
<HiOutlineExclamationCircle />
<span>The plan you are about to downgrade does not allow to use attached functions feature</span>
</div>
</div>
)}
{downgradeInstructions['feature-dls-consumption-linkage'] && (
<div className="violations-list">
<p className="violation-title">Some stations are utilizing the DLS linkage feature</p>
<div className="hint-line">
<HiOutlineExclamationCircle />
<span>The plan you are about to downgrade to does not allow to use DLS linkage feature</span>
</div>
</div>
)}
</div>
)}
</div>
)}
</div>
<div className="instructions-button">
<Button
Expand Down
211 changes: 113 additions & 98 deletions ui_src/src/domain/functions/components/attachFunctionModal/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ import { isCloud } from '../../../../services/valueConvertor';
import { Context } from '../../../../hooks/store';
import LockFeature from '../../../../components/lockFeature';

const AttachFunctionModal = ({ selectedFunction }) => {
const AttachFunctionModal = ({ open, clickOutside, selectedFunction }) => {
const createStationRef = useRef(null);
const [state, dispatch] = useContext(Context);
const [searchInput, setSearchInput] = useState('');
Expand Down Expand Up @@ -72,115 +72,130 @@ const AttachFunctionModal = ({ selectedFunction }) => {
};

return (
<div className="attach-station-modal-container">
{isLoading && <Loader />}
{!isLoading && filteredStations?.length === 0 && (
<div className="no-schema-to-display">
<StationIcon width={50} height={50} />

<p className="title">No stations yet</p>
<p className="sub-title">Get started by creating your first station</p>
<Button
className="modal-btn"
width="160px"
height="34px"
placeholder={`Create new station`}
colorType="white"
radiusType="circle"
backgroundColorType="purple"
fontSize="12px"
fontFamily="InterSemiBold"
aria-controls="usecse-menu"
aria-haspopup="true"
onClick={() => setNewStationModal(true)}
/>
<Modal
header={
<div className="modal-header">
<p>Attach a function</p>
</div>
)}
{!isLoading && filteredStations?.length > 0 && (
<>
<SearchInput
placeholder={`Search station`}
colorType="navy"
backgroundColorType="none"
borderRadiusType="circle"
borderColorType="search-input"
iconComponent={<SearchIcon />}
onChange={handleSearch}
value={searchInput}
width="100%"
height="35px"
/>
<div className="schemas-list">
{filteredStations?.map((station) => {
return <SchemaItem key={station.name} schema={station} selected={selected} handleSelectedItem={(id) => setSelected(id)} type={'dls'} />;
})}
</div>
}
displayButtons={false}
height="400px"
width="352px"
clickOutside={clickOutside}
open={open}
hr={true}
className="use-schema-modal"
>
<div className="attach-station-modal-container">
{isLoading && <Loader />}
{!isLoading && filteredStations?.length === 0 && (
<div className="no-schema-to-display">
<StationIcon width={50} height={50} />

<div className="buttons">
<div className="add-schema" onClick={() => (!isCloud() || state?.allowedActions?.can_create_stations) && setNewStationModal(true)}>
<AddRounded />
<p>Add a new station </p>
{isCloud() && !state?.allowedActions?.can_create_stations && <LockFeature />}
</div>
<p className="title">No stations yet</p>
<p className="sub-title">Get started by creating your first station</p>
<Button
width="100%"
height="35px"
placeholder="Attach"
className="modal-btn"
width="160px"
height="34px"
placeholder={`Create new station`}
colorType="white"
radiusType="circle"
backgroundColorType="purple"
fontSize="13px"
fontSize="12px"
fontFamily="InterSemiBold"
disabled={!selected}
onClick={() =>
history.push({
pathname: `${pathDomains.stations}/${selected}`,
selectedFunction: selectedFunction
})
}
aria-controls="usecse-menu"
aria-haspopup="true"
onClick={() => setNewStationModal(true)}
/>
</div>
</>
)}
)}
{!isLoading && filteredStations?.length > 0 && (
<>
<SearchInput
placeholder={`Search station`}
colorType="navy"
backgroundColorType="none"
borderRadiusType="circle"
borderColorType="search-input"
iconComponent={<SearchIcon />}
onChange={handleSearch}
value={searchInput}
width="100%"
height="35px"
/>
<div className="schemas-list">
{filteredStations?.map((station) => {
return <SchemaItem key={station.name} schema={station} selected={selected} handleSelectedItem={(id) => setSelected(id)} type={'dls'} />;
})}
</div>

<Modal
header={
<div className="modal-header">
<div className="header-img-container">
<StationIcon className="headerImage" alt="stationImg" />
<div className="buttons">
<div className="add-schema" onClick={() => (!isCloud() || state?.allowedActions?.can_create_stations) && setNewStationModal(true)}>
<AddRounded />
<p>Add a new station </p>
{isCloud() && !state?.allowedActions?.can_create_stations && <LockFeature />}
</div>
<Button
width="100%"
height="35px"
placeholder="Attach"
colorType="white"
radiusType="circle"
backgroundColorType="purple"
fontSize="13px"
fontFamily="InterSemiBold"
disabled={!selected}
onClick={() =>
history.push({
pathname: `${pathDomains.stations}/${selected}`,
selectedFunction: selectedFunction
})
}
/>
</div>
<p>Create a new station</p>
<label>
A station is a distributed unit that stores the produced data{' '}
<LearnMore url="https://docs.memphis.dev/memphis/memphis-broker/concepts/station" />
</label>
</div>
}
height="58vh"
width="1020px"
rBtnText="Create"
lBtnText="Cancel"
lBtnClick={() => {
setNewStationModal(false);
}}
rBtnClick={() => {
createStationRef.current();
setNewStationModal(false);
}}
clickOutside={() => setNewStationModal(false)}
open={newStationModal}
isLoading={creatingProsessd}
>
<CreateStationForm
createStationFormRef={createStationRef}
setLoading={(e) => setCreatingProsessd(e)}
finishUpdate={() => {
getAllStations();
</>
)}

<Modal
header={
<div className="modal-header">
<div className="header-img-container">
<StationIcon className="headerImage" alt="stationImg" />
</div>
<p>Create a new station</p>
<label>
A station is a distributed unit that stores the produced data{' '}
<LearnMore url="https://docs.memphis.dev/memphis/memphis-broker/concepts/station" />
</label>
</div>
}
height="58vh"
width="1020px"
rBtnText="Create"
lBtnText="Cancel"
lBtnClick={() => {
setNewStationModal(false);
}}
noRedirect={true}
/>
</Modal>
</div>
rBtnClick={() => {
createStationRef.current();
setNewStationModal(false);
}}
clickOutside={() => setNewStationModal(false)}
open={newStationModal}
isLoading={creatingProsessd}
>
<CreateStationForm
createStationFormRef={createStationRef}
setLoading={(e) => setCreatingProsessd(e)}
finishUpdate={() => {
getAllStations();
}}
noRedirect={true}
/>
</Modal>
</div>
</Modal>
);
};

Expand Down
Loading

0 comments on commit d5869d0

Please sign in to comment.