fix: command line input bug (#968)

* fix: token provided by cli or nebula.config.js file
qlik-oss · Oct 20, 2022 · 5907701 · 5907701
1 parent b005bfb
commit 5907701
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 11 deletions.
diff --git a/commands/serve/lib/webpack.serve.js b/commands/serve/lib/webpack.serve.js
@@ -159,6 +159,8 @@ module.exports = async ({
           enigma: enigmaConfig,
           clientId,
           webIntegrationId,
+          isClientIdProvided: Boolean(clientId),
+          isWebIntegrationIdProvided: Boolean(webIntegrationId),
           supernova: {
             name: snName,
             url: snUrl,

diff --git a/commands/serve/web/components/Hub/SelectEngine/ConnectionHistory.jsx b/commands/serve/web/components/Hub/SelectEngine/ConnectionHistory.jsx
@@ -10,15 +10,29 @@ import Typography from '@mui/material/Typography';
 
 import { goToApp } from '../../../utils';
 
-const ConnectionHistory = ({ items, onRemove }) => {
+const ConnectionHistory = ({ info, items, onRemove }) => {
   if (!items.length) return null;
 
+  const checkIfDisabled = (item) => {
+    if ((info.isClientIdProvided || info.isWebIntegrationIdProvided) && item.includes('localhost')) return true;
+    if (info.isClientIdProvided) {
+      if (item.includes('qlik-client-id')) return false;
+      return true;
+    }
+    if (info.isWebIntegrationIdProvided) {
+      if (item.includes('qlik-web-integration-id')) return false;
+      return true;
+    }
+
+    return false;
+  };
+
   return (
     <Box mb={2}>
       <Typography variant="h6">Previous connections</Typography>
       <List>
         {items.map((item) => (
-          <ListItem button key={item} component="a" onClick={() => goToApp(item)}>
+          <ListItem button key={item} component="a" onClick={() => goToApp(item)} disabled={checkIfDisabled(item)}>
             <ListItemText primary={item} />
             <ListItemSecondaryAction>
               <IconButton edge="end" onClick={() => onRemove(item)} size="large">

diff --git a/commands/serve/web/components/Hub/SelectEngine/ConnectionOptions.jsx b/commands/serve/web/components/Hub/SelectEngine/ConnectionOptions.jsx
@@ -10,11 +10,35 @@ const OptionsToConnect = [
   { id: 1, label: 'Web Integration Id', formFields: ['Engine WebSocket URL', 'Web Integration Id'] },
   { id: 2, label: 'Client Id', formFields: ['Engine WebSocket URL', 'Client Id'] },
 ];
+const detectDefaultStep = (info) => {
+  if (info.isWebIntegrationIdProvided) return OptionsToConnect.findIndex((x) => x.label === 'Web Integration Id');
+  if (info.isClientIdProvided) return OptionsToConnect.findIndex((x) => x.label === 'Client Id');
+  return 0;
+};
 
 export default function ConnectionOptions({ info, error }) {
-  const [tabIdx, setTabIdx] = useState(0);
+  const [tabIdx, setTabIdx] = useState(detectDefaultStep(info));
   const handleChange = (_, idx) => setTabIdx(idx);
 
+  const checkIfTabDisabled = ({ label }) => {
+    const labelKey = label
+      .split(' ')
+      .map((x) => x.toLowerCase())
+      .join('-');
+
+    if (info.isWebIntegrationIdProvided) {
+      if (labelKey === 'web-integration-id') return false;
+      return true;
+    }
+
+    if (info.isClientIdProvided) {
+      if (labelKey === 'client-id') return false;
+      return true;
+    }
+
+    return false;
+  };
+
   return (
     <Box>
       <Typography variant="h6" gutterBottom>
@@ -24,14 +48,19 @@ export default function ConnectionOptions({ info, error }) {
         <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
           <Tabs value={tabIdx} onChange={handleChange} aria-label="basic tabs example">
             {OptionsToConnect.map(({ id, label }) => (
-              <Tab key={id} label={label} />
+              <Tab key={id} label={label} disabled={checkIfTabDisabled({ label })} />
             ))}
           </Tabs>
         </Box>
 
         {OptionsToConnect.map(({ id, formFields }) => (
           <TabPanel tabIdx={tabIdx} idx={id} key={id}>
-            <FormManager info={info} fields={formFields} error={error} />
+            <FormManager
+              info={info}
+              error={error}
+              fields={formFields}
+              isCredentialProvided={info.isWebIntegrationIdProvided || info.isClientIdProvided}
+            />
           </TabPanel>
         ))}
       </Box>

diff --git a/commands/serve/web/components/Hub/SelectEngine/FormManager.jsx b/commands/serve/web/components/Hub/SelectEngine/FormManager.jsx
@@ -1,12 +1,12 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import OutlinedInput from '@mui/material/OutlinedInput';
 import Grid from '@mui/material/Grid';
 import Button from '@mui/material/Button';
 import { goToApp } from '../../../utils';
 
 import Error from './Error';
 
-export default function FormManager({ info, fields, error }) {
+export default function FormManager({ info, fields, error, isCredentialProvided }) {
   const [inputs, setInputs] = useState({});
 
   const handleUpdateInputs = (evt) => {
@@ -24,7 +24,19 @@ export default function FormManager({ info, fields, error }) {
     goToApp(url.toString().replace('?', '&'));
   };
 
-  const isBtnDisabled = Object.entries(inputs).length !== fields.length || Object.values(inputs).some((x) => !x);
+  const isBtnDisabled = useMemo(() => {
+    if (isCredentialProvided) {
+      if (inputs['engine-websocket-url']) return false;
+      return true;
+    }
+
+    return Object.entries(inputs).length !== fields.length || Object.values(inputs).some((x) => !x);
+  }, [inputs, fields, isCredentialProvided]);
+
+  const getFieldPlaceHolder = (field) => {
+    if (isCredentialProvided) return `You have provided "${field}" through cli or nebula.config.js file already!`;
+    return field;
+  };
 
   return (
     <form onSubmit={handleOnSubmit}>
@@ -34,12 +46,13 @@ export default function FormManager({ info, fields, error }) {
             <OutlinedInput
               fullWidth
               autoFocus={i === 0}
+              disabled={isCredentialProvided && i === 1}
               name={field
                 .split(' ')
                 .map((x) => x.toLowerCase())
                 .join('-')}
-              placeholder={field}
               error={info.invalid}
+              placeholder={i === 0 ? field : getFieldPlaceHolder(field)}
               onChange={(evt) => handleUpdateInputs(evt)}
             />
           </Grid>

diff --git a/commands/serve/web/components/Hub/SelectEngine/SelectEngine.jsx b/commands/serve/web/components/Hub/SelectEngine/SelectEngine.jsx
@@ -40,7 +40,7 @@ const SelectEngine = ({ info, error }) => {
         </Grid>
       </Grid>
 
-      <ConnectionHistory items={items} onRemove={onRemove} />
+      <ConnectionHistory info={info} items={items} onRemove={onRemove} />
       <ConnectionOptions info={info} error={error} />
       <ConnectionGuid showGuid={showGuid} />
     </ContentWrapper>

diff --git a/commands/serve/web/hooks/useConnection.js b/commands/serve/web/hooks/useConnection.js
@@ -48,7 +48,6 @@ export const handleConnectionSuccess = async ({
   setTreatAsDesktop,
   setError,
 }) => {
-  console.log({ result });
   handleSessionNotification({ result, setError, setGlobal });
   setGlobal(result);
   if (!result.getDocList) return;