bug fix and modal issue

Signed-off-by: captain-Akshay <akshay.sharma0503@gmail.com>
meshery · Apr 26, 2024 · e968dac · e968dac
1 parent 1001bf9
commit e968dac
Show file tree

Hide file tree

Showing 4 changed files with 158 additions and 108 deletions.
diff --git a/ui/components/ConfirmationModal.js b/ui/components/ConfirmationModal.js
@@ -1,7 +1,6 @@
 import {
   Button,
   Checkbox,
-  Chip,
   Dialog,
   DialogActions,
   DialogContent,
@@ -19,8 +18,6 @@ import { withStyles } from '@material-ui/core/styles';
 import { Search } from '@material-ui/icons';
 import { connect } from 'react-redux';
 import { setK8sContexts, updateProgress } from '../lib/store';
-import { errorHandlerGenerator, successHandlerGenerator } from './ConnectionWizard/helpers/common';
-import { pingKubernetes } from './ConnectionWizard/helpers/kubernetesHelpers';
 import { getK8sConfigIdsFromK8sConfig } from '../utils/multi-ctx';
 import { bindActionCreators } from 'redux';
 import { useEffect, useState } from 'react';
@@ -38,6 +35,8 @@ import { K8sEmptyState } from './EmptyState/K8sContextEmptyState';
 import { ACTIONS } from '../utils/Enum';
 import CAN from '@/utils/can';
 import { keys } from '@/utils/permission_constants';
+import { ConnectionChip, CustomTooltip } from '@layer5/sistent';
+import useKubernetesHook from './hooks/useKubernetesHook';
 
 const styles = (theme) => ({
   dialogBox: {},
@@ -251,18 +250,9 @@ function ConfirmationMsg(props) {
   const handleTabValChange = (event, newVal) => {
     setTabVal(newVal);
   };
-
-  const handleKubernetesClick = (ctxID) => {
-    updateProgress({ showProgress: true });
-    pingKubernetes(
-      successHandlerGenerator(notify, 'Kubernetes pinged', () =>
-        updateProgress({ showProgress: false }),
-      ),
-      errorHandlerGenerator(notify, 'Kubernetes not pinged', () =>
-        updateProgress({ showProgress: false }),
-      ),
-      ctxID,
-    );
+  const ping = useKubernetesHook();
+  const handleKubernetesClick = (ctx) => {
+    ping(ctx.name, ctx.server, ctx.connection_id);
   };
 
   const handleSubmit = () => {
@@ -499,10 +489,10 @@ function ConfirmationMsg(props) {
                                   onChange={() => setContextViewer(ctx.id)}
                                   color="primary"
                                 />
-                                <Chip
+                                <ConnectionChip
                                   label={ctx.name}
                                   className={classes.ctxChip}
-                                  onClick={() => handleKubernetesClick(ctx.connection_id)}
+                                  onClick={() => handleKubernetesClick(ctx)}
                                   icon={
                                     <img
                                       src="/static/img/kubernetes.svg"
@@ -625,8 +615,6 @@ export const SelectDeploymentTarget_ = ({
   const [searchedContexts, setSearchedContexts] = useState(k8scontext);
 
   const selectedContexts = selectedK8sContexts;
-
-  const { notify } = useNotification();
   const searchContexts = (search) => {
     if (search === '') {
       setSearchedContexts(k8scontext);
@@ -666,18 +654,9 @@ export const SelectDeploymentTarget_ = ({
       setK8sContexts({ selectedK8sContexts: [...selectedContexts, id] });
     }
   };
-
-  const handleKubernetesClick = (ctxID) => {
-    updateProgress({ showProgress: true });
-    pingKubernetes(
-      successHandlerGenerator(notify, 'Kubernetes pinged', () =>
-        updateProgress({ showProgress: false }),
-      ),
-      errorHandlerGenerator(notify, 'Kubernetes not pinged', () =>
-        updateProgress({ showProgress: false }),
-      ),
-      ctxID,
-    );
+  const ping = useKubernetesHook();
+  const handleKubernetesClick = (ctx) => {
+    ping(ctx.name, ctx.server, ctx.connection_id);
   };
 
   return k8scontext.length > 0 ? (
@@ -714,7 +693,7 @@ export const SelectDeploymentTarget_ = ({
       <div className={classes.contexts}>
         {searchedContexts.map((ctx) => (
           <div id={ctx.id} className={classes.chip} key={ctx.id}>
-            <Tooltip title={`Server: ${ctx.server}`}>
+            <CustomTooltip title={`Server: ${ctx.server}`} disableInteractive>
               <div
                 style={{
                   display: 'flex',
@@ -730,16 +709,16 @@ export const SelectDeploymentTarget_ = ({
                   onChange={() => setContextViewer(ctx.id)}
                   color="primary"
                 />
-                <Chip
+                <ConnectionChip
                   label={ctx.name}
                   className={classes.ctxChip}
-                  onClick={() => handleKubernetesClick(ctx.connection_id)}
+                  onClick={() => handleKubernetesClick(ctx)}
                   icon={<img src="/static/img/kubernetes.svg" className={classes.ctxIcon} />}
                   variant="outlined"
                   data-cy="chipContextName"
                 />
               </div>
-            </Tooltip>
+            </CustomTooltip>
           </div>
         ))}
       </div>

diff --git a/ui/components/Lifecycle/Workspaces/index.js b/ui/components/Lifecycle/Workspaces/index.js
@@ -6,10 +6,10 @@ import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import DesignsIcon from '../../../assets/icons/DesignIcon';
 import classNames from 'classnames';
-
+import { TransferList as StyledTransferList } from '@layer5/sistent';
 import { store } from '../../../store';
 import WorkspaceIcon from '../../../assets/icons/Workspace';
-import { EmptyState, GenericModal, TransferList } from '../General';
+import { EmptyState, GenericModal } from '../General';
 import useStyles from '../../../assets/styles/general/tool.styles';
 import styles from '../Environments/styles';
 import SearchBar from '../../../utils/custom-search';
@@ -41,6 +41,7 @@ import { keys } from '@/utils/permission_constants';
 import CAN from '@/utils/can';
 import DefaultError from '@/components/General/error-404/index';
 import { useGetSchemaQuery } from '@/rtk-query/schema';
+import { UsesSistent } from '@/components/SistentWrapper';
 
 const ACTION_TYPES = {
   CREATE: 'create',
@@ -52,6 +53,7 @@ const Workspaces = ({ organization, classes }) => {
     open: false,
     schema: {},
   });
+
   const [page, setPage] = useState(0);
   const [pageSize /*setPageSize*/] = useState(10);
   const [sortOrder /*setSortOrder*/] = useState('');
@@ -692,74 +694,79 @@ const Workspaces = ({ organization, classes }) => {
                 initialData={initialData}
               />
             )}
-          <GenericModal
-            open={assignEnvironmentModal}
-            handleClose={handleAssignEnvironmentModalClose}
-            title={`Assign Environments to ${environmentAssignWorkspace.name}`}
-            body={
-              <TransferList
-                name="Environments"
-                assignableData={environmentsData}
-                assignedData={handleAssignEnvironmentsData}
-                originalAssignedData={workspaceEnvironmentsData}
-                emptyStateIconLeft={
-                  <EnvironmentIcon
-                    height="5rem"
-                    width="5rem"
-                    fill="#808080"
-                    secondaryFill="#979797"
+          {(CAN(
+            keys.ASSIGN_ENVIRONMENT_TO_WORKSPACE.subject,
+            keys.ASSIGN_ENVIRONMENT_TO_WORKSPACE.action,
+          ) ||
+            CAN(
+              keys.REMOVE_ENVIRONMENT_FROM_WORKSPACE.subject,
+              keys.REMOVE_ENVIRONMENT_FROM_WORKSPACE.action,
+            )) && (
+            <GenericModal
+              open={assignEnvironmentModal}
+              handleClose={handleAssignEnvironmentModalClose}
+              title={`Assign Environments to ${environmentAssignWorkspace.name}`}
+              body={
+                <UsesSistent>
+                  <StyledTransferList
+                    name="Environments"
+                    assignableData={environmentsData}
+                    assignedData={handleAssignEnvironmentsData}
+                    originalAssignedData={workspaceEnvironmentsData}
+                    emptyStateIconLeft={
+                      <EnvironmentIcon
+                        height="5rem"
+                        width="5rem"
+                        fill="#808080"
+                        secondaryFill="#979797"
+                      />
+                    }
+                    emtyStateMessageLeft="No environments available"
+                    emptyStateIconRight={
+                      <EnvironmentIcon
+                        height="5rem"
+                        width="5rem"
+                        fill="#808080"
+                        secondaryFill="#979797"
+                      />
+                    }
+                    emtyStateMessageRight="No environments assigned"
+                    assignablePage={handleAssignablePageEnvironment}
+                    assignedPage={handleAssignedPageEnvironment}
+                    originalLeftCount={environments?.total_count}
+                    originalRightCount={environmentsOfWorkspace?.total_count}
                   />
-                }
-                emtyStateMessageLeft="No environments available"
-                emptyStateIconRight={
-                  <EnvironmentIcon
-                    height="5rem"
-                    width="5rem"
-                    fill="#808080"
-                    secondaryFill="#979797"
-                  />
-                }
-                emtyStateMessageRight="No environments assigned"
-                assignablePage={handleAssignablePageEnvironment}
-                assignedPage={handleAssignedPageEnvironment}
-                originalLeftCount={environments?.total_count}
-                originalRightCount={environmentsOfWorkspace?.total_count}
-                leftPermission={CAN(
-                  keys.ASSIGN_ENVIRONMENT_TO_WORKSPACE.action,
-                  keys.ASSIGN_ENVIRONMENT_TO_WORKSPACE.subject,
-                )}
-                rightPermission={CAN(
-                  keys.REMOVE_ENVIRONMENT_FROM_WORKSPACE.action,
-                  keys.REMOVE_ENVIRONMENT_FROM_WORKSPACE.subject,
-                )}
-              />
-            }
-            action={handleAssignEnvironments}
-            buttonTitle="Save"
-            disabled={disableTranferButton}
-            leftHeaderIcon={<EnvironmentIcon height="2rem" width="2rem" fill="white" />}
-            helpText="Assign environment to workspace"
-            maxWidth="md"
-          />
+                </UsesSistent>
+              }
+              action={handleAssignEnvironments}
+              buttonTitle="Save"
+              disabled={disableTranferButton}
+              leftHeaderIcon={<EnvironmentIcon height="2rem" width="2rem" fill="white" />}
+              helpText="Assign environment to workspace"
+              maxWidth="md"
+            />
+          )}
           <GenericModal
             open={assignDesignModal}
             handleClose={handleAssignDesignModalClose}
             title={`Assign Designs to ${designAssignWorkspace.name}`}
             body={
-              <TransferList
-                name="Designs"
-                assignableData={designsData}
-                assignedData={handleAssignDesignsData}
-                originalAssignedData={workspaceDesignsData}
-                emptyStateIconLeft={<DesignsIcon height="5rem" width="5rem" />}
-                emtyStateMessageLeft="No designs available"
-                emptyStateIconRight={<DesignsIcon height="5rem" width="5rem" />}
-                emtyStateMessageRight="No designs assigned"
-                assignablePage={handleAssignablePageDesign}
-                assignedPage={handleAssignedPageDesign}
-                originalLeftCount={designs?.total_count}
-                originalRightCount={designsOfWorkspace?.total_count}
-              />
+              <UsesSistent>
+                <StyledTransferList
+                  name="Designs"
+                  assignableData={designsData}
+                  assignedData={handleAssignDesignsData}
+                  originalAssignedData={workspaceDesignsData}
+                  emptyStateIconLeft={<DesignsIcon height="5rem" width="5rem" />}
+                  emtyStateMessageLeft="No designs available"
+                  emptyStateIconRight={<DesignsIcon height="5rem" width="5rem" />}
+                  emtyStateMessageRight="No designs assigned"
+                  assignablePage={handleAssignablePageDesign}
+                  assignedPage={handleAssignedPageDesign}
+                  originalLeftCount={designs?.total_count}
+                  originalRightCount={designsOfWorkspace?.total_count}
+                />
+              </UsesSistent>
             }
             action={handleAssignDesigns}
             buttonTitle="Save"

diff --git a/ui/package-lock.json b/ui/package-lock.json