Rnd 204 general enhanecements

ui_src/package.json

@@ -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",

ui_src/src/components/sideBar/index.js

@@ -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>
         );
     };
@@ -459,6 +460,7 @@ function SideBar() {
                     onMouseEnter={() => setHoveredItem('functions')}
                     onMouseLeave={() => setHoveredItem('')}
                     route="functions"
+                    badge={'Alpha'}
                 />
                 <MenuItem
                     icon={<IntegrationIcon alt="IntegrationIcon" width={20} height={20} />}

ui_src/src/components/sideBar/style.scss

@@ -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 {

ui_src/src/components/tag/style.scss

@@ -13,6 +13,7 @@
         line-height: 14px;
         overflow: hidden;
         text-overflow: ellipsis;
+        white-space: nowrap;
     }
     .close {
         display: flex;

ui_src/src/const/globalConst.js

@@ -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 = {
@@ -82,9 +82,9 @@ export const githubUrls = {
         MEMPHIS_GIT_SSH: '[email protected]: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: '[email protected]: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: '[email protected]:memphisdev/function-templates.git'
     }
 };
 

ui_src/src/domain/functions/components/functionBox/index.js

@@ -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 }) {
@@ -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;
@@ -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"
@@ -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>
         </>
     );
 }

ui_src/src/domain/functions/components/functionBox/style.scss

@@ -371,4 +371,9 @@
     display: flex;
     align-items: center;
     gap: 4px;
+    cursor: pointer;
+    label,
+    span {
+        cursor: pointer;
+    }
 }

ui_src/src/domain/functions/components/functionDetails/index.js

@@ -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';
@@ -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);
@@ -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 && (
@@ -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>
                         )}
@@ -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">
@@ -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"

ui_src/src/domain/functions/components/functionDetails/style.scss

@@ -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;
@@ -61,6 +94,10 @@
         min-width: 750px;
         .header-flex {
             display: flex;
+            span,
+            label {
+                cursor: pointer;
+            }
         }
         .right-side {
             display: flex;
@@ -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';

ui_src/src/domain/functions/components/functionList/index.js

@@ -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;
@@ -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>