Skip to content

Commit

Permalink
Merge pull request #1440 from memphisdev/RND-204-general-enhanecements
Browse files Browse the repository at this point in the history 
Rnd 204 general enhanecements
  • Loading branch information
@SvetaMemphis
SvetaMemphis committed Nov 24, 2023
2 parents 8e0dc0d + c02f09a commit ac72be8
Show file tree
Hide file tree
Showing 24 changed files with 285 additions and 109 deletions.
1 change: 1 addition & 0 deletions ui_src/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@
"reaflow": "5.0.6",
"recharts": "^2.1.16",
"rehype-raw": "^7.0.0",
"rehype-slug": "^6.0.0",
"remark-gfm": "^3.0.1",
"sass": "^1.49.0",
"util": "^0.12.5",
Expand Down
4 changes: 3 additions & 1 deletion ui_src/src/components/sideBar/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,11 +195,12 @@ function SideBar() {
addUserModalFlip(false);
};

const MenuItem = ({ icon, activeIcon, name, route, onClick, onMouseEnter, onMouseLeave }) => {
const MenuItem = ({ icon, activeIcon, name, route, onClick, onMouseEnter, onMouseLeave, badge }) => {
return (
<div className="item-wrapper" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onClick={onClick}>
<div className="icon">{state.route === route ? activeIcon : hoveredItem === route ? activeIcon : icon}</div>
<p className={state.route === route ? 'checked' : 'name'}>{name}</p>
{badge && <label className="badge">{badge}</label>}
</div>
);
};
Expand Down Expand Up @@ -459,6 +460,7 @@ function SideBar() {
onMouseEnter={() => setHoveredItem('functions')}
onMouseLeave={() => setHoveredItem('')}
route="functions"
badge={'Alpha'}
/>
<MenuItem
icon={<IntegrationIcon alt="IntegrationIcon" width={20} height={20} />}
Expand Down
10 changes: 10 additions & 0 deletions ui_src/src/components/sideBar/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,16 @@
.align-items-center {
display: flex;
}
.badge {
color: #f5f5f5;
border-radius: 32px;
padding: 1px 10px;
margin-top: 2px;
font-size: 8px;
font-family: 'InterSemiBold';
background: var(--purple);
cursor: pointer;
}
}

.menu-content {
Expand Down
1 change: 1 addition & 0 deletions ui_src/src/components/tag/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
line-height: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.close {
display: flex;
Expand Down
8 changes: 4 additions & 4 deletions ui_src/src/const/globalConst.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export const planType = {
ENTERPRISE: 'plan-cloud-enterprise',
BUSINESS: 'plan-cloud-business',
GROWTH: 'plan-cloud-growth-buckets',
FREE: 'plan-cloud-free',
FREE: 'plan-cloud-free'
};

export const githubUrls = {
Expand All @@ -82,9 +82,9 @@ export const githubUrls = {
MEMPHIS_GIT_SSH: 'git@github.com:memphisdev/onboarding-app.git'
},
functions: {
DOWNLOAD_URL: 'https://github.com/memphisdev/memphis-dev-functions/archive/refs/heads/master.zip',
MEMPHIS_GIT_HTTPS: 'https://github.com/memphisdev/memphis-dev-functions.git',
MEMPHIS_GIT_SSH: 'git@github.com:memphisdev/memphis-dev-functions.git'
DOWNLOAD_URL: 'https://github.com/memphisdev/function-templates/archive/refs/heads/master.zip',
MEMPHIS_GIT_HTTPS: 'https://github.com/memphisdev/function-templates.git',
MEMPHIS_GIT_SSH: 'git@github.com:memphisdev/function-templates.git'
}
};

Expand Down
18 changes: 18 additions & 0 deletions ui_src/src/domain/functions/components/functionBox/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ import { ApiEndpoints } from '../../../../const/apiEndpoints';
import { httpRequest } from '../../../../services/http';
import AttachFunctionModal from '../attachFunctionModal';
import CloudModal from '../../../../components/cloudModal';
import TestMockEvent from '../../components/testFunctionModal/components/testMockEvent';
import { Context } from '../../../../hooks/store';

function FunctionBox({ funcDetails, integrated, isTagsOn = true, onClick = null, onApply, doneUninstall, startInstallation, funcIndex, referredFunction }) {
Expand All @@ -49,6 +50,7 @@ function FunctionBox({ funcDetails, integrated, isTagsOn = true, onClick = null,
const [cloudModal, setCloudModal] = useState(false);
const [loader, setLoader] = useState(false);
const [openUpgradeModal, setOpenUpgradeModal] = useState(false);
const [isTestFunctionModalOpen, setIsTestFunctionModalOpen] = useState(false);

useEffect(() => {
const url = window.location.href;
Expand Down Expand Up @@ -191,6 +193,19 @@ function FunctionBox({ funcDetails, integrated, isTagsOn = true, onClick = null,
</OverflowTip>
</div>
)}
{isCloud() && functionDetails?.installed && (
<Button
placeholder="Test"
width={'100px'}
backgroundColorType={'orange'}
colorType={'black'}
radiusType={'circle'}
fontSize="12px"
fontFamily="InterSemiBold"
onClick={() => setIsTestFunctionModalOpen(true)}
disabled={!functionDetails?.installed}
/>
)}
{isValid && (!isCloud() || functionDetails?.installed) && (
<Button
width="100px"
Expand Down Expand Up @@ -308,6 +323,9 @@ function FunctionBox({ funcDetails, integrated, isTagsOn = true, onClick = null,
)}
</Drawer>
<CloudModal type="upgrade" open={openUpgradeModal} handleClose={() => setOpenUpgradeModal(false)} />
<Modal width={'75vw'} height={'80vh'} clickOutside={() => setIsTestFunctionModalOpen(false)} open={isTestFunctionModalOpen} displayButtons={false}>
<TestMockEvent functionDetails={funcDetails} open={isTestFunctionModalOpen} />
</Modal>
</>
);
}
Expand Down
5 changes: 5 additions & 0 deletions ui_src/src/domain/functions/components/functionBox/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -371,4 +371,9 @@
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
label,
span {
cursor: pointer;
}
}
23 changes: 16 additions & 7 deletions ui_src/src/domain/functions/components/functionDetails/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import React, { useEffect, useState, useContext } from 'react';
import ReactMarkdown from 'react-markdown';
import rehypeRaw from 'rehype-raw';
import remarkGfm from 'remark-gfm';
import rehypeSlug from 'rehype-slug';
import emoji from 'emoji-dictionary';
import Editor from '@monaco-editor/react';
import { FiGitCommit } from 'react-icons/fi';
Expand Down Expand Up @@ -58,7 +59,7 @@ function FunctionDetails({ selectedFunction, handleInstall, handleUnInstall, cli
const [treeData, setTreeData] = useState([]);
const [selectedVersion, setSelectedVersion] = useState('latest');
const [metaData, setMetaData] = useState({});
const [readme, setReadme] = useState(null);
const [readme, setReadme] = useState();
const [versions, setVersions] = useState([]);
const [files, setFiles] = useState([]);
const [fileContent, setFileContent] = useState(null);
Expand Down Expand Up @@ -195,6 +196,17 @@ function FunctionDetails({ selectedFunction, handleInstall, handleUnInstall, cli
getFileContent(path);
};

const modifiedContent = (content) => {
return content
?.replace(/```json([\s\S]*?)```/g, (match, p1) => {
return `<div className="code-block">${p1.trim()}</div>`;
})
?.replace(/`([\s\S]*?)`/g, (match, p1) => {
return `<div className="code-var">${p1.trim()}</div>`;
})
?.replace(/`/g, '\\`');
};

return (
<div className="function-drawer-container">
{onBackToFunction && (
Expand Down Expand Up @@ -361,8 +373,8 @@ function FunctionDetails({ selectedFunction, handleInstall, handleUnInstall, cli
{!loading && readme === '' && renderNoFunctionDetails}
{!loading && readme && readme !== '' && (
<div>
<ReactMarkdown rehypePlugins={[rehypeRaw, remarkGfm]}>
{formattedMarkdownContent(emojiSupport(readme))?.replace(/`/g, '\\`')}
<ReactMarkdown rehypePlugins={[rehypeRaw, remarkGfm, rehypeSlug]} className="custom-markdown">
{modifiedContent(formattedMarkdownContent(emojiSupport(readme)))}
</ReactMarkdown>
</div>
)}
Expand Down Expand Up @@ -441,8 +453,7 @@ function FunctionDetails({ selectedFunction, handleInstall, handleUnInstall, cli
</code>
)}
{tabValue === 'Code' && (
<div className="source-code">
{/* <Spinner /> */}
<div className={`source-code ${onBackToFunction ? 'source-code-stations' : 'source-code-functions'}`}>
<div>
<label className="source-code-title">Code tree</label>
<div className="repos-section">
Expand All @@ -456,12 +467,10 @@ function FunctionDetails({ selectedFunction, handleInstall, handleUnInstall, cli
<CollapseArrowIcon className={expanded ? 'collapse-arrow open arrow' : 'collapse-arrow arrow'} alt="collapse-arrow" />
)}
defaultExpandAll={true}
// selectedKeys={[selectedFileTreeKey]}
/>
</div>
</div>
<div className="code-content-section">
{/* {renderNoFunctionDetails} */}
<>
<Button
placeholder="Test"
Expand Down
45 changes: 44 additions & 1 deletion ui_src/src/domain/functions/components/functionDetails/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,39 @@
height: 100%;
overflow-y: auto;
flex-direction: column;
.code-block {
border-radius: 4px;
padding: 10px;
background: #f9f9fa;
white-space: pre;
overflow-y: auto;
}
.code-var {
border-radius: 4px;
padding: 2px 4px;
background: #f9f9fa;
white-space: pre;
display: inline-block;
}
.custom-markdown table {
border-collapse: collapse;
width: 100%;
margin-bottom: 10px;
}
.custom-markdown p {
display: inline;
}

.custom-markdown th,
.custom-markdown td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}

.custom-markdown th {
background-color: #f9f9fa;
}
.attach-btn {
display: flex;
align-items: center;
Expand Down Expand Up @@ -61,6 +94,10 @@
min-width: 750px;
.header-flex {
display: flex;
span,
label {
cursor: pointer;
}
}
.right-side {
display: flex;
Expand Down Expand Up @@ -231,9 +268,15 @@
.ant-divider-horizontal {
margin: 10px 0px;
}
.source-code-functions {
height: calc(100% - 230px);
}
.source-code-stations {
height: calc(100% - 300px);
}
.source-code {
display: flex;
height: calc(100% - 230px);

position: relative;
.source-code-title {
font-family: 'InterSemiBold';
Expand Down
9 changes: 3 additions & 6 deletions ui_src/src/domain/functions/components/functionList/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -294,7 +294,8 @@ function FunctionList({ tabPrivate }) {
);

const drawCollapse = () => {
if (isCloud() && tabValue === 'Private' && !integrated) return <IntegrateFunction onClick={() => setIsFunctionsGuideOpen(true)} />;
if (isCloud() && tabValue === 'Private' && !integrated && installedFunctionList?.every((func) => func?.owner === OWNER))
return <IntegrateFunction onClick={() => setIsFunctionsGuideOpen(true)} />;
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;
Expand All @@ -303,11 +304,7 @@ function FunctionList({ tabPrivate }) {
return (
<div className="function-list-collapse">
{!isCloud() && <div>{otherFunctionBoxesContent || noFunctionsContent}</div>}
{isCloud() && !integrated && tabValue === 'Private' && (
<div className="cards-wrapper">
<IntegrateFunction onClick={() => setIsFunctionsGuideOpen(true)} />
</div>
)}

{isCloud() && (
<>
<Collapse defaultActiveKey={['1']} accordion={true} expandIcon={({ isActive }) => <ExpandIcon isActive={isActive} />} ghost>
Expand Down
Loading

0 comments on commit ac72be8

Please sign in to comment.