fix(hubble): harden frontend validation and update license dependencies

hugegraph-dist/release-docs/LICENSE

@@ -484,6 +484,7 @@ See licenses/ for text of these licenses.
 	hugegraph-hubble/ui/favicon.ico
 	(Apache License, Version 2.0) * kotlin-stdlib (org.jetbrains.kotlin:kotlin-stdlib:1.6.20 - https://github.com/JetBrains/kotlin)
 	(Apache License, Version 2.0) * kotlin-stdlib-common (org.jetbrains.kotlin:kotlin-stdlib-common:1.5.31 - https://github.com/JetBrains/kotlin)
+	(Apache License, Version 2.0) * kotlin-stdlib-common (org.jetbrains.kotlin:kotlin-stdlib-common:1.6.20 - https://github.com/JetBrains/kotlin)
 	(Apache License, Version 2.0) * kotlin-stdlib-jdk7 (org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.2.71 - https://github.com/JetBrains/kotlin)
 	(Apache License, Version 2.0) * kotlin-stdlib-jdk7 (org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.6.10 - https://github.com/JetBrains/kotlin)
 	(Apache License, Version 2.0) * kotlin-stdlib-jdk8 (org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.2.71 - https://github.com/JetBrains/kotlin)

hugegraph-dist/scripts/dependency/known-dependencies.txt

@@ -348,6 +348,7 @@ kerby-xdr-1.0.1.jar
 kerby-xdr-2.0.0.jar
 kotlin-stdlib-1.6.20.jar
 kotlin-stdlib-common-1.5.31.jar
+kotlin-stdlib-common-1.6.20.jar
 kotlin-stdlib-jdk7-1.2.71.jar
 kotlin-stdlib-jdk7-1.6.10.jar
 kotlin-stdlib-jdk8-1.2.71.jar

hugegraph-hubble/hubble-fe/src/components/FavoriteNameInput/index.js

@@ -0,0 +1,46 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You 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 {Input} from 'antd';
+import {useTranslation} from 'react-i18next';
+
+import {isValidFavoriteName} from '../../utils/rules';
+
+const FavoriteNameInput = props => {
+    const {t} = useTranslation();
+    const {value, ...inputProps} = props;
+    const invalid = value && !isValidFavoriteName(value);
+
+    return (
+        <>
+            <Input
+                {...inputProps}
+                value={value}
+                showCount
+                maxLength={48}
+                status={invalid ? 'error' : undefined}
+            />
+            {invalid && (
+                <div role='alert' style={{color: '#ff4d4f', fontSize: '12px'}}>
+                    {t('common.validation.favorite_name_rule')}
+                </div>
+            )}
+        </>
+    );
+};
+
+export default FavoriteNameInput;

hugegraph-hubble/hubble-fe/src/components/FavoriteNameInput/index.test.js

@@ -0,0 +1,44 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You 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 {fireEvent, render, screen} from '@testing-library/react';
+import {useCallback, useState} from 'react';
+
+import FavoriteNameInput from './index';
+
+jest.mock('react-i18next', () => ({
+    initReactI18next: {type: '3rdParty', init: jest.fn()},
+    useTranslation: () => ({t: key => key}),
+}));
+
+test('explains invalid favorite names and clears the error for valid names', () => {
+    const FavoriteNameEditor = () => {
+        const [name, setName] = useState('');
+        const onChange = useCallback(e => setName(e.target.value), []);
+        return <FavoriteNameInput value={name} onChange={onChange} />;
+    };
+    render(<FavoriteNameEditor />);
+
+    const input = screen.getByRole('textbox');
+    fireEvent.change(input, {target: {value: 'query-name'}});
+    expect(screen.getByRole('alert')).toHaveTextContent(
+        'common.validation.favorite_name_rule'
+    );
+
+    fireEvent.change(input, {target: {value: 'query_name'}});
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+});

hugegraph-hubble/hubble-fe/src/i18n/resources/en-US/components/common.json

@@ -27,6 +27,7 @@
       "normal_name_rule": "Use Chinese characters, letters, numbers, or underscores only, up to 20 characters",
       "jdbc_rule": "Enter a valid JDBC URL, for example: jdbc:mysql://127.0.0.1:3306/db_name",
       "account_name_rule": "Account name must be within 16 characters and cannot start or end with an underscore",
+      "favorite_name_rule": "Use Chinese characters, letters, numbers, or underscores only, up to 48 characters",
       "invalid_data_format": "Invalid data format"
     }
   },

hugegraph-hubble/hubble-fe/src/i18n/resources/zh-CN/components/common.json

@@ -27,6 +27,7 @@
       "normal_name_rule": "只能包含中文、字母、数字、_, 不能超过20个字符",
       "jdbc_rule": "请输入正确的jdbc url, 例如：jdbc:mysql://127.0.0.1:3306/db_name",
       "account_name_rule": "账号名不超过16个字符，且不能以下划线开始和结尾",
+      "favorite_name_rule": "只能包含中文、字母、数字、_, 不能超过48个字符",
       "invalid_data_format": "非法的数据格式"
     }
   },

hugegraph-hubble/hubble-fe/src/modules/algorithm/LogsDetail/ExecuteLog/index.js

@@ -22,8 +22,10 @@
 
 import React, {useState, useCallback} from 'react';
 import {useTranslation} from 'react-i18next';
-import {Button, Table, Space, Tag, Input, Popconfirm} from 'antd';
+import {Button, Table, Space, Tag, Popconfirm} from 'antd';
 import ExecutionContent from '../../../../components/ExecutionContent';
+import FavoriteNameInput from '../../../../components/FavoriteNameInput';
+import {isValidFavoriteName} from '../../../../utils/rules';
 import c from './index.module.scss';
 
 const EXECUTE_TYPE_KEY = {
@@ -67,17 +69,14 @@ const ExecuteLog = props => {
     } = props;
 
     const [favoriteName, setFavoriteName] = useState();
-    const [disabledFavorite, setDisabledFavorite]  = useState(true);
 
     const onFavoraiteName = useCallback(
         e => {
             setFavoriteName(e.target.value);
-            e.target.value ? setDisabledFavorite(false) : setDisabledFavorite(true);
         }, []);
 
     const onFavoriteCard = useCallback(() => {
         setFavoriteName('');
-        setDisabledFavorite(true);
     }, []);
 
     const updateAddCollection = useCallback(
@@ -97,11 +96,9 @@ const ExecuteLog = props => {
             <div style={{marginBottom: '16px'}}>
                 {t('analysis.logs.favorite_statement')}
             </div>
-            <Input
+            <FavoriteNameInput
                 style={{marginBottom: '18px'}}
                 placeholder={t('analysis.logs.favorite_name_placeholder')}
-                showCount
-                maxLength={48}
                 value={favoriteName}
                 onChange={onFavoraiteName}
             />
@@ -169,7 +166,7 @@ const ExecuteLog = props => {
                             placement="left"
                             title={favoriteContent(rowData)}
                             onConfirm={createValueHandler(onAddFavorite, rowData.content)}
-                            okButtonProps={{disabled: disabledFavorite}}
+                            okButtonProps={{disabled: !isValidFavoriteName(favoriteName)}}
                             okText={t('analysis.logs.action.favorite')}
                             cancelText={t('common.action.cancel')}
                         >

hugegraph-hubble/hubble-fe/src/modules/algorithm/LogsDetail/Favorite/index.js

@@ -25,6 +25,8 @@ import {useTranslation} from 'react-i18next';
 import Highlighter from 'react-highlight-words';
 import {Button, Table, Input, Popconfirm, Modal} from 'antd';
 import ExecutionContent from '../../../../components/ExecutionContent';
+import FavoriteNameInput from '../../../../components/FavoriteNameInput';
+import {isValidFavoriteName} from '../../../../utils/rules';
 import c from './index.module.scss';
 
 const createValueHandler = (handler, value) => () => handler(value);
@@ -48,7 +50,6 @@ const Favorite = props => {
     const [favoriteName, setFavoriteName] = useState();
     const [searchCache, setSearchCache] = useState('');
     const [search, setSearch] = useState('');
-    const [isDisabledName, setDisabledName]  = useState(false);
 
     const changeCollection = useCallback(
         rowData => {
@@ -72,7 +73,6 @@ const Favorite = props => {
     const onChangeFavoraiteName = useCallback(
         e => {
             setFavoriteName(e.target.value);
-            e.target.value ? setDisabledName(false) : setDisabledName(true);
         }, []);
 
     const onConfirm = id => {
@@ -90,11 +90,9 @@ const Favorite = props => {
             <div style={{marginBottom: '16px'}}>
                 {t('analysis.logs.edit_name')}
             </div>
-            <Input
+            <FavoriteNameInput
                 style={{marginBottom: '18px'}}
                 placeholder={t('analysis.logs.favorite_name_placeholder')}
-                showCount
-                maxLength={48}
                 value={favoriteName}
                 onChange={onChangeFavoraiteName}
             />
@@ -159,7 +157,7 @@ const Favorite = props => {
                             title={editFavoriteForm}
                             onConfirm={createValueHandler(onSaveEditFavorite, rowData)}
                             okText={t('analysis.logs.action.save')}
-                            okButtonProps={{disabled: isDisabledName}}
+                            okButtonProps={{disabled: !isValidFavoriteName(favoriteName)}}
                             cancelText={t('common.action.cancel')}
                         >
                             <Button

hugegraph-hubble/hubble-fe/src/modules/analysis/LogsDetail/ExecuteLog/index.js

@@ -22,8 +22,10 @@
 
 import {useState, useCallback} from 'react';
 import {useTranslation} from 'react-i18next';
-import {Button, Table, Space, Tag, Input, Popconfirm} from 'antd';
+import {Button, Table, Space, Tag, Popconfirm} from 'antd';
 import ExecutionContent from '../../../../components/ExecutionContent';
+import FavoriteNameInput from '../../../../components/FavoriteNameInput';
+import {isValidFavoriteName} from '../../../../utils/rules';
 import c from './index.module.scss';
 
 const EXECUTE_TYPE_KEY = {
@@ -116,7 +118,6 @@ const ExecuteLog = props => {
     } = props;
 
     const [favoriteName, setFavoriteName] = useState();
-    const [disabledFavorite, setDisabledFavorite]  = useState(true);
 
     const loadStatements = useCallback(
         (text, rowData, index) => {
@@ -130,15 +131,13 @@ const ExecuteLog = props => {
     const onFavoraiteName = useCallback(
         e => {
             setFavoriteName(e.target.value);
-            e.target.value ? setDisabledFavorite(false) : setDisabledFavorite(true);
         },
         []
     );
 
     const onFavoriteCard = useCallback(
         () => {
             setFavoriteName('');
-            setDisabledFavorite(true);
         },
         []
     );
@@ -163,11 +162,9 @@ const ExecuteLog = props => {
                 <div style={{marginBottom: '16px'}}>
                     {t('analysis.logs.favorite_statement')}
                 </div>
-                <Input
+                <FavoriteNameInput
                     style={{marginBottom: '18px'}}
                     placeholder={t('analysis.logs.favorite_name_placeholder')}
-                    showCount
-                    maxLength={48}
                     value={favoriteName}
                     onChange={onFavoraiteName}
                 />
@@ -254,7 +251,7 @@ const ExecuteLog = props => {
                         onAddFavorite={onAddFavorite}
                         onFavoriteCard={onFavoriteCard}
                         loadStatements={loadStatements}
-                        disabledFavorite={disabledFavorite}
+                        disabledFavorite={!isValidFavoriteName(favoriteName)}
                         t={t}
                     />
                 );

hugegraph-hubble/hubble-fe/src/modules/analysis/LogsDetail/Favorite/index.js

@@ -24,6 +24,8 @@ import React, {useState, useCallback} from 'react';
 import {useTranslation} from 'react-i18next';
 import {Button, Table, Input, Popconfirm, Modal} from 'antd';
 import ExecutionContent from '../../../../components/ExecutionContent';
+import FavoriteNameInput from '../../../../components/FavoriteNameInput';
+import {isValidFavoriteName} from '../../../../utils/rules';
 import Highlighter from 'react-highlight-words';
 import c from './index.module.scss';
 
@@ -98,7 +100,6 @@ const Favorite = props => {
     const [favoriteName, setFavoriteName] = useState();
     const [searchCache, setSearchCache] = useState('');
     const [search, setSearch] = useState('');
-    const [isDisabledName, setDisabledName]  = useState(false);
 
     const loadStatements = useCallback(
         (content, index) => {
@@ -135,7 +136,6 @@ const Favorite = props => {
     const onChangeFavoraiteName = useCallback(
         e => {
             setFavoriteName(e.target.value);
-            e.target.value ? setDisabledName(false) : setDisabledName(true);
         },
         []
     );
@@ -155,11 +155,9 @@ const Favorite = props => {
             <div style={{marginBottom: '16px'}}>
                 {t('analysis.logs.edit_name')}
             </div>
-            <Input
+            <FavoriteNameInput
                 style={{marginBottom: '18px'}}
                 placeholder={t('analysis.logs.favorite_name_placeholder')}
-                showCount
-                maxLength={48}
                 value={favoriteName}
                 onChange={onChangeFavoraiteName}
             />
@@ -225,7 +223,7 @@ const Favorite = props => {
                         onEditFavorite={onEditFavorite}
                         onConfirm={onConfirm}
                         editFavoriteForm={editFavoriteForm}
-                        isDisabledName={isDisabledName}
+                        isDisabledName={!isValidFavoriteName(favoriteName)}
                         t={t}
                     />
                 );

hugegraph-hubble/hubble-fe/src/modules/analysis/QueryBar/ContentCommon/index.js

@@ -22,11 +22,13 @@
 
 import React, {useCallback, useState, useContext} from 'react';
 import {useTranslation} from 'react-i18next';
-import {Button, Tooltip, Dropdown, Input, Popover, message, Space} from 'antd';
+import {Button, Tooltip, Dropdown, Popover, message, Space} from 'antd';
 import {UpOutlined, DownOutlined, QuestionCircleOutlined} from '@ant-design/icons';
 import {GREMLIN_EXECUTES_MODE} from '../../../../utils/constants';
 import GraphAnalysisContext from '../../../Context';
 import classnames from 'classnames';
+import {isValidFavoriteName} from '../../../../utils/rules';
+import FavoriteNameInput from '../../../../components/FavoriteNameInput';
 import c from './index.module.scss';
 import * as api from '../../../../api/index';
 import KeyboardAction from '../../../../components/KeyboardAction';
@@ -139,17 +141,15 @@ const ContentCommon = props => {
         e => {
             const favoriteName = e.target.value;
             setFavoriteName(favoriteName);
-            favoriteName ? setDisabledFavorite(false) : setDisabledFavorite(true);
+            setDisabledFavorite(!isValidFavoriteName(favoriteName));
         },
         []
     );
 
     const favoriteContent = (
         <>
-            <Input
+            <FavoriteNameInput
                 placeholder={t('analysis.query.favorite_name_placeholder')}
-                showCount
-                maxLength={48}
                 value={favoriteName}
                 onChange={onChangeFavoraiteName}
             />