]> source.dussan.org Git - sonarqube.git/commitdiff
SONAR-20086 Adding ALM repository component to be used by other pages
authorRevanshu Paliwal <revanshu.paliwal@sonarsource.com>
Fri, 4 Aug 2023 13:29:49 +0000 (15:29 +0200)
committersonartech <sonartech@sonarsource.com>
Mon, 14 Aug 2023 20:02:57 +0000 (20:02 +0000)
server/sonar-web/src/main/js/apps/create/project/components/AlmRepoItem.tsx [new file with mode: 0644]
server/sonar-web/src/main/js/apps/create/project/components/__tests__/AlmRepoItem-test.tsx [new file with mode: 0644]
sonar-core/src/main/resources/org/sonar/l10n/core.properties

diff --git a/server/sonar-web/src/main/js/apps/create/project/components/AlmRepoItem.tsx b/server/sonar-web/src/main/js/apps/create/project/components/AlmRepoItem.tsx
new file mode 100644 (file)
index 0000000..e7850a2
--- /dev/null
@@ -0,0 +1,126 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2023 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+import styled from '@emotion/styled';
+import classNames from 'classnames';
+import {
+  ButtonSecondary,
+  Card,
+  CheckIcon,
+  DiscreetLink,
+  LightLabel,
+  LightPrimary,
+  Link,
+  themeColor,
+} from 'design-system';
+import React from 'react';
+import { translate } from '../../../../helpers/l10n';
+import { getProjectUrl } from '../../../../helpers/urls';
+
+interface AlmRepoItemProps {
+  primaryTextNode: React.ReactNode;
+  secondaryTextNode?: React.ReactNode;
+  sqProjectKey?: string;
+  almKey: string;
+  almUrl: string;
+  almUrlText: string;
+  onImport: (key: string) => void;
+  almIconSrc: string;
+}
+
+export default function AlmRepoItem({
+  almKey,
+  primaryTextNode,
+  secondaryTextNode,
+  sqProjectKey,
+  almUrl,
+  almUrlText,
+  almIconSrc,
+  onImport,
+}: AlmRepoItemProps) {
+  return (
+    <StyledCard
+      key={almKey}
+      className={classNames('sw-flex sw-mb-2 sw-px-4', {
+        'sw-py-4': sqProjectKey,
+        'sw-py-2': !sqProjectKey,
+      })}
+    >
+      <div className="sw-w-[70%] sw-flex sw-mr-1">
+        <div className="sw-max-w-[50%] sw-flex sw-items-center">
+          <img
+            alt="" // Should be ignored by screen readers
+            className="sw-h-4 sw-w-4 sw-mr-2"
+            src={almIconSrc}
+          />
+          {sqProjectKey ? (
+            <DiscreetLink className="sw-truncate" to={getProjectUrl(sqProjectKey)}>
+              <LightPrimary className="sw-body-sm-highlight sw-truncate">
+                {primaryTextNode}
+              </LightPrimary>
+            </DiscreetLink>
+          ) : (
+            <LightPrimary className="sw-body-sm-highlight sw-truncate">
+              {primaryTextNode}
+            </LightPrimary>
+          )}
+        </div>
+        <div className="sw-ml-2 sw-flex sw-items-center sw-truncate">
+          <LightLabel className="sw-body-sm">{secondaryTextNode}</LightLabel>
+        </div>
+      </div>
+      <div className="sw-flex sw-justify-between sw-items-center sw-flex-1">
+        {almUrl && (
+          <div className="sw-flex sw-items-center">
+            <Link
+              className="sw-body-sm-highlight"
+              onClick={(e) => e.stopPropagation()}
+              target="_blank"
+              to={almUrl}
+              rel="noopener noreferrer"
+            >
+              {almUrlText}
+            </Link>
+          </div>
+        )}
+        {sqProjectKey ? (
+          <div className="sw-flex sw-items-center">
+            <CheckIcon />
+            <LightPrimary className="sw-ml-2 sw-body-sm">
+              {translate('onboarding.create_project.repository_imported')}
+            </LightPrimary>
+          </div>
+        ) : (
+          <ButtonSecondary
+            onClick={() => {
+              onImport(almKey);
+            }}
+          >
+            {translate('onboarding.create_project.import')}
+          </ButtonSecondary>
+        )}
+      </div>
+    </StyledCard>
+  );
+}
+
+const StyledCard = styled(Card)`
+  border-color: ${themeColor('almCardBorder')};
+`;
diff --git a/server/sonar-web/src/main/js/apps/create/project/components/__tests__/AlmRepoItem-test.tsx b/server/sonar-web/src/main/js/apps/create/project/components/__tests__/AlmRepoItem-test.tsx
new file mode 100644 (file)
index 0000000..40e0335
--- /dev/null
@@ -0,0 +1,58 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2023 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+import { screen } from '@testing-library/react';
+import React from 'react';
+import { renderComponent } from '../../../../../helpers/testReactTestingUtils';
+import { FCProps } from '../../../../../types/misc';
+import AlmRepoItem from '../AlmRepoItem';
+
+it('render the component correctly when sqProjectKey is not present', () => {
+  renderAlmRepoItem();
+  expect(screen.getByText('test1')).toBeInTheDocument();
+  expect(screen.getByText('url text')).toHaveAttribute('href', '/url');
+  expect(
+    screen.getByRole('button', { name: 'onboarding.create_project.import' })
+  ).toBeInTheDocument();
+});
+
+it('render the component correctly when sqProjectKey is present', () => {
+  renderAlmRepoItem({ sqProjectKey: 'sqkey' });
+  expect(screen.getByText('test1')).toBeInTheDocument();
+  expect(screen.getByText('url text')).toHaveAttribute('href', '/url');
+  expect(screen.getByText('onboarding.create_project.repository_imported')).toBeInTheDocument();
+  expect(
+    screen.queryByRole('button', { name: 'onboarding.create_project.import' })
+  ).not.toBeInTheDocument();
+});
+
+function renderAlmRepoItem(props?: Partial<FCProps<typeof AlmRepoItem>>) {
+  return renderComponent(
+    <AlmRepoItem
+      primaryTextNode="test1"
+      almKey="key"
+      almUrl="url"
+      almUrlText="url text"
+      almIconSrc="src"
+      onImport={jest.fn()}
+      {...props}
+    />
+  );
+}
index a2cea2039c3deaafb59fc511fb1cdab255d1a877..06e783f31807051793bd792878624951f0880572 100644 (file)
@@ -3870,7 +3870,8 @@ onboarding.create_project.main_branch_name.error.empty=The main branch name is r
 onboarding.create_project.main_branch_name.description=The name of your project’s default branch { learn_more }
 
 onboarding.create_project.pr_decoration.information=Manually created projects won’t benefit from the features associated with DevOps Platforms integration unless you configure them in the project settings.
-onboarding.create_project.repository_imported=Already set up
+onboarding.create_project.repository_imported=Already imported
+onboarding.create_project.import=Import
 onboarding.create_project.see_project=See the project
 onboarding.create_project.search_repositories_by_name=Search for repository name starting with...
 onboarding.create_project.search_projects_repositories=Search for projects and repositories
@@ -3941,7 +3942,7 @@ onboarding.create_project.no_bbs_repos.filter=No repositories match your filter.
 onboarding.create_project.only_showing_X_first_repos=We're only displaying the first {0} repositories. If you're looking for a repository that's not in this list, use the search above.
 onboarding.create_project.import_selected_repo=Set up selected repository
 onboarding.create_project.go_to_project=Go to project
-onboarding.create_project.see_on_github=See project on GitHub
+onboarding.create_project.see_on_github=See on GitHub
 
 onboarding.create_project.search_prompt=Search for projects
 onboarding.create_project.set_up=Set up