General enhancements (#1380) (#1381)

* ui updates and build * build files * qa changes * bug fixes * build --------- Co-authored-by: Sveta Gimpelson <74717402+SvetaMemphis@users.noreply.github.com>
superstreamlabs · Nov 2, 2023 · a2b3483 · a2b3483
1 parent f44a42f
commit a2b3483
Show file tree

Hide file tree

Showing 23 changed files with 96 additions and 91 deletions.
diff --git a/ui_src/src/App.js b/ui_src/src/App.js
@@ -676,6 +676,7 @@ const App = withRouter(() => {
                                     ></AppWrapper>
                                 }
                             />
+                            <PrivateRoute exact path={`${pathDomains.administration}/profile`} component={<AppWrapper content={<Administration />}></AppWrapper>} />
                             <PrivateRoute exact path={`${pathDomains.administration}/integrations`} component={<AppWrapper content={<Administration />}></AppWrapper>} />
                             <PrivateRoute
                                 exact

diff --git a/ui_src/src/components/cloudModal/index.js b/ui_src/src/components/cloudModal/index.js
@@ -56,7 +56,7 @@ const CloudModal = ({ type, open, handleClose }) => {
             ),
             subtitle: 'To Unlock More Features And Enhance Your Experience!',
             banner: UpgradeBanner,
-            leftBtn: 'Talk to Sales',
+            leftBtn: 'Chat With Your Account Manager',
             leftBtnLink: 'https://meetings.hubspot.com/yaniv-benhemo',
             rightBtn: 'Upgrade Now',
             rightBtnLink: ''
@@ -91,6 +91,7 @@ const CloudModal = ({ type, open, handleClose }) => {
                 }
                 displayButtons={false}
                 width="560px"
+                height="575"
                 clickOutside={handleClose}
                 open={open}
                 className="cloud-modal"

diff --git a/ui_src/src/components/createStationForm/index.js b/ui_src/src/components/createStationForm/index.js
@@ -282,12 +282,7 @@ const CreateStationForm = ({ createStationFormRef, getStartedStateRef, finishUpd
         <Form name="form" form={creationForm} autoComplete="off" className={'create-station-form-getstarted'}>
             <div className={getStarted ? 'left-side left-gs' : 'left-side'}>
                 <div className="station-name-section">
-                    <TitleComponent
-                        headerTitle="Enter station name"
-                        typeTitle="sub-header"
-                        headerDescription="RabbitMQ has queues, Kafka has topics, and Memphis has stations"
-                        required={true}
-                    />
+                    <TitleComponent headerTitle="Station name" typeTitle="sub-header" required={true} />
                     <Form.Item
                         name="station_name"
                         rules={[
@@ -309,7 +304,7 @@ const CreateStationForm = ({ createStationFormRef, getStartedStateRef, finishUpd
                         initialValue={getStartedStateRef?.formFieldsCreateStation?.name}
                     >
                         <Input
-                            placeholder="Type station name"
+                            placeholder=""
                             type="text"
                             maxLength="128"
                             radiusType="semi-round"
@@ -334,13 +329,7 @@ const CreateStationForm = ({ createStationFormRef, getStartedStateRef, finishUpd
                 <div className="replicas-partition-container" style={{ display: isCloud() ? 'block' : 'grid' }}>
                     {!isCloud() && (
                         <div className="replicas-container">
-                            <TitleComponent
-                                headerTitle="Replicas"
-                                typeTitle="sub-header"
-                                headerDescription="Amount of mirrors per message."
-                                learnMore={true}
-                                link="https://docs.memphis.dev/memphis/memphis/concepts/station#replicas-mirroring"
-                            />
+                            <TitleComponent headerTitle="Replicas" typeTitle="sub-header" headerDescription="Number of mirrors for each message" />
                             <div>
                                 <Form.Item
                                     name="replicas"
@@ -364,7 +353,7 @@ const CreateStationForm = ({ createStationFormRef, getStartedStateRef, finishUpd
                         </div>
                     )}
                     <div className="replicas-container">
-                        <TitleComponent headerTitle="Partitions" typeTitle="sub-header" headerDescription="Amount of partitions per station." learnMore={false} />
+                        <TitleComponent headerTitle="Partitions" typeTitle="sub-header" headerDescription="Number of partitions per station" learnMore={false} />
                         <div>
                             <Form.Item
                                 name="partitions_number"
@@ -423,7 +412,7 @@ const CreateStationForm = ({ createStationFormRef, getStartedStateRef, finishUpd
                             <TitleComponent
                                 headerTitle="Deduplication (Idempotency)"
                                 typeTitle="sub-header"
-                                headerDescription={<span>Deduplication window for which producers will not produce the same message twice.</span>}
+                                headerDescription="A time-window for deduplication to prevent producers from generating duplicate messages"
                             />
                         </div>
                         <div className="idempotency-value">
@@ -478,9 +467,9 @@ const CreateStationForm = ({ createStationFormRef, getStartedStateRef, finishUpd
                     <div>
                         <div className="toggle-add">
                             <TitleComponent
-                                headerTitle="Enforce schema"
+                                headerTitle="Schema validation"
                                 typeTitle="sub-header"
-                                headerDescription="Enforcing schema will increase produced data quality"
+                                headerDescription="Enforcing a schema will enhance the quality of the produced data"
                             />
                             <Switcher onChange={() => setUseSchema(!useSchema)} checked={useSchema} />
                         </div>
@@ -498,11 +487,7 @@ const CreateStationForm = ({ createStationFormRef, getStartedStateRef, finishUpd
                 )}
                 <div>
                     <div className="toggle-add">
-                        <TitleComponent
-                            headerTitle="Dead-letter station"
-                            typeTitle="sub-header"
-                            headerDescription="Dead-letter stations are useful for debugging your application"
-                        />
+                        <TitleComponent headerTitle="Dead-letter station" typeTitle="sub-header" headerDescription='A "recylce bin" for messages' />
                         <Switcher onChange={() => setDlsConfiguration(!dlsConfiguration)} checked={dlsConfiguration} />
                     </div>
 
@@ -528,18 +513,13 @@ const CreateStationForm = ({ createStationFormRef, getStartedStateRef, finishUpd
                     <div className="content">
                         {tabValue === tabs[0].name && (
                             <>
-                                <p className="description">
-                                    The criteria for which messages will be expelled from the station.&nbsp;
-                                    <a className="learn-more" href="https://docs.memphis.dev/memphis/memphis/concepts/station#retention" target="_blank">
-                                        Learn more
-                                    </a>
-                                </p>
+                                <p className="description">The criteria for which messages will be expelled from the station</p>
                             </>
                         )}
                         {tabValue === tabs[1].name && (
                             <p className="description">
-                                *Optional* For archiving and higher retention of ingested data. <br />
-                                Once a message passes the 1st storage tier, it will automatically be migrated to the 2nd storage tier, if defined.&nbsp;
+                                *Optional* To enhance data archiving and extend the retention period for ingested data, messages that surpass the first storage tier will
+                                undergo automatic migration to the second storage tier, if configured
                             </p>
                         )}
                         <div className="retention-type-section" style={{ display: tabValue === tabs[0].name ? 'block' : 'none' }}>
@@ -685,35 +665,7 @@ const CreateStationForm = ({ createStationFormRef, getStartedStateRef, finishUpd
                         </div>
                         {(!isCloud() || (isCloud() && tabValue === tabs[1].name)) && (
                             <div className="storage-container">
-                                <TitleComponent
-                                    headerTitle="Storage type"
-                                    typeTitle="sub-header"
-                                    headerDescription={
-                                        tabValue === tabs[0].name ? (
-                                            <span>
-                                                Type of storage for short retention.&nbsp;
-                                                <a
-                                                    className="learn-more"
-                                                    href="https://docs.memphis.dev/memphis/memphis/concepts/storage-and-redundancy#tier-1-hot-storage"
-                                                    target="_blank"
-                                                >
-                                                    Learn more
-                                                </a>
-                                            </span>
-                                        ) : (
-                                            <span>
-                                                Type of storage for long retention.&nbsp;
-                                                <a
-                                                    className="learn-more"
-                                                    href="https://docs.memphis.dev/memphis/memphis/concepts/storage-and-redundancy#tier-2-cold-storage"
-                                                    target="_blank"
-                                                >
-                                                    Learn more
-                                                </a>
-                                            </span>
-                                        )
-                                    }
-                                />
+                                <TitleComponent headerTitle="Storage type" typeTitle="sub-header" />
                                 <Form.Item
                                     name="storage_type"
                                     initialValue={getStarted ? getStartedStateRef?.formFieldsCreateStation?.storage_type : 'file'}

diff --git a/ui_src/src/components/learnMore/index.js b/ui_src/src/components/learnMore/index.js
@@ -0,0 +1,25 @@
+// Copyright 2022-2023 The Memphis.dev Authors
+// Licensed under the Memphis Business Source License 1.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// Changed License: [Apache License, Version 2.0 (https://www.apache.org/licenses/LICENSE-2.0), as published by the Apache Foundation.
+//
+// https://github.com/memphisdev/memphis/blob/master/LICENSE
+//
+// Additional Use Grant: You may make use of the Licensed Work (i) only as part of your own product or service, provided it is not a message broker or a message queue product or service; and (ii) provided that you do not use, provide, distribute, or make available the Licensed Work as a Service.
+// A "Service" is a commercial offering, product, hosted, or managed service, that allows third parties (other than your own employees and contractors acting on your behalf) to access and/or use the Licensed Work or a substantial set of the features or functionality of the Licensed Work to third parties as a software-as-a-service, platform-as-a-service, infrastructure-as-a-service or other similar services that compete with Licensor products or services.
+
+import './style.scss';
+import { ReactComponent as PurpleQuestionMark } from '../../assets/images/purpleQuestionMark.svg';
+import React from 'react';
+
+const LearnMore = ({ url, height }) => {
+    return (
+        <span className="learn-more-container">
+            <PurpleQuestionMark className="info-icon" alt="Learn more" onClick={() => window.open(url, '_blank')} height={height || '15px'} />
+        </span>
+    );
+};
+
+export default LearnMore;
diff --git a/ui_src/src/components/learnMore/style.scss b/ui_src/src/components/learnMore/style.scss
@@ -0,0 +1,5 @@
+.learn-more-container {
+    .info-icon {
+        cursor: pointer;
+    }
+}
diff --git a/ui_src/src/components/sideBar/index.js b/ui_src/src/components/sideBar/index.js
@@ -64,6 +64,7 @@ import { Context } from '../../hooks/store';
 import pathDomains from '../../router';
 import Spinner from '../spinner';
 import Support from './support';
+import LearnMore from '../learnMore';
 import GetStarted from '../getStartedModal';
 import Modal from '../modal';
 import CreateStationForm from '../createStationForm';
@@ -530,10 +531,13 @@ function SideBar() {
                             <StationIcon className="headerImage" alt="stationImg" />
                         </div>
                         <p>Create a new station</p>
-                        <label>A station is a distributed unit that stores the produced data.</label>
+                        <label>
+                            A station is a distributed unit that stores the produced data{' '}
+                            <LearnMore url="https://docs.memphis.dev/memphis/memphis-broker/concepts/station" />
+                        </label>
                     </div>
                 }
-                height="70vh"
+                height="58vh"
                 width="1020px"
                 rBtnText="Create"
                 lBtnText="Cancel"

diff --git a/ui_src/src/components/sideBar/style.scss b/ui_src/src/components/sideBar/style.scss
@@ -268,5 +268,5 @@
     gap: 8px;
 }
 .ant-popover-placement-right {
-    left: 80px !important;
+    left: 60px !important;
 }
diff --git a/ui_src/src/components/titleComponent/style.scss b/ui_src/src/components/titleComponent/style.scss
@@ -1,6 +1,4 @@
 .title-container {
-    margin-bottom: 15px;
-
     .header-title-container {
         display: flex;
         align-items: center;
@@ -32,7 +30,7 @@
             margin-right: 10px;
         }
     }
-    .span-header{
+    .span-header {
         font-family: 'Inter';
         font-size: 14px;
         color: #b4b4b4;
@@ -44,7 +42,7 @@
         font-size: 12px;
         line-height: 15px;
         color: #b4b4b4;
-        margin: 0;
+        margin-bottom: 10px;
     }
 }
 .sub-header-title {

diff --git a/ui_src/src/domain/administration/integrations/components/dataDogIntegration/index.js b/ui_src/src/domain/administration/integrations/components/dataDogIntegration/index.js
@@ -19,7 +19,6 @@ import { INTEGRATION_LIST, getTabList } from '../../../../../const/integrationLi
 import { ReactComponent as CollapseArrowIcon } from '../../../../../assets/images/collapseArrow.svg';
 import { ReactComponent as PurpleQuestionMark } from '../../../../../assets/images/purpleQuestionMark.svg';
 import datadogMetricsps from '../../../../../assets/images/datadogMetricsps.png';
-import Button from '../../../../../components/button';
 import CustomTabs from '../../../../../components/Tabs';
 import Copy from '../../../../../components/copy';
 import Modal from '../../../../../components/modal';

diff --git a/ui_src/src/domain/administration/integrations/components/gitHubIntegration/index.js b/ui_src/src/domain/administration/integrations/components/gitHubIntegration/index.js
@@ -329,7 +329,7 @@ const GitHubIntegration = ({ close, value }) => {
                     </Form>
                 </>
             )}
-            <CloudMoadl type="cloud" open={cloudModalOpen} handleClose={() => setCloudModalOpen(false)} />
+            <CloudMoadl type="functions" open={cloudModalOpen} handleClose={() => setCloudModalOpen(false)} />
         </dynamic-integration>
     );
 };

diff --git a/ui_src/src/domain/administration/integrations/components/integrationItem/style.scss b/ui_src/src/domain/administration/integrations/components/integrationItem/style.scss
@@ -135,6 +135,9 @@ integ-item {
 }
 
 .integration-modal {
+    .ant-modal-body {
+        padding: 0px;
+    }
     .ant-drawer-content {
         width: 100%;
         height: 100%;

diff --git a/ui_src/src/domain/overview/index.js b/ui_src/src/domain/overview/index.js
@@ -43,6 +43,7 @@ import Integrations from './integrations';
 import Usage from './usage';
 import Loader from '../../components/loader';
 import Button from '../../components/button';
+import LearnMore from '../../components/learnMore';
 import { Context } from '../../hooks/store';
 import Modal from '../../components/modal';
 import AsyncTasks from '../../components/asyncTasks';
@@ -343,10 +344,13 @@ function OverView() {
                             <StationIcon className="headerImage" alt="stationImg" />
                         </div>
                         <p>Create a new station</p>
-                        <label>A station is a distributed unit that stores the produced data.</label>
+                        <label>
+                            A station is a distributed unit that stores the produced data{' '}
+                            <LearnMore url="https://docs.memphis.dev/memphis/memphis-broker/concepts/station" />
+                        </label>
                     </div>
                 }
-                height="70vh"
+                height="58vh"
                 width="1020px"
                 rBtnText="Create"
                 lBtnText="Cancel"

diff --git a/ui_src/src/domain/schema/components/attachStationModal/index.js b/ui_src/src/domain/schema/components/attachStationModal/index.js
@@ -22,6 +22,7 @@ import { httpRequest } from '../../../../services/http';
 import Button from '../../../../components/button';
 import OverflowTip from '../../../../components/tooltip/overflowtip';
 import Modal from '../../../../components/modal';
+import LearnMore from '../../../../components/learnMore';
 import CreateStationForm from '../../../../components/createStationForm';
 
 function AttachStationModal({ close, handleAttachedStations, attachedStations, schemaName, update }) {
@@ -212,10 +213,13 @@ function AttachStationModal({ close, handleAttachedStations, attachedStations, s
                             <StationsActiveIcon alt="stationsIconActive" className="headerImage" />
                         </div>
                         <p>Create a new station</p>
-                        <label>A station is a distributed unit that stores the produced data.</label>
+                        <label>
+                            A station is a distributed unit that stores the produced data{' '}
+                            <LearnMore url="https://docs.memphis.dev/memphis/memphis-broker/concepts/station" />
+                        </label>
                     </div>
                 }
-                height="70vh"
+                height="58vh"
                 width="1020px"
                 rBtnText="Create"
                 lBtnText="Cancel"

diff --git a/ui_src/src/domain/signup/style.scss b/ui_src/src/domain/signup/style.scss
@@ -19,12 +19,13 @@
         border: 1px solid #efefef;
         box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
         border-radius: 12px;
-        width: 600px;
-        height: 660px;
+        width: 650px;
+        height: 750px;
         padding: 50px;
         flex-direction: column;
         display: flex;
         align-items: center;
+        justify-content: center;
         z-index: 2;
         .form-logo {
             width: 300px;

diff --git a/ui_src/src/domain/stationOverview/components/useSchemaModal/index.js b/ui_src/src/domain/stationOverview/components/useSchemaModal/index.js
@@ -25,6 +25,7 @@ import SearchInput from '../../../../components/searchInput';
 import { httpRequest } from '../../../../services/http';
 import Button from '../../../../components/button';
 import Modal from '../../../../components/modal';
+import LearnMore from '../../../../components/learnMore';
 import pathDomains from '../../../../router';
 import { StationStoreContext } from '../..';
 import SchemaItem from './schemaItem';
@@ -244,10 +245,13 @@ const UseSchemaModal = ({ stationName, handleSetSchema, close, type = 'schema' }
                             <StationIcon className="headerImage" alt="stationImg" />
                         </div>
                         <p>Create a new station</p>
-                        <label>A station is a distributed unit that stores the produced data.</label>
+                        <label>
+                            A station is a distributed unit that stores the produced data{' '}
+                            <LearnMore url="https://docs.memphis.dev/memphis/memphis-broker/concepts/station" />
+                        </label>
                     </div>
                 }
-                height="70vh"
+                height="58vh"
                 width="1020px"
                 rBtnText="Create"
                 lBtnText="Cancel"

diff --git a/ui_src/src/domain/stationOverview/stationObservabilty/ProduceConsumList/index.js b/ui_src/src/domain/stationOverview/stationObservabilty/ProduceConsumList/index.js
@@ -341,7 +341,7 @@ const ProduceConsumList = ({ producer }) => {
                 }
                 className={'modal-wrapper produce-modal'}
                 width="550px"
-                height="70vh"
+                height="58vh"
                 clickOutside={() => {
                     setOpenProduceMessages(false);
                 }}