copy from cloud (#1441)

superstreamlabs · Nov 26, 2023 · df51fb6 · df51fb6
1 parent a3bdb7b
commit df51fb6
Show file tree

Hide file tree

Showing 27 changed files with 260 additions and 88 deletions.
diff --git a/ui_src/src/components/Tabs/index.js b/ui_src/src/components/Tabs/index.js
@@ -23,7 +23,7 @@ import TooltipComponent from '../tooltip/tooltip';
 import CheckboxComponent from '../checkBox';
 import { PriorityHighRounded } from '@material-ui/icons';
 
-const CustomTabs = ({ tabs, onChange, value, disabled, length, tooltip, icon = false, checkbox = false, defaultActiveKey }) => {
+const CustomTabs = ({ tabs, onChange, value, disabled, length, tooltip, icon = false, checkbox = false, defaultActiveKey, tabsCounter }) => {
     return (
         <div className={!disabled ? 'tabs-container hover' : 'tabs-container'}>
             <Tabs
@@ -36,7 +36,9 @@ const CustomTabs = ({ tabs, onChange, value, disabled, length, tooltip, icon = f
                         label: (
                             <label className="tabs-name" style={{ width: length && length[index] && '135px' }}>
                                 {checkbox && <CheckboxComponent checked={tab.checked} />}
-                                <TooltipComponent text={tooltip && tooltip[index]}>{tab?.name || tab} </TooltipComponent>
+                                <TooltipComponent text={tooltip && tooltip[index]}>
+                                    {`${tab?.name || tab}  ${tabsCounter ? `(${tabsCounter[index]})` : ''}`}{' '}
+                                </TooltipComponent>
                                 {length && length[index] && icon && (
                                     <div className="error-icon">
                                         <div>

diff --git a/ui_src/src/const/globalConst.js b/ui_src/src/const/globalConst.js
@@ -82,9 +82,9 @@ export const githubUrls = {
         MEMPHIS_GIT_SSH: 'git@github.com:memphisdev/onboarding-app.git'
     },
     functions: {
-        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'
+        DOWNLOAD_URL: 'https://github.com/memphisdev/functions-templates/archive/refs/heads/master.zip',
+        MEMPHIS_GIT_HTTPS: 'https://github.com/memphisdev/functions-templates.git',
+        MEMPHIS_GIT_SSH: 'git@github.com:memphisdev/functions-templates.git'
     }
 };
 

diff --git a/ui_src/src/domain/administration/integrations/components/gitHubIntegration/index.js b/ui_src/src/domain/administration/integrations/components/gitHubIntegration/index.js
@@ -267,7 +267,7 @@ const GitHubIntegration = ({ close, value }) => {
                                         />
                                     </div>
                                 )}
-                                <div className="api-details">
+                                <div className="api-details api-details-github">
                                     {isIntegrated && (
                                         <div className="input-field">
                                             <p className="title">Repos</p>

diff --git a/ui_src/src/domain/administration/integrations/components/integrationItem/index.js b/ui_src/src/domain/administration/integrations/components/integrationItem/index.js
@@ -70,7 +70,6 @@ const IntegrationItem = ({ value, lockFeature, isOpen }) => {
                 return (
                     <GitHubIntegration
                         close={(data) => {
-                            modalFlip(false);
                             setIntegrateValue(data);
                             data !== ref.current &&
                                 history.push({
@@ -173,11 +172,20 @@ const IntegrationItem = ({ value, lockFeature, isOpen }) => {
             </integ-item>
             <Drawer
                 placement="right"
-                onClose={() => modalFlip(false)}
+                onClose={() => {
+                    if (value?.name === 'Github') {
+                        if (state.integrationsList?.findIndex((integration) => capitalizeFirst(integration.name) === 'Github') !== -1) {
+                            history.push({
+                                pathname: '/functions',
+                                integrated: true
+                            });
+                        }
+                    }
+                    modalFlip(false);
+                }}
                 destroyOnClose={true}
                 className="integration-modal"
                 width="720px"
-                clickOutside={() => modalFlip(false)}
                 open={modalIsOpen}
                 closeIcon={false}
                 headerStyle={{ display: 'none' }}

diff --git a/ui_src/src/domain/administration/integrations/style.scss b/ui_src/src/domain/administration/integrations/style.scss
@@ -152,6 +152,9 @@ dynamic-integration {
             justify-content: center;
             align-items: center;
         }
+        .api-details-github {
+            height: 100% !important;
+        }
 
         .api-details {
             height: calc(100% - 55px);

diff --git a/ui_src/src/domain/functions/components/functionBox/index.js b/ui_src/src/domain/functions/components/functionBox/index.js
@@ -87,7 +87,7 @@ function FunctionBox({ funcDetails, integrated, isTagsOn = true, onClick = null,
         try {
             await httpRequest('POST', ApiEndpoints.INSTALL_FUNCTION, bodyRequest);
             showMessages('success', `We are ${functionDetails?.updates_available ? 'updating' : 'installing'} the function for you. We will let you know once its done`);
-            startInstallation(funcIndex);
+            startInstallation(funcIndex, functionDetails?.updates_available);
         } catch (e) {
             return;
         }
@@ -203,7 +203,7 @@ function FunctionBox({ funcDetails, integrated, isTagsOn = true, onClick = null,
                                     fontSize="12px"
                                     fontFamily="InterSemiBold"
                                     onClick={() => setIsTestFunctionModalOpen(true)}
-                                    disabled={!functionDetails?.installed}
+                                    disabled={!functionDetails?.installed || functionDetails?.installed_in_progress}
                                 />
                             )}
                             {isValid && (!isCloud() || functionDetails?.installed) && (

diff --git a/ui_src/src/domain/functions/components/functionDetails/index.js b/ui_src/src/domain/functions/components/functionDetails/index.js
@@ -94,7 +94,9 @@ function FunctionDetails({ selectedFunction, handleInstall, handleUnInstall, cli
                     '&scm=' +
                     encodeURI(selectedFunction?.scm) +
                     '&function_name=' +
-                    encodeURI(selectedFunction?.function_name || selectedFunction?.name)
+                    encodeURI(selectedFunction?.function_name || selectedFunction?.name) +
+                    '&version=' +
+                    encodeURI(selectedVersion === 'latest' ? '' : selectedVersion)
             );
             setMetaData(response?.metadata_function);
             setReadme(response?.readme_content);
@@ -248,7 +250,9 @@ function FunctionDetails({ selectedFunction, handleInstall, handleUnInstall, cli
                             )}
                             <commits is="x3d">
                                 <FiGitCommit />
-                                <label>Last modified on {parsingDate(selectedFunction?.installed_updated_at, false, false)}</label>
+                                <OverflowTip text={parsingDate(selectedFunction?.installed_updated_at || metaData?.installed_updated_at, true, true)} width={'220px'}>
+                                    Last modified on {parsingDate(selectedFunction?.installed_updated_at || metaData?.installed_updated_at, true, true)}
+                                </OverflowTip>
                             </commits>
                         </deatils>
                     </div>
@@ -307,7 +311,14 @@ function FunctionDetails({ selectedFunction, handleInstall, handleUnInstall, cli
                                             radiusType={'circle'}
                                             fontSize="12px"
                                             fontFamily="InterSemiBold"
-                                            onClick={() => (selectedFunction?.installed ? handleUnInstall() : handleInstall())}
+                                            onClick={() => {
+                                                if (selectedFunction?.installed) {
+                                                    handleUnInstall();
+                                                } else {
+                                                    handleInstall();
+                                                }
+                                                onBackToFunction && onBackToFunction();
+                                            }}
                                             isLoading={metaData?.installed_in_progress}
                                             disabled={!selectedFunction?.is_valid || selectedFunction?.installed_in_progress}
                                         />
@@ -404,7 +415,7 @@ function FunctionDetails({ selectedFunction, handleInstall, handleUnInstall, cli
                             <Divider />
                             <label className="label-title">Social</label>
                             <deatils is="x3d">
-                                {selectedFunction.owner === OWNER && (
+                                {selectedFunction?.owner === OWNER && (
                                     <>
                                         <downloads is="x3d">
                                             <BiDownload className="download-icon" />
@@ -420,7 +431,9 @@ function FunctionDetails({ selectedFunction, handleInstall, handleUnInstall, cli
                                 )}
                                 <commits is="x3d">
                                     <FiGitCommit />
-                                    <label>Last modified on {parsingDate(selectedFunction?.installed_updated_at, false, false)}</label>
+                                    <OverflowTip text={parsingDate(selectedFunction?.installed_updated_at || metaData?.installed_updated_at, true, true)} width={'210px'}>
+                                        Last modified on {parsingDate(selectedFunction?.installed_updated_at || metaData?.installed_updated_at, true, true)}
+                                    </OverflowTip>
                                 </commits>
                             </deatils>
                             <Divider />

diff --git a/ui_src/src/domain/functions/components/functionList/index.js b/ui_src/src/domain/functions/components/functionList/index.js
@@ -49,6 +49,7 @@ import { Collapse, Divider, Popover, Badge } from 'antd';
 import { LOCAL_STORAGE_FUNCTION_PAGE_VIEW } from '../../../../const/localStorageConsts';
 import { getFunctionsTabs } from '../../../../services/valueConvertor';
 const { Panel } = Collapse;
+const TABS = getFunctionsTabs();
 
 function FunctionList({ tabPrivate }) {
     const [state, dispatch] = useContext(Context);
@@ -69,14 +70,19 @@ function FunctionList({ tabPrivate }) {
     const [refreshIndeicator, setRefreshIndicator] = useState(false);
     const [isCloudModalOpen, setIsCloudModalOpen] = useState(false);
     const [githubIntegrationData, setGithubIntegrationData] = useState({});
-
+    const [tabsCounter, setTabsCounter] = useState([0, 0, 0]);
     const ExpandIcon = ({ isActive }) => <img className={isActive ? 'collapse-arrow open' : 'collapse-arrow close'} src={CollapseArrow} alt="collapse-arrow" />;
-    const TABS = getFunctionsTabs();
 
     useEffect(() => {
         findAndUpdateGithubIntegration();
     }, [state?.integrationsList]);
 
+    useEffect(() => {
+        const memphisCount = installedFunctionList?.filter((func) => func.owner === OWNER)?.length + otherFunctionList?.filter((func) => func.owner === OWNER)?.length;
+        const privateCount = installedFunctionList?.filter((func) => func.owner !== OWNER)?.length + otherFunctionList?.filter((func) => func.owner !== OWNER)?.length;
+        setTabsCounter([memphisCount + privateCount, memphisCount, privateCount]);
+    }, [filteredInstalledData, filteredOtherData]);
+
     const findAndUpdateGithubIntegration = () => {
         const integrationData = state?.integrationsList?.find((integration) => integration?.name === 'github');
         setGithubIntegrationData(integrationData);
@@ -200,21 +206,27 @@ function FunctionList({ tabPrivate }) {
         });
     };
 
-    const startInstallation = (index) => {
+    const startInstallation = (index, isUpdate) => {
         setRefreshIndicator(true);
-        setFilteredInstalledData((prev) => {
-            const data = [...prev];
-            let func = filteredOtherData[index];
-            func.installed_in_progress = true;
-            func.installed = true;
-            data.push(func);
-            return data;
-        });
-        setFilteredOtherData((prev) => {
-            const data = [...prev];
-            data.splice(index, 1);
-            return data;
-        });
+        if (isUpdate) {
+            let installedFunctions = [...filteredInstalledData];
+            installedFunctions[index].installed_in_progress = true;
+            setFilteredInstalledData(installedFunctions);
+        } else {
+            setFilteredInstalledData((prev) => {
+                const data = [...prev];
+                let func = filteredOtherData[index];
+                func.installed_in_progress = true;
+                func.installed = true;
+                data.push(func);
+                return data;
+            });
+            setFilteredOtherData((prev) => {
+                const data = [...prev];
+                data.splice(index, 1);
+                return data;
+            });
+        }
     };
 
     const content = (
@@ -354,9 +366,13 @@ function FunctionList({ tabPrivate }) {
                             <div
                                 className="git-repo git-refresh-title"
                                 onClick={() => {
-                                    if (!isCloud()) return; //Open cloud only banner
-                                    modalFlip(true);
-                                    setClickedRefresh(false);
+                                    if (!isCloud()) {
+                                        setIsCloudModalOpen(true);
+                                        setClickedRefresh(false);
+                                    } else {
+                                        modalFlip(true);
+                                        setClickedRefresh(false);
+                                    }
                                 }}
                             >
                                 <AddRounded className="add" fontSize="small" />
@@ -409,8 +425,13 @@ function FunctionList({ tabPrivate }) {
                     </Popover>
                 </div>
             </div>
-            <CustomTabs tabs={TABS} defaultActiveKey={tabPrivate ? 'Private' : 'All'} tabValue={tabValue} onChange={(tabValue) => setTabValue(tabValue)} />
-
+            <CustomTabs
+                tabs={TABS}
+                defaultActiveKey={tabPrivate ? 'Private' : 'All'}
+                value={tabValue}
+                onChange={(tabValue) => setTabValue(tabValue)}
+                tabsCounter={tabsCounter}
+            />
             <SearchInput
                 placeholder="Search here"
                 colorType="navy"

diff --git a/ui_src/src/domain/functions/components/functionsGuide/index.js b/ui_src/src/domain/functions/components/functionsGuide/index.js
@@ -37,10 +37,11 @@ const FunctionsGuide = ({ handleClose, handleConfirm }) => {
         {
             name: (
                 <>
+                    <label>Clone or create a new GitHub repository </label>
                     <label className="link" onClick={() => handleCloneClick('functions')}>
-                        Clone
+                        {' '}
+                        (templates can be found here)
                     </label>
-                    <label> or create a new repository (At the moment, support is available for GitHub)</label>
                 </>
             )
         },
@@ -50,7 +51,7 @@ const FunctionsGuide = ({ handleClose, handleConfirm }) => {
                     <label>Code your function based on the following </label>
                     <label
                         className="link"
-                        onClick={() => window.open(`https://github.com/memphisdev/memphis-dev-functions/blob/master/README.md#rocket-step-by-step-guide`)}
+                        onClick={() => window.open(`https://docs.memphis.dev/memphis/memphis-functions/getting-started#how-to-develop-a-new-private-function`)}
                     >
                         guide
                     </label>

diff --git a/ui_src/src/domain/functions/components/testFunctionModal/components/testMockEvent/index.js b/ui_src/src/domain/functions/components/testFunctionModal/components/testMockEvent/index.js
@@ -18,6 +18,7 @@ import Button from '../../../../../../components/button';
 import Input from '../../../../../../components/Input';
 import Editor from '@monaco-editor/react';
 import TestResult from '../testResult';
+import { generateJSONWithMaxLength } from '../../../../../../services/valueConvertor';
 import { httpRequest } from '../../../../../../services/http';
 import { ApiEndpoints } from '../../../../../../const/apiEndpoints';
 
@@ -64,17 +65,7 @@ const TestMockEvent = ({ functionDetails, open }) => {
             );
             setTestMock(response?.content);
         } catch (e) {
-            setTestMock(`{
-                "type": "record",
-                "namespace": "com.example",
-                "name": "test-schema",
-                "fields": [
-                   { "name": "Master message", "type": "string", "default": "NONE" },
-                   { "name": "age", "type": "int", "default": "-1" },
-                   { "name": "phone", "type": "string", "default": "NONE" },
-                   { "name": "country", "type": "string", "default": "NONE" }
-                    ]
-                }`);
+            setTestMock(generateJSONWithMaxLength(100));
             setMissingMockIndicator(true);
         }
     };
@@ -120,7 +111,7 @@ const TestMockEvent = ({ functionDetails, open }) => {
             </div>
             <div className="header">
                 <div className="title-container">
-                    <p className="title">Generate test event</p>
+                    <p className="title">Test the function</p>
                 </div>
                 <Button
                     width="120px"
@@ -142,7 +133,7 @@ const TestMockEvent = ({ functionDetails, open }) => {
                 <div className="text-area-wrapper">
                     <span className="title-span">
                         <label className="title">Event data</label>{' '}
-                        {missingMockIndicator && <span className="missing-mock">{`(The file 'test.json' is not found. Creating artificial data instead.)`}</span>}
+                        {missingMockIndicator && <span className="missing-mock">{`(The file 'test.json' is cannot be found. Creating artificial data instead)`}</span>}
                     </span>
 
                     <div className="text-area">
@@ -171,7 +162,8 @@ const TestMockEvent = ({ functionDetails, open }) => {
                     </div>
                     {inputs && inputs?.length > 0 && (
                         <>
-                            <label className="title">Inputs</label>
+                            <label className="title-inputs">Inputs</label>
+                            <label className="description-inputs">Not sure how to fill in the inputs? Head over the function`s README for more information</label>
                             <div className="inputs-section">
                                 {inputs?.map((input, index) => (
                                     <span className="input-row" key={`${input?.name}${index}`}>

diff --git a/ui_src/src/domain/functions/components/testFunctionModal/components/testMockEvent/style.scss b/ui_src/src/domain/functions/components/testFunctionModal/components/testMockEvent/style.scss
@@ -54,11 +54,11 @@
             height: calc(100% - 20px);
             display: flex;
             flex-direction: column;
-            gap: 10px;
+
             .title-span {
                 display: flex;
-                align-items: flex-end;
-                gap: 5px;
+                align-items: center;
+                gap: 10px;
                 .title {
                     font-size: 14px;
                     font-family: 'InterSemiBold';
@@ -99,4 +99,15 @@
             }
         }
     }
+    .title-inputs {
+        font-size: 14px;
+        font-family: 'InterSemiBold';
+        margin-top: 10px;
+    }
+    .description-inputs {
+        margin-bottom: 10px;
+        font-size: 12px;
+        font-family: 'Inter';
+        color: #475467;
+    }
 }