single line code is now shown in better colors and font

Couchbase-Ecosystem · Jan 23, 2024 · 7d086e3 · 7d086e3
1 parent 7cc17cc
commit 7d086e3
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 19 deletions.
diff --git a/src/commands/iq/iqLoginhandler.ts b/src/commands/iq/iqLoginhandler.ts
@@ -75,7 +75,7 @@ export const verifyOrganization = async (orgId: string): Promise<any> => {
         };
     }
     const orgDetails = await iqRestApiService.getOrganizationDetails(jwtToken,orgId);
-    if(orgDetails.iq.enabled === false) {
+    if(!orgDetails.iq || orgDetails.iq.enabled === false) {
         return {
             isOrgVerified: false,
             errorMessage: `Couchbase iQ is not enabled for this organization, Please enable it on <a href="cloud.couchbase.com"> cloud.couchbase.com  </a>`

diff --git a/src/reactViews/iq/bootstrap.tsx b/src/reactViews/iq/bootstrap.tsx
@@ -17,7 +17,7 @@ export const App: React.FC = () => {
   const showPageRef = React.useRef(<></>);
   showPageRef.current = showPage;
   const [showErrorModal, setShowErrorModal] = React.useState(false);
-  const [errorMessage, setErrorMessage] = React.useState("");
+  const [errorMessage, setErrorMessage] = React.useState(<></>);
 
   React.useEffect(()=>{
     showPageRef.current = showPage;
@@ -108,7 +108,7 @@ export const App: React.FC = () => {
       {isLoading && <LoadingScreen />}
       <Modal
         isOpen={showErrorModal}
-        content={errorMessage || ""}
+        content={errorMessage || <></>}
         onClose={() => {
           setShowErrorModal(false);
           setShowPage(<Login  setIsLoading={setIsLoading}/>);

diff --git a/src/reactViews/iq/pages/chatscreen/IqChat.scss b/src/reactViews/iq/pages/chatscreen/IqChat.scss
@@ -45,11 +45,22 @@
   border-top: solid 1px var(--vscode-settings-sashBorder) !important;
 }
 
+.single-line-code {
+  display: inline;
+  white-space: pre-wrap;
+  opacity: 0.7;
+  background-color: #e5ffff80;
+  color: rgb(172, 53, 33);
+  font-family: "Mono Sans", "Consolas", "Monaco", "Lucida Console",
+    "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
+    "Courier New";
+}
+
 .multiline-code-container {
-  .multiline-code{
+  .multiline-code {
     margin-top: 0 !important;
   }
-  
+
   .multiline-code-header {
     display: flex;
     justify-content: space-between;
@@ -78,7 +89,7 @@
   justify-content: flex-end;
   align-items: center;
   padding: 5px 10px;
-  background-color: rgba(198,227,250,0.8);
+  background-color: rgba(198, 227, 250, 0.8);
   border-bottom-right-radius: 0.7em;
   margin: 0;
 }
@@ -90,13 +101,13 @@
 .iconButton {
   cursor: pointer;
   margin: 0 5px 3px 5px;
-  font-size: 1.5rem; 
+  font-size: 1.5rem;
   background: transparent !important;
   padding: 2px 0 0 0;
   height: 25px;
   width: 25px;
 
-  :hover{
+  :hover {
     background-color: transparent !important;
     opacity: 0.7;
   }
@@ -127,9 +138,8 @@
   .chat-over-message {
     text-align: center;
   }
-  .chat-over-newchat-button{
+  .chat-over-newchat-button {
     display: flex;
-    margin: 15px auto 5px auto
-
+    margin: 15px auto 5px auto;
   }
-}
+}
diff --git a/src/reactViews/iq/pages/chatscreen/IqChat.tsx b/src/reactViews/iq/pages/chatscreen/IqChat.tsx
@@ -216,7 +216,7 @@ const IqChat = ({ org, setIsLoading }) => {
     return (
       <div className="multiline-code-container">
         <div className="multiline-code-header">
-          <div className="code-language-info">{language.toUpperCase()}</div>
+          <div className="code-language-info">{language === "n1ql" ? "SQL++" : language.toUpperCase()}</div>
           <div className="code-actions">
           <Tooltip id="my-tooltip" />
             {language === "n1ql" && (
@@ -454,16 +454,21 @@ const IqChat = ({ org, setIsLoading }) => {
                                 const match = /language-(\w+)/.exec(
                                   className || ""
                                 );
-                                return match ? (
+                                const code = String(children).replace(/\n$/, "");
+                                const isMultiline = code.includes('\n');
+                                const language = match ? match[1] : isMultiline ? "n1ql" : "plaintextCode";
+                                return language === "plaintextCode" ? 
+                                (
+                                  <code className={className + " single-line-code"} {...props}>
+                                    {children}
+                                  </code>
+                                )
+                                : (
                                   <SyntaxHighlight
-                                    language={match[1]}
+                                    language={language}
                                     value={String(children).replace(/\n$/, "")}
                                     {...props}
                                   />
-                                ) : (
-                                  <code className={className} {...props}>
-                                    {children}
-                                  </code>
                                 );
                               },
                             }}