Skip to content

Commit

Permalink
Merge pull request #1372 from memphisdev/function_details_ui
Browse files Browse the repository at this point in the history 
Function details UI
  • Loading branch information
@SvetaMemphis
SvetaMemphis committed Oct 27, 2023
2 parents b764632 + 98ca472 commit 1045de2
Show file tree
Hide file tree
Showing 12 changed files with 69 additions and 235 deletions.
8 changes: 4 additions & 4 deletions .../functions/components/cloneModal/index.js → ui_src/src/components/cloneModal/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@

import './style.scss';
import React, { useState } from 'react';
import Button from '../../../../components/button';
import Button from '../button';
import { FiDownload } from 'react-icons/fi';
import Copy from '../../../../components/copy';
import CustomTabs from '../../../../components/Tabs';
import { githubUrls } from '../../../../const/globalConst';
import Copy from '../copy';
import CustomTabs from '../Tabs';
import { githubUrls } from '../../const/globalConst';

const CloneModal = () => {
const [tabValue, setTabValue] = useState('HTTPS');
Expand Down
0 ...unctions/components/cloneModal/style.scss → ui_src/src/components/cloneModal/style.scss
View file
File renamed without changes.
16 changes: 8 additions & 8 deletions ui_src/src/domain/functions/components/functionBox/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ import OverflowTip from '../../../../components/tooltip/overflowtip';
import { OWNER } from '../../../../const/globalConst';
import AttachTooltip from '../AttachTooltip';

function FunctionBox({ funcDetails, integrated }) {
function FunctionBox({ funcDetails, integrated, installed }) {
const [functionDetails, setFunctionDetils] = useState(funcDetails);
const [open, setOpen] = useState(false);
const [selectedFunction, setSelectedFunction] = useState('');
Expand Down Expand Up @@ -122,17 +122,17 @@ function FunctionBox({ funcDetails, integrated }) {
className="install-button"
>
<div className="header-flex">
<AttachTooltip disabled={!isCloud() || functionDetails?.in_progress || !functionDetails?.is_installed} />
<AttachTooltip disabled={!isCloud() || functionDetails?.install_in_progress || !installed} />
{!isCloud() && <CloudOnly position={'relative'} />}
</div>
<div className="header-flex">
<Button
width="100px"
height="34px"
placeholder={
functionDetails?.in_progress ? (
functionDetails?.install_in_progress ? (
''
) : functionDetails?.is_installed ? (
) : installed ? (
<div className="code-btn">
<MdOutlineFileDownloadOff className="Uninstall" />
<label>Uninstall</label>
Expand All @@ -147,11 +147,11 @@ function FunctionBox({ funcDetails, integrated }) {
purple-light
colorType="white"
radiusType="circle"
backgroundColorType={functionDetails?.is_installed ? 'purple-light' : 'purple'}
backgroundColorType={installed ? 'purple-light' : 'purple'}
fontSize="12px"
fontFamily="InterSemiBold"
disabled={!isCloud() || functionDetails?.in_progress}
isLoading={functionDetails?.in_progress} //Get indication after install function
disabled={!isCloud() || functionDetails?.install_in_progress}
isLoading={functionDetails?.install_in_progress} //Get indication after install function
onClick={() => {
showMessages('success', 'Install function');
return;
Expand All @@ -176,7 +176,7 @@ function FunctionBox({ funcDetails, integrated }) {
maskStyle={{ background: 'rgba(16, 16, 16, 0.2)' }}
closeIcon={<IoClose style={{ color: '#D1D1D1', width: '25px', height: '25px' }} />}
>
<FunctionDetails selectedFunction={selectedFunction} integrated={integrated} />
<FunctionDetails selectedFunction={selectedFunction} integrated={integrated} installed={installed} />
</Drawer>
</>
);
Expand Down
18 changes: 9 additions & 9 deletions ui_src/src/domain/functions/components/functionDetails/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ import { code } from './code';

const files = ['domain', 'components', 'domain/functions/functionDetails/index.js', 'domain/functions/functionDetails/style.scss', 'domain/components/test.js'];

function FunctionDetails({ selectedFunction, integrated }) {
function FunctionDetails({ selectedFunction, installed }) {
const [open, setOpen] = useState(false);
const [tabValue, setTabValue] = useState('Details');
const [isTestFunctionModalOpen, setIsTestFunctionModalOpen] = useState(false);
Expand Down Expand Up @@ -158,15 +158,15 @@ function FunctionDetails({ selectedFunction, integrated }) {
<actions is="x3d">
<div className="action-section-btn">
<div className="header-flex">
<AttachTooltip disabled={!isCloud() || selectedFunction?.in_progress || !selectedFunction?.is_installed} />
<AttachTooltip disabled={!isCloud() || selectedFunction?.install_in_progress || !installed} />
{!isCloud() && <CloudOnly position={'relative'} />}
</div>
<div className="header-flex">
<Button
placeholder={
selectedFunction?.in_progress ? (
selectedFunction?.install_in_progress ? (
''
) : selectedFunction?.is_installed ? (
) : installed ? (
<div className="code-btn">
<MdOutlineFileDownloadOff className="Uninstall" />
<label>Uninstall</label>
Expand All @@ -179,7 +179,7 @@ function FunctionDetails({ selectedFunction, integrated }) {
)
}
width={'100px'}
backgroundColorType={selectedFunction?.is_installed ? 'purple-light' : 'purple'}
backgroundColorType={installed ? 'purple-light' : 'purple'}
colorType={'white'}
radiusType={'circle'}
fontSize="12px"
Expand All @@ -188,8 +188,8 @@ function FunctionDetails({ selectedFunction, integrated }) {
// installFunction() - not implemented yet
return;
}}
isLoading={selectedFunction?.in_progress}
disabled={!isCloud() || selectedFunction?.in_progress}
isLoading={selectedFunction?.install_in_progress}
disabled={!isCloud() || selectedFunction?.install_in_progress}
/>
{!isCloud() && <CloudOnly position={'relative'} />}
</div>
Expand All @@ -205,7 +205,7 @@ function FunctionDetails({ selectedFunction, integrated }) {
fontSize="12px"
fontFamily="InterSemiBold"
value={`Version: ${selectedVersion}`}
disabled={!isCloud() || !selectedFunction?.is_installed}
disabled={!isCloud() || !installed}
onChange={(e) => {
setSelectedVersion(e);
}}
Expand Down Expand Up @@ -303,7 +303,7 @@ function FunctionDetails({ selectedFunction, integrated }) {
fontSize="12px"
fontFamily="InterSemiBold"
onClick={() => setIsTestFunctionModalOpen(true)}
disabled={!isCloud() || !selectedFunction?.is_installed}
disabled={!isCloud() || !installed}
/>
<div className="code-content">
<Editor
Expand Down
83 changes: 36 additions & 47 deletions ui_src/src/domain/functions/components/functionList/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ import CloudOnly from '../../../../components/cloudOnly';
import FunctionBox from '../functionBox';
import IntegrateFunction from '../integrateFunction';
import FunctionsGuide from '../functionsGuide';
import CloneModal from '../cloneModal';
import CloneModal from '../../../../components/cloneModal';
import { OWNER } from '../../../../const/globalConst';
import { Collapse, Divider, Popover } from 'antd';
import { LOCAL_STORAGE_FUNCTION_PAGE_VIEW } from '../../../../const/localStorageConsts';
Expand Down Expand Up @@ -72,8 +72,10 @@ function FunctionList({ tabPrivate }) {
const [modalIsOpen, modalFlip] = useState(false);
const [cloneTooltipIsOpen, cloneTooltipIsOpenFlip] = useState(false);
const [integrated, setIntegrated] = useState(false);
const [functionList, setFunctionList] = useState([]);
const [filteredData, setFilteredData] = useState([]);
const [installedFunctionList, setInstalledFunctionList] = useState([]);
const [otherFunctionList, setOtherFunctionList] = useState([]);
const [filteredInstalledData, setFilteredInstalledData] = useState([]);
const [filteredOtherData, setFilteredOtherData] = useState([]);
const [searchInput, setSearchInput] = useState('');
const [tabValue, setTabValue] = useState(tabPrivate ? 'Private' : 'All');
const [isFunctionsGuideOpen, setIsFunctionsGuideOpen] = useState(false);
Expand Down Expand Up @@ -127,26 +129,20 @@ function FunctionList({ tabPrivate }) {

useEffect(() => {
getAllFunctions();
isCloud() && getIntegrationDetails();
if (localStorage.getItem(LOCAL_STORAGE_FUNCTION_PAGE_VIEW) !== 'true' && isCloud()) {
setIsFunctionsGuideOpen(true);
localStorage.setItem(LOCAL_STORAGE_FUNCTION_PAGE_VIEW, true);
}
}, []);

const getIntegrationDetails = async () => {
try {
const data = await httpRequest('GET', `${ApiEndpoints.GET_INTEGRATION_DETAILS}?name=github`);
setConnectedRepos(data?.integration?.keys?.connected_repos || []);
} catch (error) {}
};

const getAllFunctions = async () => {
setisLoading(true);
try {
const data = await httpRequest('GET', ApiEndpoints.GET_ALL_FUNCTIONS);
setIntegrated(data?.scm_integrated);
setFunctionList(data?.functions || []);
setInstalledFunctionList(data?.installed);
setOtherFunctionList(data?.other);
setConnectedRepos(data?.connected_repos);
setTimeout(() => {
setisLoading(false);
}, 500);
Expand All @@ -161,20 +157,28 @@ function FunctionList({ tabPrivate }) {
};

useEffect(() => {
let results = functionList;
let resultsInstalled = installedFunctionList;
let resultsOther = otherFunctionList;
if (tabValue === 'Private') {
results = results.filter((func) => func?.owner !== OWNER);
resultsInstalled = resultsInstalled.filter((func) => func?.owner !== OWNER);
resultsOther = resultsOther.filter((func) => func?.owner !== OWNER);
} else if (tabValue === 'Memphis') {
results = results.filter((func) => func?.owner === OWNER);
resultsInstalled = resultsInstalled.filter((func) => func?.owner === OWNER);
resultsOther = resultsOther.filter((func) => func?.owner === OWNER);
}
if (searchInput.length > 0) {
results = results.filter(
resultsInstalled = resultsInstalled.filter(
(func) =>
func?.function_name?.toLowerCase()?.includes(searchInput?.toLowerCase()) || func?.description?.toLowerCase()?.includes(searchInput.toLowerCase())
);
resultsOther = resultsOther.filter(
(func) =>
func?.function_name?.toLowerCase()?.includes(searchInput?.toLowerCase()) || func?.description?.toLowerCase()?.includes(searchInput.toLowerCase())
);
}
setFilteredData(results);
}, [tabValue, searchInput, functionList]);
setFilteredInstalledData(resultsInstalled);
setFilteredOtherData(resultsOther);
}, [tabValue, searchInput, installedFunctionList, otherFunctionList]);

const handleSearch = (e) => {
setSearchInput(e.target.value);
Expand All @@ -196,35 +200,31 @@ function FunctionList({ tabPrivate }) {
);

const renderFunctionBoxes = (filter) =>
!integrated ? (
!isCloud() ? (
<>
{filteredData?.map((func, index) => (
{filteredOtherData?.map((func, index) => (
<FunctionBox key={index} funcDetails={func} integrated={integrated} />
))}
</>
) : filter === 'installed' ? (
<>
{filteredData
.filter((func) => func?.is_installed)
?.map((func, index) => (
<FunctionBox key={index} funcDetails={func} integrated={integrated} />
))}
{filteredInstalledData?.map((func, index) => (
<FunctionBox key={index} funcDetails={func} integrated={integrated} installed />
))}
</>
) : (
<>
{filteredData
.filter((func) => !func?.is_installed)
?.map((func, index) => (
<FunctionBox key={index} funcDetails={func} integrated={integrated} />
))}
{filteredOtherData?.map((func, index) => (
<FunctionBox key={index} funcDetails={func} integrated={integrated} />
))}
</>
);

const drawCollapse = () => {
if (isCloud() && tabValue === 'Private' && !integrated) return <IntegrateFunction onClick={() => setIsFunctionsGuideOpen(true)} />;
const noFunctionsContent = filteredData?.length === 0 ? renderNoFunctionsFound() : null;
const installedFunctionBoxesContent = filteredData?.length !== 0 ? <div className="cards-wrapper">{renderFunctionBoxes('installed')}</div> : null;
const otherFunctionBoxesContent = filteredData?.length !== 0 ? <div className="cards-wrapper">{renderFunctionBoxes('other')}</div> : null;
const noFunctionsContent = filteredInstalledData?.length === 0 && filteredOtherData === 0 ? renderNoFunctionsFound() : null;
const installedFunctionBoxesContent = filteredInstalledData?.length !== 0 ? <div className="cards-wrapper">{renderFunctionBoxes('installed')}</div> : null;
const otherFunctionBoxesContent = filteredOtherData?.length !== 0 ? <div className="cards-wrapper">{renderFunctionBoxes('other')}</div> : null;

if (!installedFunctionBoxesContent && !otherFunctionBoxesContent) return null;
return (
Expand All @@ -239,25 +239,14 @@ function FunctionList({ tabPrivate }) {
<>
<Collapse defaultActiveKey={['1']} accordion={true} expandIcon={({ isActive }) => <ExpandIcon isActive={isActive} />} ghost>
<Panel
header={
<div className="panel-header">{`Installed ${
filteredData?.length > 0 && `(${filteredData.filter((func) => func?.is_installed)?.length})`
}`}</div>
}
header={<div className="panel-header">{`Installed ${filteredInstalledData?.length > 0 && `(${filteredInstalledData?.length})`}`}</div>}
key={1}
>
<div>{installedFunctionBoxesContent || noFunctionsContent}</div>
</Panel>
</Collapse>
<Collapse defaultActiveKey={['2']} accordion={true} expandIcon={({ isActive }) => <ExpandIcon isActive={isActive} />} ghost>
<Panel
header={
<div className="panel-header">{`Other ${
filteredData?.length > 0 && `(${filteredData.filter((func) => !func?.is_installed)?.length})`
}`}</div>
}
key={2}
>
<Panel header={<div className="panel-header">{`Other ${filteredOtherData?.length > 0 && `(${filteredOtherData?.length})`}`}</div>} key={2}>
<div>{otherFunctionBoxesContent || noFunctionsContent}</div>
</Panel>
</Collapse>
Expand All @@ -267,7 +256,7 @@ function FunctionList({ tabPrivate }) {
);
};
const renderContent = () => {
const noFunctionsContent = filteredData?.length === 0 ? renderNoFunctionsFound() : null;
const noFunctionsContent = filteredInstalledData?.length === 0 && filteredOtherData?.length ? renderNoFunctionsFound() : null;
return drawCollapse() || noFunctionsContent;
};

Expand Down
10 changes: 5 additions & 5 deletions ui_static_files/build/asset-manifest.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"files": {
"main.css": "/static/css/main.9998df55.css",
"main.js": "/static/js/main.074aa23f.js",
"main.css": "/static/css/main.0bc6844b.css",
"main.js": "/static/js/main.f8f1d067.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 @@ -148,7 +148,6 @@
"static/media/integrationIconColor.svg": "/static/media/integrationIconColor.a55aa8f85e8499c0c2bcdc72e2dea1a2.svg",
"static/media/DeadLetteredMessages.svg": "/static/media/DeadLetteredMessages.585f63bd9ae514421daf68c91edb41c1.svg",
"static/media/Calendar.svg": "/static/media/Calendar.af439a1c292c3e762d5df5de98f89502.svg",
"static/media/githubActiveConnectionIcon.svg": "/static/media/githubActiveConnectionIcon.4abfbab3c31279e5ab8a42b0a92909cb.svg",
"static/media/signup.svg": "/static/media/signup.c41faf7613261ce831d03037fb47806b.svg",
"static/media/editIcon.svg": "/static/media/editIcon.1bc57053f82f152a5ea3301ae06862cd.svg",
"static/media/githubBranchIcon.svg": "/static/media/githubBranchIcon.584358d0c1bebd525947ddc5abc29bf3.svg",
Expand Down Expand Up @@ -209,6 +208,7 @@
"static/media/UIHostname.svg": "/static/media/UIHostname.b2ab65aacef8f92173d8a888cfba0978.svg",
"static/media/errorModal.svg": "/static/media/errorModal.56ec5d38d44a26bcd6582fe4a2df085f.svg",
"static/media/typeIcon.svg": "/static/media/typeIcon.e663a2d8562816001bdd4feae921295d.svg",
"static/media/purpleQuestionMark.svg": "/static/media/purpleQuestionMark.618465703f77864c6b5364e691143575.svg",
"static/media/backIcon.svg": "/static/media/backIcon.be12eb6ec289ed5a4dc8d64dd8adec0f.svg",
"static/media/repoPurple.svg": "/static/media/repoPurple.28e50d61834d16d583ffea7e2bc2fd49.svg",
"static/media/disconAlertIcon.svg": "/static/media/disconAlertIcon.264ca4be9b5847e8305d5526a988f29c.svg",
Expand Down Expand Up @@ -308,7 +308,7 @@
"static/media/closeNotification.svg": "/static/media/closeNotification.7551e8366682f9c6585bb1a694c4112a.svg"
},
"entrypoints": [
"static/css/main.9998df55.css",
"static/js/main.074aa23f.js"
"static/css/main.0bc6844b.css",
"static/js/main.f8f1d067.js"
]
}
Loading

0 comments on commit 1045de2

Please sign in to comment.