RND-204-general-enhanecements

ui_src/src/components/createStationForm/index.js

@@ -28,6 +28,7 @@ import {
 import S3Integration from '../../domain/administration/integrations/components/s3Integration';
 import { ApiEndpoints } from '../../const/apiEndpoints';
 import { httpRequest } from '../../services/http';
+import { useGetAllowedActions } from '../../services/genericServices';
 import InputNumberComponent from '../InputNumber';
 import OverflowTip from '../tooltip/overflowtip';
 import TitleComponent from '../titleComponent';
@@ -121,6 +122,8 @@ const CreateStationForm = ({ createStationFormRef, getStartedStateRef, finishUpd
         { name: 'Local storage tier', checked: true },
         { name: 'Remote storage tier', checked: selectedTier2Option || false }
     ];
+    const getAllowedActions = useGetAllowedActions();
+
     useEffect(() => {
         if (!isCloud()) {
             getAvailableReplicas();
@@ -248,6 +251,7 @@ const CreateStationForm = ({ createStationFormRef, getStartedStateRef, finishUpd
         } catch (error) {
         } finally {
             setLoading(false);
+            isCloud() && getAllowedActions();
         }
     };
 

ui_src/src/components/sideBar/index.js

@@ -55,11 +55,12 @@ import { ReactComponent as LogsActiveIcon } from '../../assets/images/logsActive
 import { ReactComponent as SchemaIcon } from '../../assets/images/schemaIcon.svg';
 import { LATEST_RELEASE_URL } from '../../config';
 import { ReactComponent as LogsIcon } from '../../assets/images/logsIcon.svg';
+import { FaArrowCircleUp } from 'react-icons/fa';
 import { ApiEndpoints } from '../../const/apiEndpoints';
 import { httpRequest } from '../../services/http';
 import Logo from '../../assets/images/logo.svg';
 import AuthService from '../../services/auth';
-import { sendTrace } from '../../services/genericServices';
+import { sendTrace, useGetAllowedActions } from '../../services/genericServices';
 import { Context } from '../../hooks/store';
 import pathDomains from '../../router';
 import Spinner from '../spinner';
@@ -70,7 +71,6 @@ import Modal from '../modal';
 import CreateStationForm from '../createStationForm';
 import { ReactComponent as StationIcon } from '../../assets/images/stationIcon.svg';
 import CreateUserDetails from '../../domain/users/createUserDetails';
-
 import UpgradePlans from '../upgradePlans';
 import { FaBook, FaDiscord } from 'react-icons/fa';
 import { BiEnvelope } from 'react-icons/bi';
@@ -82,6 +82,15 @@ const overlayStyles = {
     paddingBottom: '5px',
     marginBottom: '10px'
 };
+
+const quickActionsStyles = {
+    borderRadius: '8px',
+    width: '250px',
+    paddingTop: '5px',
+    paddingBottom: '5px',
+    marginBottom: '10px'
+};
+
 const supportContextMenuStyles = {
     borderRadius: '8px',
     paddingTop: '5px',
@@ -116,6 +125,7 @@ function SideBar() {
     const [addUserModalIsOpen, addUserModalFlip] = useState(false);
     const [createUserLoader, setCreateUserLoader] = useState(false);
     const [bannerType, setBannerType] = useState('');
+    const getAllowedActions = useGetAllowedActions();
 
     const getCompanyLogo = useCallback(async () => {
         try {
@@ -145,6 +155,7 @@ function SideBar() {
         {
             !isCloud() && getSystemVersion().catch(console.error);
         }
+        isCloud() && getAllowedActions();
         setAvatarImage(localStorage.getItem(LOCAL_STORAGE_AVATAR_ID) || state?.userData?.avatar_id);
         localStorage.getItem(LOCAL_STORAGE_SKIP_GET_STARTED) !== 'true' && setOpenGetStartedModal(true);
     }, []);
@@ -193,13 +204,27 @@ function SideBar() {
         );
     };
 
-    const PopoverActionItem = ({ icon, name, onClick }) => {
+    const PopoverActionItem = ({ icon, name, onClick, upgrade }) => {
+        upgrade && setBannerType('upgrade');
         return (
-            <div className="item-wrap" onClick={onClick}>
-                <div className="item">
+            <div className="item-wrap">
+                <div
+                    className="item"
+                    onClick={() => {
+                        if (upgrade) {
+                            setCloudModalOpen(true);
+                            setPopoverQuickActions(false);
+                        } else onClick();
+                    }}
+                >
                     <span className="icons">{icon}</span>
                     <p className="item-title">{name}</p>
                 </div>
+                {isCloud() && upgrade && (
+                    <div>
+                        <FaArrowCircleUp className="lock-feature-icon" />
+                    </div>
+                )}
             </div>
         );
     };
@@ -214,6 +239,7 @@ function SideBar() {
                     setPopoverQuickActions(false);
                     createStationModalFlip(true);
                 }}
+                upgrade={!state?.allowedActions?.can_create_stations}
             />
             <PopoverActionItem
                 icon={<NewSchemaIcon className="icons-sidebar" />}
@@ -235,6 +261,7 @@ function SideBar() {
                     setPopoverQuickActions(false);
                     addUserModalFlip(true);
                 }}
+                upgrade={!state?.allowedActions?.can_create_users}
             />
             <PopoverActionItem
                 icon={<NewIntegrationIcon className="icons-sidebar" />}
@@ -384,7 +411,7 @@ function SideBar() {
                 </span>
 
                 <Popover
-                    overlayInnerStyle={overlayStyles}
+                    overlayInnerStyle={quickActionsStyles}
                     placement="rightBottom"
                     content={contentQuickStart}
                     trigger="click"

ui_src/src/components/sideBar/style.scss

@@ -26,6 +26,7 @@
         display: flex;
         flex-direction: column;
         align-items: center;
+
         p {
             font-size: 80%;
             color: rgba(74, 73, 92, 0.8);
@@ -208,11 +209,12 @@
 }
 .item-wrap {
     padding: 5px;
-    margin: 0 5px 0 5px;
+    margin: 0 5px;
     height: 34px;
     display: flex;
     align-items: center;
-    width: 220px;
+    justify-content: space-between;
+    width: 240px;
     .MuiSvgIcon-root {
         height: 20px;
         display: none;

ui_src/src/components/stationsInstructions/index.js

@@ -1,8 +1,10 @@
 import Button from '../../components/button';
 import React from 'react';
+import { isCloud } from '../../services/valueConvertor';
+import LockFeature from '../lockFeature';
 import './style.scss';
 
-const StationsInstructions = ({ header, button, image, newStation, des }) => {
+const StationsInstructions = ({ upgrade, header, button, image, newStation, des }) => {
     const description = des || 'A station is a distributed storage for messages';
 
     return (
@@ -15,7 +17,16 @@ const StationsInstructions = ({ header, button, image, newStation, des }) => {
                     className="modal-btn"
                     width="180px"
                     height="37px"
-                    placeholder={button}
+                    // placeholder={button}
+                    placeholder={
+                        isCloud() && upgrade ? (
+                            <span className="upgrade">
+                                {button} <LockFeature />
+                            </span>
+                        ) : (
+                            button
+                        )
+                    }
                     colorType={image ? 'white' : 'purple'}
                     radiusType="circle"
                     border={image ? 'none' : 'gray-light'}

ui_src/src/components/upgradePlans/index.js

@@ -20,7 +20,7 @@ import { BsCheckLg } from 'react-icons/bs';
 import { Link } from 'react-router-dom';
 
 import { ReactComponent as RedirectIcon } from '../../assets/images/redirectIcon.svg';
-import { showMessages } from '../../services/genericServices';
+import { showMessages, useGetAllowedActions } from '../../services/genericServices';
 import { ApiEndpoints } from '../../const/apiEndpoints';
 import { httpRequest } from '../../services/http';
 import pathDomains from '../../router';
@@ -45,7 +45,7 @@ const UpgradePlans = ({ open, onClose, content, isExternal = true }) => {
     const [downgradeReaon, setReasonDowngrade] = useState('');
     const [planSelected, setPlanSelected] = useState({});
     const [textInput, setTextInput] = useState('');
-
+    const getAllowedActions = useGetAllowedActions();
     const success_url = window.location.href;
     const cancel_url = window.location.href;
 
@@ -104,6 +104,7 @@ const UpgradePlans = ({ open, onClose, content, isExternal = true }) => {
                 setReasonDowngrade('');
                 setIsCheck([]);
             }
+            getAllowedActions();
         }
     };
 

ui_src/src/components/videoPlayer/index.js

@@ -17,8 +17,9 @@ import ReactPlayer from 'react-player';
 
 import { ReactComponent as PlayVideoIcon } from '../../assets/images/playVideoIcon.svg';
 import { ReactComponent as Img404Icon } from '../../assets/images/404.svg';
+import { sendTrace } from '../../services/genericServices';
 
-const VideoPlayer = ({ url, bgImg, width, height }) => {
+const VideoPlayer = ({ url, bgImg, width, height, tracePlay }) => {
     const [playState, setPlayState] = useState(false);
     const [isOffline, setIsOffline] = useState(false);
 
@@ -40,6 +41,7 @@ const VideoPlayer = ({ url, bgImg, width, height }) => {
             url={url}
             onError={() => setIsOffline(true)}
             style={{ backgroundImage: `url(${bgImg})`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover' }}
+            onStart={() => tracePlay && sendTrace('user-played-functions-video', {})}
         ></ReactPlayer>
     );
 };

ui_src/src/const/apiEndpoints.js

@@ -132,5 +132,6 @@ export const ApiEndpoints = {
     RESEND_INVITATION: '/usermgmt/resendInvitation',
     REVOKED_INVITATION: '/usermgmt/revokeInvitation',
     SIGN_OUT: '/usermgmt/signOut',
-    SEND_SUPPORT: '/usermgmt/sendSupportRequest'
+    SEND_SUPPORT: '/usermgmt/sendSupportRequest',
+    GET_ALLOWED_FUNCTIONS: '/usermgmt/getAllowedActions'
 };

ui_src/src/const/integrationList.js

@@ -46,7 +46,7 @@ import { ColorPalette } from './globalConst';
 import { Divider } from 'antd';
 
 export const getTabList = (intgrationName) => {
-    return INTEGRATION_LIST[intgrationName]?.hasLogs ? ['Configuration', 'Logs'] : ['Configuration'];
+    return INTEGRATION_LIST[intgrationName]?.hasLogs ? ['Configuration', 'Logs details'] : ['Configuration'];
 };
 
 export const CATEGORY_LIST = {

ui_src/src/domain/administration/integrations/components/gitHubIntegration/index.js

@@ -118,7 +118,7 @@ const GitHubIntegration = ({ close, value }) => {
 
     const removeRepoItem = (index) => {
         let updatedValue = { ...formFields.keys };
-        updatedValue?.connected_repos?.splice(index, 1);
+        updatedValue?.connected_repos.splice(index, 1);
         setFormFields((formFields) => ({ ...formFields, keys: updatedValue }));
         updateIntegration(updatedValue);
     };
@@ -242,7 +242,7 @@ const GitHubIntegration = ({ close, value }) => {
                     <CustomTabs value={tabValue} onChange={(tabValue) => setTabValue(tabValue)} tabs={tabs} />
                     <Form name="form" form={creationForm} autoComplete="off" className="integration-form">
                         {tabValue === 'Details' && <IntegrationDetails integrateDesc={githubConfiguration.integrateDesc} />}
-                        {tabValue === 'Logs' && <IntegrationLogs integrationName={'github'} />}
+                        {tabValue === 'Logs details' && <IntegrationLogs integrationName={'github'} />}
                         {tabValue === 'Configuration' && (
                             <div className="integration-body">
                                 <IntegrationDetails integrateDesc={githubConfiguration.integrateDesc} />
@@ -307,7 +307,7 @@ const GitHubIntegration = ({ close, value }) => {
                                                     })}
                                                     {inProgressFlag && (
                                                         <div className="add-more-repos" onClick={getIntegration}>
-                                                            <label>We are updating integration. Please refersh in few minutes.</label>
+                                                            <label>We're scanning. It might take a few minutes to complete</label>
                                                         </div>
                                                     )}
                                                     {!addNew && !inProgressFlag && (

ui_src/src/domain/administration/integrations/components/integrationItem/index.js

@@ -181,6 +181,7 @@ const IntegrationItem = ({ value, lockFeature, isOpen }) => {
                 open={modalIsOpen}
                 closeIcon={false}
                 headerStyle={{ display: 'none' }}
+                bodyStyle={{ padding: '0px' }}
             >
                 {modalContent()}
             </Drawer>

ui_src/src/domain/administration/integrations/components/integrationItem/integrationLogs.js

@@ -41,7 +41,7 @@ const IntegrationLogs = ({ integrationName }) => {
         <div className="integration-body">
             <div className="integrate-description logs-header">
                 <p>Logs Details</p>
-                <Copy data={JSON.stringify(logsList)} text="Copy Logs" />
+                <Copy data={JSON.stringify(logsList)} />
             </div>
             <div className="generic-list-wrapper">
                 <div className="list">

ui_src/src/domain/administration/integrations/components/s3Integration/index.js

@@ -187,7 +187,7 @@ const S3Integration = ({ close, value, lockFeature }) => {
                     <CustomTabs value={tabValue} onChange={(tabValue) => setTabValue(tabValue)} tabs={tabs} />
                     <Form name="form" form={creationForm} autoComplete="off" className="integration-form">
                         {tabValue === 'Details' && <IntegrationDetails integrateDesc={s3Configuration.integrateDesc} />}
-                        {tabValue === 'Logs' && <IntegrationLogs integrationName={'s3'} />}
+                        {tabValue === 'Logs details' && <IntegrationLogs integrationName={'s3'} />}
                         {tabValue === 'Configuration' && (
                             <div className="integration-body">
                                 <IntegrationDetails integrateDesc={s3Configuration.integrateDesc} />

ui_src/src/domain/administration/integrations/components/slackIntegration/index.js

@@ -13,7 +13,7 @@
 import './style.scss';
 
 import React, { useState, useContext, useEffect } from 'react';
-import { Form, message } from 'antd';
+import { Form } from 'antd';
 
 import { ReactComponent as PoisionAlertIcon } from '../../../../../assets/images/poisionAlertIcon.svg';
 import { ReactComponent as DisconAlertIcon } from '../../../../../assets/images/disconAlertIcon.svg';
@@ -29,9 +29,12 @@ import Input from '../../../../../components/Input';
 import CustomTabs from '../../../../../components/Tabs';
 import { URL } from '../../../../../config';
 import Loader from '../../../../../components/loader';
+import CloudMoadl from '../../../../../components/cloudModal';
 import { showMessages } from '../../../../../services/genericServices';
+import { isCloud } from '../../../../../services/valueConvertor';
 import IntegrationDetails from '../integrationItem/integrationDetails';
 import IntegrationLogs from '../integrationItem/integrationLogs';
+import { FaArrowCircleUp } from 'react-icons/fa';
 
 const urlSplit = URL.split('/', 3);
 
@@ -57,6 +60,7 @@ const SlackIntegration = ({ close, value }) => {
     const [loadingDisconnect, setLoadingDisconnect] = useState(false);
     const [imagesLoaded, setImagesLoaded] = useState(false);
     const [tabValue, setTabValue] = useState('Configuration');
+    const [cloudModalOpen, setCloudModalOpen] = useState(false);
     const tabs = getTabList('Slack');
 
     useEffect(() => {
@@ -195,7 +199,7 @@ const SlackIntegration = ({ close, value }) => {
 
                     <Form name="form" form={creationForm} autoComplete="off" className="integration-form">
                         {tabValue === 'Details' && <IntegrationDetails integrateDesc={slackConfiguration.integrateDesc} />}
-                        {tabValue === 'Logs' && <IntegrationLogs integrationName={'slack'} />}
+                        {tabValue === 'Logs details' && <IntegrationLogs integrationName={'slack'} />}
                         {tabValue === 'Configuration' && (
                             <div className="integration-body">
                                 <IntegrationDetails integrateDesc={slackConfiguration.integrateDesc} />
@@ -324,19 +328,30 @@ const SlackIntegration = ({ close, value }) => {
                                 <Button
                                     width="500px"
                                     height="45px"
-                                    placeholder={isValue ? 'Update' : 'Connect'}
+                                    placeholder={
+                                        isValue ? (
+                                            'Update'
+                                        ) : isCloud() && !state?.allowedActions?.can_connect_slack ? (
+                                            <span className="upgrade">
+                                                Connect <FaArrowCircleUp className="lock-feature-icon" />
+                                            </span>
+                                        ) : (
+                                            'Connect'
+                                        )
+                                    }
                                     colorType="white"
                                     radiusType="circle"
                                     backgroundColorType="purple"
                                     fontSize="14px"
                                     fontFamily="InterSemiBold"
                                     isLoading={loadingSubmit}
                                     disabled={isValue && !creationForm.isFieldsTouched()}
-                                    onClick={handleSubmit}
+                                    onClick={() => (!isCloud() || state?.allowedActions?.can_connect_slack ? handleSubmit() : setCloudModalOpen(true))}
                                 />
                             </div>
                         </Form.Item>
                     </Form>
+                    <CloudMoadl type={'upgrade'} open={cloudModalOpen} handleClose={() => setCloudModalOpen(false)} />
                 </>
             )}
         </dynamic-integration>

ui_src/src/domain/administration/integrations/components/slackIntegration/style.scss

@@ -1 +0,0 @@
-