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 32200daa9 feat(config-ui): provide the new ui for issue-repo-commit
configuration in jira (#5175)
32200daa9 is described below
commit 32200daa972fb5110655118820716fb9d610cbd1
Author: 青湛 <[email protected]>
AuthorDate: Mon May 15 09:51:52 2023 +0800
feat(config-ui): provide the new ui for issue-repo-commit configuration in
jira (#5175)
* chore(config-ui): remove console.log from connection store
* feat(config-ui): provide the new ui for issue-repo-commit configuration
in jira
---
config-ui/src/images/jira-issue-tips.png | Bin 0 -> 242999 bytes
config-ui/src/plugins/register/jira/config.tsx | 3 +-
.../jira/transformation-fields/cross-domain.tsx | 170 +++++++++++++++++++++
.../register/jira/transformation-fields/index.ts | 19 +++
.../register/jira/transformation-fields/styled.ts | 40 +++++
.../src/plugins/register/jira/transformation.tsx | 47 +-----
.../src/store/connections/use-context-value.ts | 2 -
7 files changed, 235 insertions(+), 46 deletions(-)
diff --git a/config-ui/src/images/jira-issue-tips.png
b/config-ui/src/images/jira-issue-tips.png
new file mode 100644
index 000000000..c8affb8db
Binary files /dev/null and b/config-ui/src/images/jira-issue-tips.png differ
diff --git a/config-ui/src/plugins/register/jira/config.tsx
b/config-ui/src/plugins/register/jira/config.tsx
index 30915cc3a..47ec1c07e 100644
--- a/config-ui/src/plugins/register/jira/config.tsx
+++ b/config-ui/src/plugins/register/jira/config.tsx
@@ -58,6 +58,7 @@ export const JiraConfig: PluginConfigType = {
transformation: {
storyPointField: '',
typeMappings: {},
- remotelinkCommitShaPattern: '/commit/([0-9a-f]{40})$/',
+ remotelinkCommitShaPattern: '',
+ remotelinkRepoPattern: [''],
},
};
diff --git
a/config-ui/src/plugins/register/jira/transformation-fields/cross-domain.tsx
b/config-ui/src/plugins/register/jira/transformation-fields/cross-domain.tsx
new file mode 100644
index 000000000..bb6cdaf27
--- /dev/null
+++ b/config-ui/src/plugins/register/jira/transformation-fields/cross-domain.tsx
@@ -0,0 +1,170 @@
+/*
+ * 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 { useState, useEffect } from 'react';
+import { Radio, Icon, Collapse, InputGroup, Button, Intent } from
'@blueprintjs/core';
+
+import { ExternalLink, IconButton } from '@/components';
+import JiraIssueTipsImg from '@/images/jira-issue-tips.png';
+
+import * as S from './styled';
+
+interface Props {
+ transformation: any;
+ setTransformation: React.Dispatch<React.SetStateAction<any>>;
+}
+
+export const CrossDomain = ({ transformation, setTransformation }: Props) => {
+ const [radio, setRadio] = useState<'repo' | 'commitSha'>('repo');
+ const [repoTips, setRepoTips] = useState(false);
+ const [repoLinks, setRepoLinks] = useState([]);
+
+ // console.log(transformation);
+
+ useEffect(() => {
+ if (transformation.remotelinkCommitShaPattern) {
+ setRadio('commitSha');
+ }
+
+ if (transformation.remotelinkRepoPattern) {
+ setRepoLinks(transformation.remotelinkRepoPattern);
+ }
+ }, [transformation]);
+
+ const handleChangeRadio = (r: 'repo' | 'commitSha') => {
+ if (r === 'repo') {
+ setTransformation({
+ ...transformation,
+ remotelinkCommitShaPattern: '',
+ });
+ }
+
+ if (r === 'commitSha') {
+ setTransformation({
+ ...transformation,
+ remotelinkRepoPattern: [],
+ });
+ }
+
+ setRadio(r);
+ };
+
+ const handleToggleRepoTips = () => setRepoTips(!repoTips);
+
+ const handleChangeRepoLinks = (index: number, value: string) => {
+ const newValue = repoLinks.map((link, i) => (index === i ? value : link));
+ setTransformation({
+ ...transformation,
+ remotelinkRepoPattern: newValue,
+ });
+ };
+
+ const handleAddRepoLinks = () => {
+ const newValue = [...repoLinks, ''];
+ setTransformation({
+ ...transformation,
+ remotelinkRepoPattern: newValue,
+ });
+ };
+
+ const handleDeleteRepoLinks = (index: number) => {
+ const newValue = repoLinks.filter((_, i) => i !== index);
+ setTransformation({
+ ...transformation,
+ remotelinkRepoPattern: newValue,
+ });
+ };
+
+ return (
+ <S.CrossDomain>
+ <h2>Cross-domain</h2>
+ <p>
+ Connect `commits` and `issues` to measure metrics such as{' '}
+ <ExternalLink
link="https://devlake.apache.org/docs/Metrics/BugCountPer1kLinesOfCode";>
+ Bug Count per 1k Lines of Code
+ </ExternalLink>{' '}
+ or man hour distribution on different work types. Connect `commits`
and `issues` to measure metrics such as{' '}
+ </p>
+ <div className="radio">
+ <div className="radio-item">
+ <Radio checked={radio === 'repo'} onChange={() =>
handleChangeRadio('repo')} />
+ <div className="content">
+ <h5>Connect Jira issues and commits via Jira issues’ remote links
that match the following pattern</h5>
+ <p onClick={handleToggleRepoTips}>
+ The default pattern shows how to match and parse GitLab(Cloud)
commits from issue remote links. See More{' '}
+ <Icon icon={!repoTips ? 'chevron-down' : 'chevron-up'} style={{
marginLeft: 8, cursor: 'pointer' }} />
+ </p>
+ <Collapse isOpen={repoTips}>
+ <img src={JiraIssueTipsImg} width="100%" alt="" />
+ </Collapse>
+ {radio === 'repo' && (
+ <>
+ {repoLinks.map((link, i) => (
+ <div className="input">
+ <InputGroup
+ key={i}
+
placeholder="https://gitlab.com/{namespace}/{repo_name}/-/commit/{commit_sha}";
+ value={link}
+ onChange={(e) => handleChangeRepoLinks(i,
e.target.value)}
+ />
+ {repoLinks.length > 1 && (
+ <IconButton icon="cross" tooltip="Delete" onClick={() =>
handleDeleteRepoLinks(i)} />
+ )}
+ </div>
+ ))}
+ <Button
+ outlined
+ intent={Intent.PRIMARY}
+ icon="add"
+ text="Add a Pattern"
+ onClick={() => handleAddRepoLinks()}
+ />
+ </>
+ )}
+ </div>
+ </div>
+ <div className="radio-item">
+ <Radio checked={radio === 'commitSha'} onChange={() =>
handleChangeRadio('commitSha')} />
+ <div className="content">
+ <h5>Connect Jira issues and commits via Jira’s development
panel</h5>
+ <p>
+ Choose this if you’ve enabled{' '}
+ <ExternalLink
link="https://support.atlassian.com/jira-software-cloud/docs/view-development-information-for-an-issue/";>
+ issue’ development panel
+ </ExternalLink>
+ . Usually, it happens when you’re using BitBucket for source
code management.
+ </p>
+ {radio === 'commitSha' && (
+ <InputGroup
+ fill
+ placeholder="/commit/([0-9a-f]{40})$"
+ value={transformation.remotelinkCommitShaPattern ?? ''}
+ onChange={(e) =>
+ setTransformation({
+ ...transformation,
+ remotelinkCommitShaPattern: e.target.value,
+ })
+ }
+ />
+ )}
+ </div>
+ </div>
+ </div>
+ </S.CrossDomain>
+ );
+};
diff --git a/config-ui/src/plugins/register/jira/transformation-fields/index.ts
b/config-ui/src/plugins/register/jira/transformation-fields/index.ts
new file mode 100644
index 000000000..fa4dcbd54
--- /dev/null
+++ b/config-ui/src/plugins/register/jira/transformation-fields/index.ts
@@ -0,0 +1,19 @@
+/*
+ * 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.
+ *
+ */
+
+export * from './cross-domain';
diff --git
a/config-ui/src/plugins/register/jira/transformation-fields/styled.ts
b/config-ui/src/plugins/register/jira/transformation-fields/styled.ts
new file mode 100644
index 000000000..84cfaa482
--- /dev/null
+++ b/config-ui/src/plugins/register/jira/transformation-fields/styled.ts
@@ -0,0 +1,40 @@
+/*
+ * 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 styled from 'styled-components';
+
+export const CrossDomain = styled.div`
+ .radio {
+ }
+
+ .radio-item {
+ display: flex;
+ margin-top: 24px;
+ }
+
+ .input {
+ display: flex;
+ align-items: center;
+ margin-bottom: 8px;
+
+ .bp4-input-group {
+ margin-right: 8px;
+ width: 680px;
+ }
+ }
+`;
diff --git a/config-ui/src/plugins/register/jira/transformation.tsx
b/config-ui/src/plugins/register/jira/transformation.tsx
index 8ce20fdf2..75cba06f3 100644
--- a/config-ui/src/plugins/register/jira/transformation.tsx
+++ b/config-ui/src/plugins/register/jira/transformation.tsx
@@ -17,13 +17,14 @@
*/
import React, { useState, useEffect, useMemo } from 'react';
-import { FormGroup, InputGroup, Tag, Icon, Intent } from '@blueprintjs/core';
+import { FormGroup, Tag, Icon, Intent } from '@blueprintjs/core';
import { Popover2 } from '@blueprintjs/popover2';
import { uniqWith } from 'lodash';
import { PageLoading, HelpTooltip, ExternalLink, MultiSelector, Selector,
Divider } from '@/components';
import { useProxyPrefix, useRefreshData } from '@/hooks';
+import { CrossDomain } from './transformation-fields';
import * as API from './api';
import * as S from './styled';
@@ -111,9 +112,9 @@ export const JiraTransformation = ({ connectionId,
transformation, setTransforma
return acc;
}, {} as any);
};
+
return (
<S.TransformationWrapper>
- {/* Issue Tracking */}
<div className="issue-tracking">
<h2>Issue Tracking</h2>
<p>
@@ -240,47 +241,7 @@ export const JiraTransformation = ({ connectionId,
transformation, setTransforma
</FormGroup>
</div>
<Divider />
- {/* Cross-domain */}
- <div>
- <h2>Cross-domain</h2>
- <p>
- Connect `commits` and `issues` to measure metrics such as{' '}
- <ExternalLink
link="https://devlake.apache.org/docs/Metrics/BugCountPer1kLinesOfCode";>
- Bug Count per 1k Lines of Code
- </ExternalLink>{' '}
- or man hour distribution on different work types.
- </p>
- <FormGroup
- inline
- label={
- <>
- <span>Connect GitLab Commits and Jira Issues</span>
- <HelpTooltip
- content={
- <div>
- If you are using GitLab’s{' '}
- <ExternalLink
link="https://docs.gitlab.com/ee/integration/jira/";>Jira
integration</ExternalLink>,
- specify the commit SHA pattern. DevLake will parse the
commit_sha from your Jira issues’ remote/web
- links and store the relationship in the table
`issue_commits`.
- </div>
- }
- />
- </>
- }
- >
- <InputGroup
- fill
- placeholder="/commit/([0-9a-f]{40})$"
- value={transformation.remotelinkCommitShaPattern ?? ''}
- onChange={(e) =>
- setTransformation({
- ...transformation,
- remotelinkCommitShaPattern: e.target.value,
- })
- }
- />
- </FormGroup>
- </div>
+ <CrossDomain transformation={transformation}
setTransformation={setTransformation} />
</S.TransformationWrapper>
);
};
diff --git a/config-ui/src/store/connections/use-context-value.ts
b/config-ui/src/store/connections/use-context-value.ts
index 72eeeab18..9d7cd8fb8 100644
--- a/config-ui/src/store/connections/use-context-value.ts
+++ b/config-ui/src/store/connections/use-context-value.ts
@@ -128,8 +128,6 @@ export const useContextValue = ({ plugin, filterBeta,
filterPlugin, filter }: Us
),
);
- console.log(connections);
-
const connection = connections.find((cs) => cs.unique === unique) as
ConnectionItemType;
const status = await testConnection(connection);
