added tooltip component

Author: fstasi

arduino-ide-extension/package.json

@@ -29,11 +29,12 @@
     "@theia/monaco": "next",
     "@theia/navigator": "next",
     "@theia/outline-view": "next",
-    "@theia/preferences": "next",
     "@theia/output": "next",
+    "@theia/preferences": "next",
     "@theia/search-in-workspace": "next",
     "@theia/terminal": "next",
     "@theia/workspace": "next",
+    "@tippyjs/react": "^4.2.5",
     "@types/atob": "^2.1.2",
     "@types/auth0-js": "^9.14.0",
     "@types/btoa": "^1.2.3",

arduino-ide-extension/src/browser/dialogs/certificate-uploader/certificate-add-new.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+
+export const CertificateAddComponent = ({
+  addCertificate,
+}: {
+  addCertificate: (cert: string) => void;
+}): React.ReactElement => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = React.useCallback((event) => {
+    setValue(event.target.value);
+  }, []);
+
+  return (
+    <form
+      className="certificate-add"
+      onSubmit={(event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        addCertificate(value);
+        setValue('');
+      }}
+    >
+      <label>
+        <div>Add URL to fetch SSL certificate</div>
+        <input
+          className="theia-input"
+          placeholder="Enter URL"
+          type="text"
+          name="add"
+          onChange={handleChange}
+          value={value}
+        />
+      </label>
+    </form>
+  );
+};

arduino-ide-extension/src/browser/dialogs/certificate-uploader/certificate-uploader-component.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
+import Tippy from '@tippyjs/react';
 import { AvailableBoard } from '../../boards/boards-service-provider';
 import { CertificateListComponent } from './certificate-list';
 import { SelectBoardComponent } from './select-board-components';
+import { CertificateAddComponent } from './certificate-add-new';
 
 export const CertificateUploaderComponent = ({
   availableBoards,
   certificates,
-  // addCertificate,
+  addCertificate,
   updatableFqbns,
   uploadCertificates,
   openContextMenu,
@@ -26,6 +28,8 @@ export const CertificateUploaderComponent = ({
     'ok' | 'fail' | 'installing' | null
   >(null);
 
+  const [showAdd, setShowAdd] = React.useState(false);
+
   const [selectedCerts, setSelectedCerts] = React.useState<string[]>([]);
 
   const [selectedBoard, setSelectedBoard] =
@@ -68,9 +72,30 @@ export const CertificateUploaderComponent = ({
       <div className="dialogSection">
         <div className="dialogRow">
           <strong className="fl1">1. Select certificate to upload</strong>
-          {/* <button type="button" className="theia-button primary">
-            Add New
-          </button> */}
+          <Tippy
+            content={
+              <CertificateAddComponent
+                addCertificate={(cert) => {
+                  addCertificate(cert);
+                  setShowAdd(false);
+                }}
+              />
+            }
+            placement="bottom-end"
+            onClickOutside={() => setShowAdd(false)}
+            visible={showAdd}
+            interactive={true}
+          >
+            <button
+              type="button"
+              className="theia-button primary add-cert-btn"
+              onClick={() => {
+                showAdd ? setShowAdd(false) : setShowAdd(true);
+              }}
+            >
+              Add New <span className="fa fa-caret-down caret"></span>
+            </button>
+          </Tippy>
         </div>
         <div className="dialogRow">
           <CertificateListComponent

arduino-ide-extension/src/browser/style/certificate-uploader-dialog.css

@@ -27,7 +27,7 @@
   padding: 6px 10px 5px 10px
 }
 .certificate-uploader-dialog .certificate-list .certificate-row:hover {
-  background-color: var(--theia-list-hoverBackground);
+  background-color: var(--theia-list-activeSelectionBackground);
 }
 
 .certificate-uploader-dialog  .success {
@@ -40,4 +40,28 @@
 
 .certificate-uploader-dialog  .status-icon {
   margin-right: 10px;
+}
+
+.certificate-uploader-dialog .add-cert-btn {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.certificate-uploader-dialog .add-cert-btn .caret {
+  margin-left: 6px;
+}
+
+.certificate-add {
+  padding: 16px;
+  background-color: var(--theia-list-hoverBackground);
+  border-radius: 3px;
+  border: 1px solid #BDC7C7;
+}
+
+.certificate-add input {
+  margin-top: 12px;
+  padding: 0 12px;
+  width: 100%;
+  box-sizing: border-box;
+
 }

yarn.lock

@@ -1989,6 +1989,11 @@
     "@phosphor/signaling" "^1.3.1"
     "@phosphor/virtualdom" "^1.2.0"
 
+"@popperjs/core@^2.8.3":
+  version "2.9.3"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.9.3.tgz#8b68da1ebd7fc603999cf6ebee34a4899a14b88e"
+  integrity sha512-xDu17cEfh7Kid/d95kB6tZsLOmSWKCZKtprnhVepjsSaCij+lM3mItSJDuuHDMbCWTh8Ejmebwb+KONcCJ0eXQ==
+
 "@primer/octicons-react@^9.0.0":
   version "9.6.0"
   resolved "https://registry.yarnpkg.com/@primer/octicons-react/-/octicons-react-9.6.0.tgz#996f621cb063757a4985cd6b45e59ed00e3444bf"
@@ -2628,6 +2633,13 @@
     moment "2.24.0"
     valid-filename "^2.0.1"
 
+"@tippyjs/react@^4.2.5":
+  version "4.2.5"
+  resolved "https://registry.yarnpkg.com/@tippyjs/react/-/react-4.2.5.tgz#9b5837db93a1cac953962404df906aef1a18e80d"
+  integrity sha512-YBLgy+1zznBNbx4JOoOdFXWMLXjBh9hLPwRtq3s8RRdrez2l3tPBRt2m2909wZd9S1KUeKjOOYYsnitccI9I3A==
+  dependencies:
+    tippy.js "^6.3.1"
+
 "@types/anymatch@*":
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
@@ -15616,6 +15628,13 @@ timers-browserify@^2.0.4:
   dependencies:
     setimmediate "^1.0.4"
 
+tippy.js@^6.3.1:
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.1.tgz#3788a007be7015eee0fd589a66b98fb3f8f10181"
+  integrity sha512-JnFncCq+rF1dTURupoJ4yPie5Cof978inW6/4S6kmWV7LL9YOSEVMifED3KdrVPEG+Z/TFH2CDNJcQEfaeuQww==
+  dependencies:
+    "@popperjs/core" "^2.8.3"
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"