@orchestrator-ui/orchestrator-ui-components 3.6.0 → 3.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "3.6.0",
+    "version": "3.7.0",
     "license": "Apache-2.0",
     "description": "Library of UI Components used to display the workflow orchestrator frontend",
     "author": {

package/src/components/WfoForms/AutoFieldLoader.tsx

@@ -9,6 +9,7 @@ import {
     CustomerField,
     DateField,
     DividerField,
+    FileUploadField,
     ImsNodeIdField,
     ImsPortIdField,
     IpNetworkField,
@@ -85,6 +86,8 @@ export function autoFieldFunction(
                     return AcceptField;
                 case 'ipvanynetwork': // Deprecated
                     return IpNetworkField;
+                case 'file': // Deprecated
+                    return FileUploadField;
             }
             break;
     }

package/src/components/WfoForms/formFields/deprecated/FileUploadField.tsx

@@ -0,0 +1,151 @@
+/*
+ * Copyright 2024 SURF.
+ * 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.
+ *
+ */
+import React, { useState } from 'react';
+
+import { useTranslations } from 'next-intl';
+import { connectField, filterDOMProps } from 'uniforms';
+
+import { EuiFilePicker, EuiFormRow, EuiText } from '@elastic/eui';
+
+import { getCommonFormFieldStyles } from '@/components/WfoForms/formFields/commonStyles';
+import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
+import { useUploadFileMutation } from '@/rtk/endpoints/fileUpload';
+import { FieldProps } from '@/types';
+
+export type FileUploadProps = FieldProps<string>;
+
+function FileUpload({
+    id,
+    label,
+    description,
+    onChange,
+    error,
+    showInlineError,
+    errorMessage,
+    ...props
+}: FileUploadProps) {
+    const t = useTranslations('pydanticForms.widgets.fileUpload');
+    const { theme } = useOrchestratorTheme();
+    const [uploadFile, { isLoading, reset }] = useUploadFileMutation();
+    const [hasInValidFiletypes, setHasInValidFiletypes] = useState(false);
+    const [hasError, setHasError] = useState(false);
+    const [hasFileToBig, setHasFileToBig] = useState(false);
+
+    const { formRowStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles);
+
+    const {
+        allowed_file_types: allowedMimeTypes,
+        url,
+        filesize_limit: fileSizeLimit,
+    } = props.field;
+
+    const cimUrl = url.replace('/cim', '');
+
+    const resetErrors = () => {
+        setHasInValidFiletypes(false);
+        setHasError(false);
+        setHasFileToBig(false);
+    };
+
+    const getErrorText = (): string => {
+        if (hasInValidFiletypes) {
+            return t('invalidFiletype');
+        }
+        if (hasError) {
+            return t('errorUploading');
+        }
+        if (hasFileToBig) {
+            return t('fileToBig', { fileSizeLimit });
+        }
+        return '';
+    };
+
+    const handleUploadedFiles = (files: FileList | null) => {
+        const file = files?.item(0) || null;
+
+        if (!file) return;
+
+        const { type, size } = file;
+
+        if (allowedMimeTypes && !allowedMimeTypes.includes(type)) {
+            resetErrors();
+            setHasInValidFiletypes(true);
+            return;
+        } else if (size > fileSizeLimit) {
+            resetErrors();
+            setHasFileToBig(true);
+            return;
+        } else {
+            uploadFile({ url: cimUrl, file })
+                .then((response) => {
+                    if (response.error) {
+                        resetErrors();
+                        setHasError(true);
+                        return;
+                    } else {
+                        onChange(response.data.file_id);
+                        resetErrors();
+                    }
+                })
+                .catch((error) => {
+                    resetErrors();
+                    setHasError(true);
+                    console.error(error);
+                    return;
+                });
+            reset();
+        }
+    };
+
+    return (
+        <section {...filterDOMProps(props)}>
+            <EuiFormRow
+                css={formRowStyle}
+                label={label}
+                labelAppend={<EuiText size="m">{description}</EuiText>}
+                error={showInlineError ? errorMessage : false}
+                isInvalid={error}
+                id={id}
+                fullWidth
+            >
+                <>
+                    <EuiFilePicker
+                        onChange={handleUploadedFiles}
+                        isInvalid={
+                            hasError || hasInValidFiletypes || hasFileToBig
+                        }
+                        display="large"
+                        isLoading={isLoading}
+                        initialPromptText={t('initialPromptText')}
+                        multiple={false}
+                        accept={allowedMimeTypes}
+                    />
+                    <div
+                        css={{
+                            color: theme.colors.danger,
+                            marginTop: theme.size.base,
+                            marginLeft: theme.size.xs,
+                            fontWeight: theme.font.weight.semiBold,
+                        }}
+                    >
+                        {getErrorText()}
+                    </div>
+                </>
+            </EuiFormRow>
+        </section>
+    );
+}
+
+export const FileUploadField = connectField(FileUpload, { kind: 'leaf' });

package/src/components/WfoForms/formFields/deprecated/index.ts

@@ -9,5 +9,6 @@ export * from './IpPrefixTableFieldStyling';
 export * from './SplitPrefixStyling';
 export * from './TimestampField';
 export * from './VlanField';
+export * from './FileUploadField';
 export * from './types';
 export * from './utils';

package/src/components/WfoForms/formFields/index.ts

@@ -24,3 +24,4 @@ export * from './SubscriptionField';
 export * from './SummaryField';
 export * from './CustomerField';
 export * from './ConnectedSelectField';
+export * from './deprecated/FileUploadField';

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '3.6.0';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '3.7.0';

package/src/messages/en-GB.json

@@ -133,6 +133,12 @@
                 "selectNode": "Select node",
                 "selectPort": "Select port",
                 "selectNodeFirst": "Select a node first"
+            },
+            "fileUpload": {
+                "invalidFiletype": "Invalid filetype!",
+                "errorUploading": "Error uploading file!",
+                "fileToBig": "File to large. Maximum file size: {fileSizeLimit}",
+                "initialPromptText": "Select or drag and drop a file"
             }
         }
     },

package/src/messages/nl-NL.json

@@ -132,6 +132,12 @@
                 "selectNode": "Selecteer node",
                 "selectPort": "Selecteer poort",
                 "selectNodeFirst": "Selecteer eerst een node"
+            },
+            "fileUpload": {
+                "invalidFiletype": "Ongeldig bestandstype!",
+                "errorUploading": "Fout bij het upoaden van het bestand!",
+                "fileToBig": "Bestand te groot. Maximum bestand: {fileSizeLimit}",
+                "initialPromptText": "Selecteer een bestand of sleep het hierheen"
             }
         }
     },

package/src/rtk/endpoints/fileUpload.ts

@@ -0,0 +1,33 @@
+import { BaseQueryTypes, orchestratorApi } from '@/rtk';
+
+export interface FileUploadPayload {
+    url: string;
+    file: File;
+}
+
+interface FileUploadReturnValue {
+    file_id: string;
+    file_name: string;
+}
+
+const fileUploadApi = orchestratorApi.injectEndpoints({
+    endpoints: (build) => ({
+        uploadFile: build.mutation<FileUploadReturnValue, FileUploadPayload>({
+            query: ({ url, file }) => {
+                const formData = new FormData();
+                formData.append('file', file);
+                return {
+                    url,
+                    method: 'POST',
+                    body: formData,
+                };
+            },
+            extraOptions: {
+                baseQueryType: BaseQueryTypes.fetch,
+                apiName: 'cim',
+            },
+        }),
+    }),
+});
+
+export const { useUploadFileMutation } = fileUploadApi;