RND-204-general-enhanecements (#1442)

* copy from cloud

* ui fixes

ui_src/src/components/Tabs/index.js

@@ -22,6 +22,7 @@ import React from 'react';
 import TooltipComponent from '../tooltip/tooltip';
 import CheckboxComponent from '../checkBox';
 import { PriorityHighRounded } from '@material-ui/icons';
+import CloudOnly from '../cloudOnly';
 
 const CustomTabs = ({ tabs, onChange, value, disabled, length, tooltip, icon = false, checkbox = false, defaultActiveKey, tabsCounter }) => {
     return (
@@ -37,7 +38,10 @@ const CustomTabs = ({ tabs, onChange, value, disabled, length, tooltip, icon = f
                             <label className="tabs-name" style={{ width: length && length[index] && '135px' }}>
                                 {checkbox && <CheckboxComponent checked={tab.checked} />}
                                 <TooltipComponent text={tooltip && tooltip[index]}>
-                                    {`${tab?.name || tab}  ${tabsCounter ? `(${tabsCounter[index]})` : ''}`}{' '}
+                                    <>
+                                        {`${tab?.name || tab}  ${tabsCounter ? `(${tabsCounter[index]})` : ''} `}
+                                        {tab?.cloudOnly && <CloudOnly position={'relative'} />}
+                                    </>
                                 </TooltipComponent>
                                 {length && length[index] && icon && (
                                     <div className="error-icon">

ui_src/src/config.js

@@ -28,7 +28,7 @@ export const DOC_URL = 'https://docs.memphis.dev/memphis/getting-started/readme'
 export const CONNECT_APP_VIDEO = 'https://www.youtube.com/watch?v=-5YmxYRQsdw';
 export const CONNECT_CLI_VIDEO = 'https://www.youtube.com/watch?v=awXwaU4rBBQ';
 export const WELCOME_VIDEO = 'https://youtu.be/mDbGnMC1hig';
-
+export const FUNCTION_GUIDE_VIDEO = 'https://www.youtube.com/watch?v=-5YmxYRQsdw';
 export const RELEASE_NOTES_URL = 'https://api.github.com/repos/Memphisdev/gitbook-backup/contents/release-notes/releases';
 export const LATEST_RELEASE_URL = 'https://api.github.com/repos/Memphisdev/memphis/releases';
 export const RELEASE_DOCS_URL = 'https://docs.memphis.dev/memphis/release-notes/releases/';

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

@@ -121,7 +121,7 @@ function FunctionBox({ funcDetails, integrated, isTagsOn = true, onClick = null,
                         ? 'function-box-wrapper func-selected'
                         : 'function-box-wrapper'
                 }
-                onClick={() => (onClick ? onClick() : isCloud() && handleDrawer(true))}
+                onClick={() => (onClick ? onClick() : isCloud() ? handleDrawer(true) : setCloudModal(true))}
             >
                 <header is="x3d">
                     <div className={`function-box-header ${!isTagsOn && 'station'}`}>

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

@@ -19,8 +19,8 @@ import VideoPlayer from '../../../../components/videoPlayer';
 import Button from '../../../../components/button';
 import Modal from '../../../../components/modal';
 import CloneModal from '../../../../components/cloneModal';
-import { CONNECT_APP_VIDEO } from '../../../../config';
-import ConnectBG from '../../../../assets/images/connectBG.webp';
+import { FUNCTION_GUIDE_VIDEO } from '../../../../config';
+import ConnectBG from '../../../../assets/images/functionsWelcomeBanner.webp';
 import { LuInfo } from 'react-icons/lu';
 
 const FunctionsGuide = ({ handleClose, handleConfirm }) => {
@@ -78,7 +78,7 @@ const FunctionsGuide = ({ handleClose, handleConfirm }) => {
                 <p className="sub-title">Embrace Lightning-Speed Serverless Stream Processing.</p>
             </div>
             <div className="video-wrapper">
-                <VideoPlayer url={CONNECT_APP_VIDEO} bgImg={ConnectBG} width={'540px'} height={'250px'} tracePlay />
+                <VideoPlayer url={FUNCTION_GUIDE_VIDEO} bgImg={ConnectBG} width={'540px'} height={'250px'} tracePlay />
             </div>
             <div className="info">
                 <p className="info-title">Getting Started</p>

ui_src/src/domain/stationOverview/stationObservabilty/messages/style.scss

@@ -69,6 +69,9 @@
             padding: 4px 2px;
             align-items: flex-start;
             flex-shrink: 0;
+            label {
+                cursor: pointer;
+            }
             .badge {
                 color: #f5f5f5;
                 border-radius: 32px;

ui_src/src/services/valueConvertor.js

@@ -13,7 +13,6 @@
 import { planType } from '../const/globalConst';
 import { decodeMessage } from './decoder';
 import { LOCAL_STORAGE_PLAN } from '../const/localStorageConsts';
-import CloudOnly from '../components/cloudOnly';
 
 export const convertDateToSeconds = (days, hours, minutes, seconds) => {
     let totalSeconds = 0;
@@ -561,14 +560,9 @@ export const getFunctionsTabs = () => [
         disabled: false
     },
     {
-        name: isCloud() ? (
-            'Private'
-        ) : (
-            <>
-                Private <CloudOnly position={'relative'} />
-            </>
-        ),
-        disabled: !isCloud()
+        name: 'Private',
+        disabled: !isCloud(),
+        cloudOnly: !isCloud() ? true : false
     }
 ];
 

ui_static_files/build/asset-manifest.json

@@ -1,7 +1,7 @@
 {
   "files": {
-    "main.css": "/static/css/main.538b4769.css",
-    "main.js": "/static/js/main.8e5cb516.js",
+    "main.css": "/static/css/main.ba4c3a16.css",
+    "main.js": "/static/js/main.1595e4b6.js",
     "static/js/617.a5f8c4fc.chunk.js": "/static/js/617.a5f8c4fc.chunk.js",
     "static/js/2542.27de8743.chunk.js": "/static/js/2542.27de8743.chunk.js",
     "static/js/1737.e134cfd4.chunk.js": "/static/js/1737.e134cfd4.chunk.js",
@@ -86,6 +86,7 @@
     "static/js/1448.9e4b081c.chunk.js": "/static/js/1448.9e4b081c.chunk.js",
     "static/js/4027.81c097fc.chunk.js": "/static/js/4027.81c097fc.chunk.js",
     "static/media/welcomeModalImage.webp": "/static/media/welcomeModalImage.18ab8721ab6c549fd3fb.webp",
+    "static/media/functionsWelcomeBanner.webp": "/static/media/functionsWelcomeBanner.c1406157cf8a38bb6acb.webp",
     "static/media/Inter-Bold.ttf": "/static/media/Inter-Bold.a73db89c43e44ca8f5e0.ttf",
     "static/media/Inter-SemiBold.ttf": "/static/media/Inter-SemiBold.45b4c2ae493bb481102f.ttf",
     "static/media/Inter-Medium.ttf": "/static/media/Inter-Medium.e7231ba33760832432b8.ttf",
@@ -105,7 +106,6 @@
     "static/media/codicon.ttf": "/static/media/codicon.b797181c93b3755f4fa1.ttf",
     "static/media/graphOverview.svg": "/static/media/graphOverview.625afdb73bbf4040996811a8face93ac.svg",
     "static/media/datadogIcon.svg": "/static/media/datadogIcon.50af3f4d4c0af10fbedefe809eebd0e1.svg",
-    "static/media/connectBG.webp": "/static/media/connectBG.c791a876015cb58bbcad.webp",
     "static/media/influxDBIcon.svg": "/static/media/influxDBIcon.2e7bbdf6ca01a76a16d98ed6158fc316.svg",
     "static/media/zapierBannerPopup.webp": "/static/media/zapierBannerPopup.115aeaa642deb09097a9.webp",
     "static/media/s3BannerPopup.webp": "/static/media/s3BannerPopup.aae5ce355880849e7fc7.webp",
@@ -316,7 +316,8 @@
     "static/media/closeNotification.svg": "/static/media/closeNotification.7551e8366682f9c6585bb1a694c4112a.svg"
   },
   "entrypoints": [
-    "static/css/main.538b4769.css",
-    "static/js/main.8e5cb516.js"
+    "static/css/main.ba4c3a16.css",
+    "static/js/main.1595e4b6.js"
+
   ]
 }

ui_static_files/build/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Memphis.dev console is designed to simplify your work and give you a graphical user interface for controlling your stations, security, integrations, and observing your data and other vital metrics"/><link rel="manifest" href="/manifest.json"/><title>Memphis.dev Console</title><link rel="apple-touch-icon" sizes="57x57" href="/img/favicon/apple-icon-57x57.png"><link rel="apple-touch-icon" sizes="60x60" href="/img/favicon/apple-icon-60x60.png"><link rel="apple-touch-icon" sizes="72x72" href="/img/favicon/apple-icon-72x72.png"><link rel="apple-touch-icon" sizes="76x76" href="/img/favicon/apple-icon-76x76.png"><link rel="apple-touch-icon" sizes="114x114" href="/img/favicon/apple-icon-114x114.png"><link rel="apple-touch-icon" sizes="120x120" href="/img/favicon/apple-icon-120x120.png"><link rel="apple-touch-icon" sizes="144x144" href="/img/favicon/apple-icon-144x144.png"><link rel="apple-touch-icon" sizes="152x152" href="/img/favicon/apple-icon-152x152.png"><link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-icon-180x180.png"><link rel="icon" type="image/png" sizes="192x192" href="/img/favicon/android-icon-192x192.png"><link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png"><link rel="icon" type="image/png" sizes="96x96" href="/img/favicon/favicon-96x96.png"><link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png"><meta name="msapplication-TileColor" content="#ffffff"><meta name="msapplication-TileImage" content="/img/favicon/ms-icon-144x144.png"><meta name="theme-color" content="#ffffff"><script defer="defer" src="/static/js/main.8e5cb516.js"></script><link href="/static/css/main.538b4769.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Memphis.dev console is designed to simplify your work and give you a graphical user interface for controlling your stations, security, integrations, and observing your data and other vital metrics"/><link rel="manifest" href="/manifest.json"/><title>Memphis.dev Console</title><link rel="apple-touch-icon" sizes="57x57" href="/img/favicon/apple-icon-57x57.png"><link rel="apple-touch-icon" sizes="60x60" href="/img/favicon/apple-icon-60x60.png"><link rel="apple-touch-icon" sizes="72x72" href="/img/favicon/apple-icon-72x72.png"><link rel="apple-touch-icon" sizes="76x76" href="/img/favicon/apple-icon-76x76.png"><link rel="apple-touch-icon" sizes="114x114" href="/img/favicon/apple-icon-114x114.png"><link rel="apple-touch-icon" sizes="120x120" href="/img/favicon/apple-icon-120x120.png"><link rel="apple-touch-icon" sizes="144x144" href="/img/favicon/apple-icon-144x144.png"><link rel="apple-touch-icon" sizes="152x152" href="/img/favicon/apple-icon-152x152.png"><link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-icon-180x180.png"><link rel="icon" type="image/png" sizes="192x192" href="/img/favicon/android-icon-192x192.png"><link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png"><link rel="icon" type="image/png" sizes="96x96" href="/img/favicon/favicon-96x96.png"><link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png"><meta name="msapplication-TileColor" content="#ffffff"><meta name="msapplication-TileImage" content="/img/favicon/ms-icon-144x144.png"><meta name="theme-color" content="#ffffff"><script defer="defer" src="/static/js/main.1595e4b6.js"></script><link href="/static/css/main.ba4c3a16.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>