Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Function details UI #1372

Merged
merged 23 commits into from
Oct 27, 2023
Merged

Function details UI #1372

Show file tree
Hide file tree
Changes from 22 commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
4494ead
display markdown
Oct 22, 2023
ff32e14
add components tree
Oct 22, 2023
2804405
code example
Oct 22, 2023
356e369
drawer
Oct 23, 2023
e6eb0b3
view changes
Oct 23, 2023
7c93e7d
add ux changes
Oct 24, 2023
e2a90cb
ux changes
Oct 24, 2023
05c1f47
add spinner
Oct 24, 2023
dfc3d90
changes between cloud and oss
Oct 25, 2023
26576d1
Connected Git Repository
Oct 25, 2023
9b106eb
installation message
Oct 25, 2023
5d78ea0
add placeholders
Oct 25, 2023
aed0432
.
Oct 26, 2023
62bc64d
connect to endpoint getAllFunctions
Oct 26, 2023
14eb198
move clone modal to main components
Oct 27, 2023
7afed02
remove broker changes
Oct 27, 2023
6bedcaa
remove log
Oct 27, 2023
6281de3
Merge branch 'master' into function_details_ui
SvetaMemphis Oct 27, 2023
20b2d32
Merge branch 'master' of https://github.com/memphisdev/memphis into f…
Oct 27, 2023
c4d73d9
Merge branch 'function_details_ui' of https://github.com/memphisdev/m…
Oct 27, 2023
b342ffe
copy broker changes from master
Oct 27, 2023
36eaac6
remove log
Oct 27, 2023
98ca472
build
Oct 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions .../functions/components/cloneModal/index.js → ui_src/src/components/cloneModal/index.js
View file
Open in desktop
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
Open in desktop
File renamed without changes.
16 changes: 8 additions & 8 deletions ui_src/src/domain/functions/components/functionBox/index.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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