style: reduce form spacing

CS-SI · Feb 28, 2024 · d2f547f · d2f547f
1 parent 6fc06e7
commit d2f547f
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 32 deletions.
diff --git a/src/FormComponent.tsx b/src/FormComponent.tsx
@@ -27,7 +27,6 @@ import {
   CarbonTrashCan,
   CarbonAddFilled,
   CarbonCalendarAddAlt,
-  CarbonSettings,
   CarbonInformation
 } from './icones.js';
 import ReactTooltip from 'react-tooltip';
@@ -39,7 +38,6 @@ export interface IProps {
   saveFormValues: (formValue: IFormInput) => void;
   handleGenerateQuery: any;
   isNotebookCreated: any;
-  commands: any;
 }
 
 export interface IOptionTypeBase {
@@ -60,8 +58,7 @@ export const FormComponent: FC<IProps> = ({
   handleShowFeature,
   saveFormValues,
   handleGenerateQuery,
-  isNotebookCreated,
-  commands
+  isNotebookCreated
 }) => {
   const [productTypes, setProductTypes] = useState<IOptionTypeBase[]>();
   const [providers, setProviders] = useState<IOptionTypeBase[]>();
@@ -145,10 +142,6 @@ export const FormComponent: FC<IProps> = ({
     }
   };
 
-  const handleOpenSettings = (): void => {
-    commands.execute('settingeditor:open', { query: 'EODAG' });
-  };
-
   const loadProductTypesSuggestions = useFetchProduct();
   const loadProviderSuggestions = useFetchProvider();
 
@@ -382,24 +375,6 @@ export const FormComponent: FC<IProps> = ({
           </div>
         </div>
       </form>
-      <div>
-        <button
-          type="button"
-          className="jp-EodagWidget-settingsbutton"
-          data-for="eodag-setting"
-          data-tip="Eodag labextension settings"
-          onClick={handleOpenSettings}
-        >
-          <CarbonSettings height="20" width="20" />
-          <ReactTooltip
-            id="eodag-setting"
-            className="jp-Eodag-tooltip"
-            place="bottom"
-            type="dark"
-            effect="solid"
-          />
-        </button>
-      </div>
     </div>
   );
 };

diff --git a/src/browser.tsx b/src/browser.tsx
@@ -21,6 +21,9 @@ import { IFormInput } from './types';
 import { ServerConnection } from '@jupyterlab/services';
 import { EODAG_SETTINGS_ADDRESS } from './config';
 import { URLExt } from '@jupyterlab/coreutils';
+import { useFetchUserSettings } from './hooks/useFetchData';
+import { CarbonSettings, IcBaselineRefresh } from './icones';
+import ReactTooltip from 'react-tooltip';
 
 export interface IProps {
   tracker: INotebookTracker;
@@ -221,19 +224,66 @@ export class EodagBrowser extends React.Component<IProps, IState> {
     });
   };
 
+  handleOpenSettings = (): void => {
+    this.props.commands.execute('settingeditor:open', { query: 'EODAG' });
+  };
+
+  reloadUserSettings = () => {
+    useFetchUserSettings();
+  };
+
   render() {
     const { openDialog, features } = this.state;
     return (
       <div>
-        <header className="jp-EodagWidget-header">Products search</header>
+        <div className="jp-EodagWidget-header-wrapper">
+          <header className="jp-EodagWidget-header">Products search</header>
+          <div className="jp-EodagWidget-settings-wrapper">
+            <div>
+              <button
+                type="button"
+                className="jp-EodagWidget-settingsbutton"
+                data-for="eodag-setting"
+                data-tip="Reload eodag environment"
+                onClick={this.reloadUserSettings}
+              >
+                <IcBaselineRefresh height="20" width="20" />
+                <ReactTooltip
+                  id="eodag-setting"
+                  className="jp-Eodag-tooltip"
+                  place="bottom"
+                  type="dark"
+                  effect="solid"
+                />
+              </button>
+            </div>
+            <div>
+              <button
+                type="button"
+                className="jp-EodagWidget-settingsbutton"
+                data-for="eodag-setting"
+                data-tip="Eodag labextension settings"
+                onClick={this.handleOpenSettings}
+              >
+                <CarbonSettings height="20" width="20" />
+                <ReactTooltip
+                  id="eodag-setting"
+                  className="jp-Eodag-tooltip"
+                  place="bottom"
+                  type="dark"
+                  effect="solid"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
         <FormComponent
           isNotebookCreated={this.handleCurrentWidgetError}
           handleShowFeature={this.handleShowFeature}
           saveFormValues={(formValues: IFormInput) =>
             this.setState({ formValues })
           }
           handleGenerateQuery={this.handleGenerateQuery}
-          commands={this.props.commands}
         />
         <ModalComponent
           open={openDialog}

diff --git a/src/hooks/useFetchData.ts b/src/hooks/useFetchData.ts
@@ -97,4 +97,25 @@ const useFetchProvider = () => {
   return fetchProvider;
 };
 
-export { fetchData, useFetchProduct, useFetchProvider };
+const useFetchUserSettings = async () => {
+  const serverSettings = ServerConnection.makeSettings();
+  const eodagServer = URLExt.join(
+    serverSettings.baseUrl,
+    `${EODAG_SERVER_ADRESS}`
+  );
+
+  try {
+    const response = await fetch(URLExt.join(eodagServer, 'reload'), {
+      credentials: 'same-origin'
+    });
+    if (response.status >= 400) {
+      throw new Error('Bad response from server');
+    }
+  } catch (error) {
+    showErrorMessage(
+      `Unable to contact the EODAG server. Are you sure the address is ${eodagServer}/ ?`,
+      {}
+    );
+  }
+};
+export { fetchData, useFetchProduct, useFetchProvider, useFetchUserSettings };
diff --git a/src/icones.tsx b/src/icones.tsx
@@ -118,3 +118,20 @@ export const CarbonSettings = (props: ISVGProps) => {
     </svg>
   );
 };
+
+export const IcBaselineRefresh = (props: ISVGProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z"
+      ></path>
+    </svg>
+  );
+};
diff --git a/style/base.css b/style/base.css
@@ -18,6 +18,11 @@
   padding: 5px;
 }
 
+.jp-EodagWidget-header-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
 .jp-EodagWidget-header {
   border-bottom: var(--jp-border-width) solid var(--jp-border-color2);
   flex: 0 0 auto;
@@ -29,6 +34,15 @@
   text-transform: uppercase;
 }
 
+.jp-EodagWidget-settings-wrapper {
+  display: flex;
+  flex-direction: row;
+}
+
+.jp-EodagWidget-settings-wrapper button {
+  padding: 1px 4px;
+}
+
 .jp-EodagWidget-wrapper {
   display: flex;
   height: 100%;
@@ -79,7 +93,7 @@
 .jp-EodagWidget .jp-EodagWidget-form .jp-EodagWidget-buttons {
   display: flex;
   justify-content: center;
-  margin-top: 50px;
+  margin-top: 1em;
 }
 
 .jp-EodagWidget-buttons-button__disabled {
@@ -135,9 +149,7 @@
 }
 .jp-EodagWidget .jp-EodagWidget-form .jp-EodagWidget-field {
   padding: 0 10px;
-
   max-width: 450px;
-  margin: 10px auto;
 }
 .jp-EodagWidget .jp-EodagWidget-form .jp-EodagWidget-field fieldset {
   margin-top: 1.5em;