@opengeoweb/knmi-components 14.5.1 → 15.0.0

package/index.esm.js

@@ -1,12 +1,20 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Grid, Box, FormControlLabel, Radio, MenuItem, Checkbox, Button } from '@mui/material';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { LinearProgress, Box, Grid, FormControlLabel, Radio, MenuItem, Checkbox, Button } from '@mui/material';
 import { useFormContext } from 'react-hook-form';
 import { FORM_FIELDS_NAMESPACE, ReactHookFormTextField, ReactHookFormNumberField, isLatitude, isLongitude, isValidMin, isValidMax, ReactHookFormDateTime, isXHoursBefore, isXHoursAfter, ReactHookFormRadioGroup, ReactHookFormSelect, ReactHookFormFormControl, ReactHookFormProvider, defaultFormOptions } from '@opengeoweb/form-fields';
-import { SHARED_NAMESPACE, dateUtils, usePreventBrowserClose } from '@opengeoweb/shared';
+import { sessionStorageProvider, SHARED_NAMESPACE, dateUtils, usePreventBrowserClose, AlertBanner, ErrorBoundary } from '@opengeoweb/shared';
+import { useMutation } from '@tanstack/react-query';
+import { useDispatch } from 'react-redux';
+import { useAuthenticationContext } from '@opengeoweb/authentication';
+import { snackbarActions, snackbarTypes } from '@opengeoweb/snackbar';
+import { getHeaders, handleResponse } from '@opengeoweb/api';
 import 'i18next';
 import { useTranslation } from 'react-i18next';
 
 var en = {
+	"error-auth-login": "This feature is protected by authentication. Please log in to proceed",
+	"error-publish": "Something went wrong while publishing. Please try again.",
+	"message-publish-success": "Product was published successfully",
 	"clear-form": "Clear",
 	"publish-form": "Publish",
 	"reference-name": "Reference name",
@@ -31,6 +39,9 @@ var fi = {
 var no = {
 };
 var nl = {
+	"error-auth-login": "Deze functie wordt beschermd door authenticatie. Log in om verder te gaan",
+	"error-publish": "Er is iets mis gegaan met publiceren. Probeer het opnieuw.",
+	"message-publish-success": "Product is succesvol gepubliceerd",
 	"clear-form": "Wissen",
 	"publish-form": "Publiceren",
 	"reference-name": "Referentie naam",
@@ -57,6 +68,31 @@ var knmicomponentTranslations = {
 	nl: nl
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2026 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2026 - Finnish Meteorological Institute (FMI)
+ * Copyright 2026 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+const config = sessionStorageProvider.getConfig();
+const publisherBaseUrl = config.GW_KNMI_PUBLISHER_BASE_URL || '';
+const publishProduct = async (auth, data) => fetch(`${publisherBaseUrl}/publish`, {
+  headers: getHeaders(auth),
+  method: 'POST',
+  body: JSON.stringify(data)
+}).then(handleResponse);
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -78,6 +114,52 @@ const KNMICOMPONENTS_NAMESPACE = 'KNMIComponents';
 const ns = [KNMICOMPONENTS_NAMESPACE, SHARED_NAMESPACE, FORM_FIELDS_NAMESPACE];
 const useKNMIComponentsTranslation = () => useTranslation(ns);
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2026 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2026 - Finnish Meteorological Institute (FMI)
+ * Copyright 2026 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+const usePublishProduct = () => {
+  const {
+    auth
+  } = useAuthenticationContext();
+  const {
+    t
+  } = useKNMIComponentsTranslation();
+  const dispatch = useDispatch();
+  return useMutation({
+    mutationFn: async ({
+      data
+    }) => {
+      if (!auth) {
+        throw new Error('Authentication context not found');
+      }
+      return publishProduct(auth, data);
+    },
+    onSuccess: async (_data, {
+      clearForm
+    }) => {
+      dispatch(snackbarActions.openSnackbar({
+        type: snackbarTypes.SnackbarMessageType.TRANSLATABLE_MESSAGE,
+        key: t('message-publish-success')
+      }));
+      clearForm();
+    }
+  });
+};
+
 const formStyles = {
   padding: '32px 16px',
   '.MuiSelect-select.MuiInputBase-input.MuiFilledInput-input': {
@@ -128,9 +210,7 @@ const generateDefaultValues = () => {
     spatialUncertainty: false
   };
 };
-const Form = ({
-  onPublish
-}) => {
+const Form = () => {
   const {
     t
   } = useKNMIComponentsTranslation();
@@ -147,25 +227,45 @@ const Form = ({
   } = formState;
   const isDirty = Object.keys(dirtyFields).length > 0;
   usePreventBrowserClose(isDirty);
+  const {
+    mutate: publishProduct,
+    error: publishError,
+    isPending: isPublishing
+  } = usePublishProduct();
   const handleSendForm = () => {
     void handleSubmit(data => {
-      onPublish(data);
-      // eslint-disable-next-line no-console
-      console.log(data);
-      handleClearForm();
+      publishProduct({
+        data: data,
+        clearForm: handleClearForm
+      });
     })();
   };
   const handleClearForm = () => {
     reset(generateDefaultValues());
   };
   const spatialUncertainty = watch('spatialUncertainty');
-  return jsx("form", {
+  return jsxs("form", {
     "data-testid": "trajks-form",
     style: {
       height: '100%',
       overflowY: 'auto'
     },
-    children: jsxs(Grid, {
+    children: [isPublishing ? jsx(LinearProgress, {
+      color: "secondary",
+      sx: {
+        position: 'absolute',
+        width: '100%'
+      }
+    }) : null, publishError ? jsx(Box, {
+      sx: {
+        width: '100%'
+      },
+      children: jsx(AlertBanner, {
+        info: publishError.message,
+        shouldClose: true,
+        title: t('error-publish')
+      })
+    }) : null, jsxs(Grid, {
       container: true,
       spacing: 3,
       sx: formStyles,
@@ -352,7 +452,7 @@ const Form = ({
           })
         }), jsx(Grid, {
           children: jsx(Button, {
-            disabled: !isValid,
+            disabled: !isValid || isPublishing,
             onClick: handleSendForm,
             size: "small",
             sx: {
@@ -364,7 +464,7 @@ const Form = ({
           })
         })]
       })]
-    })
+    })]
   });
 };
 const TrajksForm = props => {
@@ -379,29 +479,34 @@ const TrajksForm = props => {
   });
 };
 
-const TRAJKS_COMPONENT_TYPE = 'TrajksModule';
-const trajksViewPreset = {
-  id: 'TrajksForm',
-  title: 'Trajks form',
-  scope: 'system',
-  abstract: '',
-  keywords: 'TrajksForm',
-  initialProps: {},
-  componentType: TRAJKS_COMPONENT_TYPE
+const TrajksFormWrapper = () => {
+  const {
+    t
+  } = useKNMIComponentsTranslation();
+  const {
+    isLoggedIn
+  } = useAuthenticationContext();
+  if (!isLoggedIn) {
+    return jsx(AlertBanner, {
+      title: t('error-auth-login')
+    });
+  }
+  return jsx(ErrorBoundary, {
+    children: jsx(TrajksForm, {})
+  });
 };
+
+const TRAJKS_COMPONENT_TYPE = 'TrajksModule';
 const componentsLookUp = payload => {
   const {
     componentType
   } = payload;
   switch (componentType) {
-    case trajksViewPreset.componentType:
-      // TODO: update this component after backend is ready
-      return jsx(TrajksForm, {
-        onPublish: () => {}
-      });
+    case TRAJKS_COMPONENT_TYPE:
+      return jsx(TrajksFormWrapper, {});
     default:
       return null;
   }
 };
 
-export { Form, KNMICOMPONENTS_NAMESPACE, TrajksForm, componentsLookUp, generateDefaultValues, knmicomponentTranslations as knmiComponentTranslations, trajksViewPreset };
+export { Form, KNMICOMPONENTS_NAMESPACE, TrajksForm, componentsLookUp, generateDefaultValues, knmicomponentTranslations as knmiComponentTranslations };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/knmi-components",
-  "version": "14.5.1",
+  "version": "15.0.0",
   "description": "GeoWeb knmi-components library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -8,13 +8,18 @@
     "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
   },
   "dependencies": {
-    "@opengeoweb/form-fields": "14.5.1",
+    "@opengeoweb/form-fields": "15.0.0",
     "react-hook-form": "^7.61.1",
     "@mui/material": "^7.2.0",
-    "@opengeoweb/shared": "14.5.1",
-    "@opengeoweb/theme": "14.5.1",
+    "@opengeoweb/shared": "15.0.0",
+    "@opengeoweb/theme": "15.0.0",
     "i18next": "^25.3.2",
-    "react-i18next": "^15.1.1"
+    "react-i18next": "^15.1.1",
+    "@opengeoweb/api": "15.0.0",
+    "@opengeoweb/authentication": "15.0.0",
+    "@tanstack/react-query": "^5.85.5",
+    "react-redux": "^9.2.0",
+    "@opengeoweb/snackbar": "15.0.0"
   },
   "devDependencies": {
     "eslint-plugin-storybook": "9.0.17"

package/src/lib/api/api.d.ts

@@ -0,0 +1,3 @@
+import type { Credentials } from '@opengeoweb/authentication';
+import type { TrajksFormValues } from '../components/Trajks';
+export declare const publishProduct: (auth: Credentials, data: TrajksFormValues) => Promise<Headers | null>;

package/src/lib/api/fakeApi.d.ts

@@ -0,0 +1 @@
+export declare const requestHandlers: import("msw").HttpHandler[];

package/src/lib/api/hooks.d.ts

@@ -0,0 +1,9 @@
+import type { UseMutationResult } from '@tanstack/react-query';
+import type { TrajksFormValues } from '../components/Trajks';
+type MutationReturnType<T> = UseMutationResult<Headers | null, Error, T>;
+interface PublishProductProps {
+    data: TrajksFormValues;
+    clearForm: () => void;
+}
+export declare const usePublishProduct: () => MutationReturnType<PublishProductProps>;
+export {};

package/src/lib/components/ComponentsLookup/ComponentsLookUp.d.ts

@@ -1,13 +1,4 @@
 declare const TRAJKS_COMPONENT_TYPE: "TrajksModule";
-export declare const trajksViewPreset: {
-    id: string;
-    title: string;
-    scope: string;
-    abstract: string;
-    keywords: string;
-    initialProps: {};
-    componentType: "TrajksModule";
-};
 export type TrajksComponentType = typeof TRAJKS_COMPONENT_TYPE;
 export interface ComponentsLookUpPayload {
     componentType: TrajksComponentType;

package/src/lib/components/Trajks/TrajksForm.d.ts

@@ -1,4 +1,4 @@
-interface TrajksFormValues {
+export interface TrajksFormValues {
     referenceName: string;
     lat: number | string;
     lon: number | string;
@@ -10,9 +10,5 @@ interface TrajksFormValues {
     spatialUncertainty: boolean;
 }
 export declare const generateDefaultValues: () => TrajksFormValues;
-interface FormType {
-    onPublish: (data: TrajksFormValues) => void;
-}
-export declare const Form: ({ onPublish }: FormType) => React.JSX.Element;
-export declare const TrajksForm: React.FC<FormType>;
-export {};
+export declare const Form: () => React.JSX.Element;
+export declare const TrajksForm: React.FC;

package/src/lib/components/Trajks/TrajksFormWrapper.d.ts

@@ -0,0 +1 @@
+export declare const TrajksFormWrapper: React.FC;

package/src/lib/components/Trajks/TrajksFormWrapper.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/src/lib/components/Trajks/TrajksFormWrapper.stories.d.ts

@@ -0,0 +1,9 @@
+import type { StoryObj } from '@storybook/react-webpack5';
+import { TrajksFormWrapper } from './TrajksFormWrapper';
+type Story = StoryObj<typeof TrajksFormWrapper>;
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Demo: Story;
+export declare const DemoError: Story;

package/src/lib/utils/Providers.d.ts

@@ -1,9 +1,5 @@
 import type { Theme } from '@mui/material';
 import type { UseFormProps } from 'react-hook-form';
-export declare const KNMIComponentsThemeWrapper: React.FC<{
-    children: React.ReactNode;
-    theme?: Theme;
-}>;
 interface KNMIComponentsThemeFormProviderProps {
     children: React.ReactNode;
     options?: UseFormProps;