This is an automated email from the ASF dual-hosted git repository.
likyh pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
The following commit(s) were added to refs/heads/main by this push:
new 7cb70dbd2 fix(config-ui): adjust the global tips (#5512)
7cb70dbd2 is described below
commit 7cb70dbd2859969b96284fcddf64c8498909b80d
Author: 青湛 <[email protected]>
AuthorDate: Tue Jun 20 21:57:59 2023 +0800
fix(config-ui): adjust the global tips (#5512)
* fix(config-ui): adjust the wording for gitlab transformation
* fix(config-ui): adjust the global tips
---
config-ui/package.json | 2 ++
config-ui/src/layouts/base/base.tsx | 17 +++++++---
config-ui/src/layouts/base/styled.ts | 13 +++++++-
config-ui/src/layouts/base/tips-transition.css | 38 ++++++++++++++++++++++
.../pages/blueprint/connection-detail/index.tsx | 8 +----
config-ui/src/pages/connection/detail/index.tsx | 1 -
.../src/plugins/register/gitlab/transformation.tsx | 2 +-
config-ui/yarn.lock | 11 +++++++
8 files changed, 78 insertions(+), 14 deletions(-)
diff --git a/config-ui/package.json b/config-ui/package.json
index 6fd990e7d..601e54bf4 100644
--- a/config-ui/package.json
+++ b/config-ui/package.json
@@ -38,6 +38,7 @@
"react-dom": "17.0.2",
"react-is": "^18.2.0",
"react-router-dom": "^5.3.0",
+ "react-transition-group": "^4.4.5",
"styled-components": "^5.3.6"
},
"devDependencies": {
@@ -47,6 +48,7 @@
"@types/react-copy-to-clipboard": "^5.0.4",
"@types/react-dom": "^18.0.10",
"@types/react-router-dom": "^5.3.3",
+ "@types/react-transition-group": "^4.4.6",
"@types/styled-components": "^5.1.26",
"@vitejs/plugin-react": "^3.1.0",
"eslint": "^8.30.0",
diff --git a/config-ui/src/layouts/base/base.tsx
b/config-ui/src/layouts/base/base.tsx
index 1607fc695..b067af969 100644
--- a/config-ui/src/layouts/base/base.tsx
+++ b/config-ui/src/layouts/base/base.tsx
@@ -16,11 +16,12 @@
*
*/
-import { useEffect, useState } from 'react';
+import { useState, useEffect, useRef } from 'react';
import { useLocation } from 'react-router-dom';
+import { CSSTransition } from 'react-transition-group';
import { Menu, MenuItem, Tag, Navbar, Intent, Alignment } from
'@blueprintjs/core';
-import { PageLoading, Logo, ExternalLink } from '@/components';
+import { PageLoading, Logo, ExternalLink, IconButton } from '@/components';
import { useTips, useRefreshData } from '@/hooks';
import { TipsContextProvider, ConnectionContextProvider } from '@/store';
import { history } from '@/utils/history';
@@ -34,6 +35,7 @@ import SlackIcon from '@/images/icons/slack.svg';
import { useMenu, MenuItemType } from './use-menu';
import * as API from './api';
import * as S from './styled';
+import './tips-transition.css';
interface Props {
children: React.ReactNode;
@@ -52,11 +54,13 @@ export const BaseLayout = ({ children }: Props) => {
export const Layout = ({ children }: Props) => {
const menu = useMenu();
const { pathname } = useLocation();
- const { tips } = useTips();
+ const { tips, setTips } = useTips();
const { ready, data } = useRefreshData<{ version: string }>(() =>
API.getVersion(), []);
const [userInfo, setUserInfo] = useState<API.UserInfo | null>(null);
+ const tipsRef = useRef(null);
+
useEffect(() => {
API.getUserInfo().then(setUserInfo);
}, []);
@@ -173,7 +177,12 @@ export const Layout = ({ children }: Props) => {
<S.Inner>
<S.Content>{children}</S.Content>
</S.Inner>
- {tips && <S.Tips>{tips}</S.Tips>}
+ <CSSTransition in={!!tips} unmountOnExit timeout={300}
nodeRef={tipsRef} classNames="tips">
+ <S.Tips ref={tipsRef}>
+ <div className="content">{tips}</div>
+ <IconButton style={{ color: '#fff' }} icon="cross" tooltip="Close"
onClick={() => setTips('')} />
+ </S.Tips>
+ </CSSTransition>
</S.Main>
</S.Wrapper>
);
diff --git a/config-ui/src/layouts/base/styled.ts
b/config-ui/src/layouts/base/styled.ts
index f04f314ec..5652c4e9a 100644
--- a/config-ui/src/layouts/base/styled.ts
+++ b/config-ui/src/layouts/base/styled.ts
@@ -127,10 +127,21 @@ export const Content = styled.div`
export const Tips = styled.div`
display: flex;
align-items: center;
- justify-content: center;
padding: 14px 0;
color: #fff;
background-color: #3c5088;
+
+ .content {
+ flex: auto;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .bp4-popover2-target {
+ flex: 0 0 50px;
+ width: 50px;
+ }
`;
export const SiderMenuItem = styled.div`
diff --git a/config-ui/src/layouts/base/tips-transition.css
b/config-ui/src/layouts/base/tips-transition.css
new file mode 100644
index 000000000..2751ae3e6
--- /dev/null
+++ b/config-ui/src/layouts/base/tips-transition.css
@@ -0,0 +1,38 @@
+/*
+ * 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.
+ *
+ */
+
+.tips-enter {
+ opacity: 0;
+ transform: scale(0.8);
+}
+
+.tips-enter-active {
+ opacity: 1;
+ transform: translateX(0);
+ transition: opacity 300ms, transform 300ms;
+}
+
+.tips-exit {
+ opacity: 1;
+}
+
+.tips-exit-active {
+ opacity: 0;
+ transform: scale(0.8);
+ transition: opacity 300ms, transform 300ms;
+}
diff --git a/config-ui/src/pages/blueprint/connection-detail/index.tsx
b/config-ui/src/pages/blueprint/connection-detail/index.tsx
index 2f9dfd505..b2f988eaf 100644
--- a/config-ui/src/pages/blueprint/connection-detail/index.tsx
+++ b/config-ui/src/pages/blueprint/connection-detail/index.tsx
@@ -95,14 +95,8 @@ export const BlueprintConnectionDetailPage = () => {
const handleShowTips = () => {
setTips(
<>
- <Message content="The Scope Config and/or Data Scope in this project
have been updated. Would you like to re-transform or recollect the data in this
project?" />
+ <Message content="The change of Data Scope(s) will affect the metrics
of this project. Would you like to recollect the data to get them updated?" />
<Buttons style={{ marginLeft: 8, marginBottom: 0 }}>
- <Button
- loading={operating}
- intent={Intent.PRIMARY}
- text="Only Re-transform Data"
- onClick={() => handleRunBP(true)}
- />
<Button
loading={operating}
intent={Intent.PRIMARY}
diff --git a/config-ui/src/pages/connection/detail/index.tsx
b/config-ui/src/pages/connection/detail/index.tsx
index 2d64d169a..f9c79bd1c 100644
--- a/config-ui/src/pages/connection/detail/index.tsx
+++ b/config-ui/src/pages/connection/detail/index.tsx
@@ -73,7 +73,6 @@ const ConnectionDetail = ({ plugin, connectionId }: Props) =>
{
useEffect(() => {
onTest(`${plugin}-${connectionId}`);
- return () => setTips('');
}, [plugin, connectionId]);
const handleHideDialog = () => {
diff --git a/config-ui/src/plugins/register/gitlab/transformation.tsx
b/config-ui/src/plugins/register/gitlab/transformation.tsx
index 52a4ce00f..301cfef1e 100644
--- a/config-ui/src/plugins/register/gitlab/transformation.tsx
+++ b/config-ui/src/plugins/register/gitlab/transformation.tsx
@@ -78,7 +78,7 @@ export const GitLabTransformation = ({ entities,
transformation, setTransformati
<div style={{ marginTop: 16 }}>Convert a GitLab Pipeline as a
DevLake Deployment when: </div>
<div className="text">
<span>
- The name of the <strong>GitLab pipeline</strong> or
<strong>one of its jobs</strong> matches
+ Its branch/tag name or <strong>one of its jobs</strong>
matches
</span>
<InputGroup
style={{ width: 200, margin: '0 8px' }}
diff --git a/config-ui/yarn.lock b/config-ui/yarn.lock
index f141f8c41..d5e14c41c 100644
--- a/config-ui/yarn.lock
+++ b/config-ui/yarn.lock
@@ -2128,6 +2128,15 @@ __metadata:
languageName: node
linkType: hard
+"@types/react-transition-group@npm:^4.4.6":
+ version: 4.4.6
+ resolution: "@types/react-transition-group@npm:4.4.6"
+ dependencies:
+ "@types/react": "*"
+ checksum:
0872143821d7ee20a1d81e965f8b1e837837f11cd2206973f1f98655751992d9390304d58bac192c9cd923eca95bff107d8c9e3364a180240d5c2a6fd70fd7c3
+ languageName: node
+ linkType: hard
+
"@types/react@npm:*, @types/react@npm:^18.0.24":
version: 18.0.28
resolution: "@types/react@npm:18.0.28"
@@ -2973,6 +2982,7 @@ __metadata:
"@types/react-copy-to-clipboard": ^5.0.4
"@types/react-dom": ^18.0.10
"@types/react-router-dom": ^5.3.3
+ "@types/react-transition-group": ^4.4.6
"@types/styled-components": ^5.1.26
"@vitejs/plugin-react": ^3.1.0
axios: ^0.21.4
@@ -2995,6 +3005,7 @@ __metadata:
react-dom: 17.0.2
react-is: ^18.2.0
react-router-dom: ^5.3.0
+ react-transition-group: ^4.4.5
styled-components: ^5.3.6
typescript: ^4.9.4
vite: ^4.1.4
