Merge pull request openshift#12690 from lokanandaprabhu/feature/ODC-7282

ODC-7282: Add webhook informations on Repository details and summary page

frontend/packages/pipelines-plugin/integration-tests/features/pipelines/pipelines-as-code.feature

@@ -25,7 +25,7 @@ Feature: Perform Actions on repository
  When user clicks on the repository "<repository_name>" on Repositories page
  Then user will be redirected to Repository details page with header "<repository_name>"
  And user is able to see Details, YAML, Pipeline Runs tabs
- And Details tab is displayed with field names Name, Namespace, Labels, Annotations, Created at, Owner, Repository
+ And Details tab is displayed with field names Name, Namespace, Labels, Annotations, Created at, Owner, Repository, Username, Git access token, Webhook URL, Webhook Secret
  And Actions menu display with options Edit labels, Edit annotations, Edit repository, Delete repository
 
  Examples:

frontend/packages/pipelines-plugin/integration-tests/support/page-objects/pipelines-po.ts

@@ -333,6 +333,11 @@ export const repositoryDetailsPO = {
  annotations: '[data-test="Annotations"]',
  createdAt: '[data-test="Created at"]',
  owner: '[data-test="Owner"]',
+ repository: '[data-test="Repository"]',
+ userName: '[data-test="Username"]',
+ accessToken: '[data-test="Git access token"]',
+ webhookUrl: '[data-test-selector="details-item-label__Webhook URL"]',
+ webhookSecret: '[data-test="Webhook Secret"]',
  },
  fieldValues: {
  name: '[data-test-selector="details-item-value__Name"]',

frontend/packages/pipelines-plugin/integration-tests/support/pages/pipelines/repositoryDetails-page.ts

@@ -42,11 +42,11 @@ export const repositoryDetailsPage = {
  cy.get(repositoryDetailsPO.details.fieldNames.annotations).should('be.visible');
  cy.get(repositoryDetailsPO.details.fieldNames.createdAt).should('be.visible');
  cy.get(repositoryDetailsPO.details.fieldNames.owner).should('be.visible');
- cy.byTestID('pl-repository-customdetails').within(() => {
-  cy.get('dl dt')
-  .eq(0)
-  .should('have.text', 'Repository');
- });
+ cy.get(repositoryDetailsPO.details.fieldNames.repository).should('be.visible');
+ cy.get(repositoryDetailsPO.details.fieldNames.userName).should('be.visible');
+ cy.get(repositoryDetailsPO.details.fieldNames.accessToken).should('be.visible');
+ cy.get(repositoryDetailsPO.details.fieldNames.webhookUrl).should('be.visible');
+ cy.get(repositoryDetailsPO.details.fieldNames.webhookSecret).should('be.visible');
  },
 
  verifyLabelInLabelsList: (label: string) => {

frontend/packages/pipelines-plugin/integration-tests/support/step-definitions/pipelines/pipeline-as-code.ts

@@ -110,7 +110,7 @@ Then('user is able to see Details, YAML, Pipeline Runs tabs', () => {
 });
 
 Then(
- 'Details tab is displayed with field names Name, Namespace, Labels, Annotations, Created at, Owner, Repository',
+ 'Details tab is displayed with field names Name, Namespace, Labels, Annotations, Created at, Owner, Repository, Username, Git access token, Webhook URL, Webhook Secret',
  () => {
  repositoryDetailsPage.verifyFieldsInDetailsTab();
  },

frontend/packages/pipelines-plugin/integration-tests/testData/repository-crd-testdata/repository.yaml

@@ -113,4 +113,12 @@ pipelinerun_status:
  https://github.com/karthikjeeyar/demo-app/commit/6f9445a02ead2950a234362142c0e8718b30f183
  event_type: push
 spec:
- url: 'https://github.com/karthikjeeyar/demo-app'
+ url: 'https://github.com/karthikjeeyar/demo-app'
+ git_provider:
+ user: 'lokanandap'
+ secret:
+ key: 'provider.token'
+ name: 'git-hello-func-token-s79pk'
+ webhook_secret:
+ key: 'webhook.secret'
+ name: 'git-hello-func-token-s79pk'

frontend/packages/pipelines-plugin/locales/en/pipelines-plugin.json

@@ -355,6 +355,9 @@
  "Name must consist of lower-case letters, numbers and hyphens. It must start with a letter and end with a letter or number.": "Name must consist of lower-case letters, numbers and hyphens. It must start with a letter and end with a letter or number.",
  "Invalid Git URL.": "Invalid Git URL.",
  "Repository details": "Repository details",
+ "Git access token": "Git access token",
+ "Webhook URL": "Webhook URL",
+ "Webhook Secret": "Webhook Secret",
  "Close": "Close",
  "Commit id": "Commit id",
  "Branch/Tag": "Branch/Tag",
@@ -376,6 +379,8 @@
  "<0>In the <1>.tekton</1> directory, create a new file called<3>push.yaml</3> and add the following code:</0>": "<0>In the <1>.tekton</1> directory, create a new file called<3>push.yaml</3> and add the following code:</0>",
  "Step 3": "Step 3",
  "Commit these changes and push them to your Git repository.": "Commit these changes and push them to your Git repository.",
+ "Step 4": "Step 4",
+ "Webhook URL to configure the webhook in your Git repository:": "Webhook URL to configure the webhook in your Git repository:",
  "You can install Tekton CLI from <2></2> page and generate example pipelineruns using the <6>tkn pac generate</6>": "You can install Tekton CLI from <2></2> page and generate example pipelineruns using the <6>tkn pac generate</6>",
  "releases": "releases",
  "Your Git repository is now configured to run <1>push.yaml</1> on every Git push event.": "Your Git repository is now configured to run <1>push.yaml</1> on every Git push event.",
@@ -386,11 +391,9 @@
  "use your Gitlab Personal access token. Use this <2>link</2> to create a token with api scope and give your token an expiration i.e 30d.": "use your Gitlab Personal access token. Use this <2>link</2> to create a token with api scope and give your token an expiration i.e 30d.",
  "use your Bitbucket App password. Use this <2>link</2> to create a token with Read and Write scopes in Account, Workspace membership, Projects, Issues, Pull requests and give your token an expiration i.e 30d.": "use your Bitbucket App password. Use this <2>link</2> to create a token with Read and Write scopes in Account, Workspace membership, Projects, Issues, Pull requests and give your token an expiration i.e 30d.",
  "Use your Git Personal token. Create a token with repo, public_repo & admin:repo_hook scopes and give your token an expiration, i.e 30d.": "Use your Git Personal token. Create a token with repo, public_repo & admin:repo_hook scopes and give your token an expiration, i.e 30d.",
- "Git access token": "Git access token",
  "Git access token secret": "Git access token secret",
  "Secret with the Git access token for pulling pipeline and tasks from your Git repository.": "Secret with the Git access token for pulling pipeline and tasks from your Git repository.",
  "Select a secret": "Select a secret",
- "Webhook URL": "Webhook URL",
  "We have detected a URL that can be used to configure the webhook.": "We have detected a URL that can be used to configure the webhook.",
  "Webhook secret": "Webhook secret",
  "Generate": "Generate",

frontend/packages/pipelines-plugin/src/components/repository/RepositoryDetails.tsx

@@ -1,6 +1,15 @@
 import * as React from 'react';
+import { ClipboardCopy } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
-import { SectionHeading, ResourceSummary, ExternalLink } from '@console/internal/components/utils';
+import {
+ SectionHeading,
+ ResourceSummary,
+ ExternalLink,
+ ResourceLink,
+ DetailsItem,
+} from '@console/internal/components/utils';
+import { SecretModel } from '@console/internal/models';
+import { usePacInfo } from './hooks/pac-hook';
 import { getGitProviderIcon } from './repository-utils';
 import { RepositoryKind } from './types';
 
@@ -11,6 +20,7 @@ export interface RepositoryDetailsProps {
 const RepositoryDetails: React.FC<RepositoryDetailsProps> = ({ obj: repository }) => {
  const { t } = useTranslation();
  const { spec } = repository;
+ const [pac, loaded] = usePacInfo();
 
  return (
  <div className="co-m-pane__body">
@@ -19,18 +29,71 @@ const RepositoryDetails: React.FC<RepositoryDetailsProps> = ({ obj: repository }
  <div className="col-sm-6">
  <ResourceSummary resource={repository} />
  </div>
- {spec?.url && (
- <div className="col-sm-6" data-test="pl-repository-customdetails">
- <dl>
- <dt>{t('pipelines-plugin~Repository')}</dt>
- <dd>
+ <div className="col-sm-6">
+ <dl>
+ {spec?.url && (
+ <DetailsItem
+ label={t('pipelines-plugin~Repository')}
+ obj={repository}
+ path="spec.url"
+ data-test="pl-repository-customdetails"
+ >
  <ExternalLink href={spec?.url}>
  {getGitProviderIcon(spec?.url)} {spec?.url}
  </ExternalLink>
- </dd>
- </dl>
- </div>
- )}
+ </DetailsItem>
+ )}
+ {spec?.git_provider?.user && (
+ <DetailsItem
+ label={t('pipelines-plugin~Username')}
+ obj={repository}
+ path="spec.git_provider.user"
+ data-test="git-provider-username"
+ >
+ {spec?.git_provider?.user}
+ </DetailsItem>
+ )}
+ {spec?.git_provider?.secret?.name && (
+ <DetailsItem
+ label={t('pipelines-plugin~Git access token')}
+ obj={repository}
+ path="spec.git_provider.secret.name"
+ data-test="git-provider-secret-name"
+ >
+ <ResourceLink
+ kind={SecretModel.kind}
+ name={spec?.git_provider?.secret?.name}
+ namespace={repository.metadata.namespace}
+ />
+ </DetailsItem>
+ )}
+ {spec?.git_provider?.webhook_secret?.name && pac && loaded && (
+ <DetailsItem
+ label={t('pipelines-plugin~Webhook URL')}
+ obj={repository}
+ data-test="webhook-url"
+ >
+ <ClipboardCopy isReadOnly hoverTip="Copy" clickTip="Copied" style={{ flex: '1' }}>
+ {pac.data['controller-url']}
+ </ClipboardCopy>
+ </DetailsItem>
+ )}
+ {spec?.git_provider?.webhook_secret?.name && (
+ <DetailsItem
+ label={t('pipelines-plugin~Webhook Secret')}
+ obj={repository}
+ path="spec.git_provider.webhook_secret.name"
+ data-test="git-provider-webhook-secret-name"
+ >
+ <ResourceLink
+ kind={SecretModel.kind}
+ name={spec?.git_provider?.webhook_secret?.name}
+ namespace={repository.metadata.namespace}
+ />
+ </DetailsItem>
+ )}
+ </dl>
+ </div>
  </div>
  </div>
  );

frontend/packages/pipelines-plugin/src/components/repository/__tests__/RepositoryDetails.spec.tsx

@@ -3,11 +3,40 @@ import { shallow } from 'enzyme';
 import { mockRepositories } from '../../../test-data/pipeline-data';
 import RepositoryDetails from '../RepositoryDetails';
 
+jest.mock('@console/pipelines-plugin/src/components/repository/hooks/pac-hook', () => ({
+ usePacInfo: jest.fn().mockReturnValue([
+ {
+ data: {
+ 'controller-url':
+ 'https://pipelines-as-code-controller-openshift-pipelines.apps.daily-4.13-040301.dev.openshiftappsvc.org',
+ },
+ },
+ true,
+ ]),
+}));
+
 describe('RepositoryDetails', () => {
  it('should not render custom details section when spec url are not available', () => {
  const repositoryWrapper = shallow(<RepositoryDetails obj={mockRepositories[2]} />);
  expect(repositoryWrapper.find('[data-test="pl-repository-customdetails"]').exists()).toBe(
  false,
  );
+ expect(repositoryWrapper.find('[data-test="git-provider-username"]').exists()).toBe(false);
+ expect(repositoryWrapper.find('[data-test="git-provider-secret-name"]').exists()).toBe(false);
+ expect(repositoryWrapper.find('[data-test="webhook-url"]').exists()).toBe(false);
+ expect(repositoryWrapper.find('[data-test="git-provider-webhook-secret-name"]').exists()).toBe(
+ false,
+ );
+ });
+
+ it('should render username, webhook url and secret details ', () => {
+ const repositoryWrapper = shallow(<RepositoryDetails obj={mockRepositories[3]} />);
+ expect(repositoryWrapper.find('[data-test="pl-repository-customdetails"]').exists()).toBe(true);
+ expect(repositoryWrapper.find('[data-test="git-provider-username"]').exists()).toBe(true);
+ expect(repositoryWrapper.find('[data-test="git-provider-secret-name"]').exists()).toBe(true);
+ expect(repositoryWrapper.find('[data-test="webhook-url"]').exists()).toBe(true);
+ expect(repositoryWrapper.find('[data-test="git-provider-webhook-secret-name"]').exists()).toBe(
+ true,
+ );
  });
 });

frontend/packages/pipelines-plugin/src/components/repository/sections/RepositoryOverview.tsx

@@ -1,9 +1,18 @@
 import * as React from 'react';
-import { Flex, FlexItem, Text, Title, TitleSizes, FormGroup } from '@patternfly/react-core';
+import {
+ Flex,
+ FlexItem,
+ Text,
+ Title,
+ TitleSizes,
+ FormGroup,
+ ClipboardCopy,
+} from '@patternfly/react-core';
 import { useFormikContext } from 'formik';
 import { useTranslation, Trans } from 'react-i18next';
 import EditorField from '@console/dev-console/src/components/buildconfig/sections/EditorField';
 import FormSection from '@console/dev-console/src/components/import/section/FormSection';
+import { GitProvider } from '@console/git-service/src';
 import { ExternalLink } from '@console/internal/components/utils';
 import YAMLEditorToolbar from '@console/shared/src/components/editor/YAMLEditorToolbar';
 import CopyPipelineRunButton from '../form-fields/CopyPipelineRunButton';
@@ -88,7 +97,29 @@ const RepositoryOverview = () => {
  {t('pipelines-plugin~Commit these changes and push them to your Git repository.')}
  </Text>
  </FormGroup>
- <FormGroup fieldId="step-4">
+ {!(
+ values.gitProvider === GitProvider.GITHUB &&
+ values.method === GitProvider.GITHUB &&
+ values.githubAppAvailable === true
+ ) &&
+ values?.webhook?.url && (
+ <FormGroup fieldId="step-4">
+ <Title headingLevel="h4" size={TitleSizes.md}>
+ {t('pipelines-plugin~Step 4')}
+ </Title>
+ <Text>
+ <Trans t={t} ns="pipelines-plugin">
+ Webhook URL to configure the webhook in your Git repository:
+ </Trans>
+ </Text>
+ <Text>
+ <ClipboardCopy isReadOnly hoverTip="Copy" clickTip="Copied" style={{ flex: '1' }}>
+ {values.webhook.url}
+ </ClipboardCopy>
+ </Text>
+ </FormGroup>
+ )}
+ <FormGroup fieldId="step-5">
  <Text>
  <Trans t={t} ns="pipelines-plugin">
  You can install Tekton CLI from{' '}

frontend/packages/pipelines-plugin/src/test-data/pipeline-data.ts

@@ -3242,6 +3242,31 @@ export const mockRepositories: RepositoryKind[] = [
  namespace: 'test',
  },
  },
+ {
+ apiVersion: 'pipelinesascode.tekton.dev/v1alpha1',
+ kind: 'Repository',
+ metadata: {
+ name: 'aa',
+ namespace: 'test',
+ },
+ spec: {
+ namespace: 'karthik',
+ url: 'https://github.com/karthikjeeyar/demo-app',
+ // eslint-disable-next-line @typescript-eslint/camelcase
+ git_provider: {
+ user: 'lokanandap',
+ secret: {
+ key: 'provider.token',
+ name: 'git-hello-func-token-s79pk',
+ },
+ // eslint-disable-next-line @typescript-eslint/camelcase
+ webhook_secret: {
+ key: 'webhook.secret',
+ name: 'git-hello-func-token-s79pk',
+ },
+ },
+ },
+ },
 ];
 
 type TaskTestData = {