SONAR-18776 New UI for Header Meta (analysis status, homepage, version)

10 files changed, 367 insertions, 0 deletions

diff --git a/server/sonar-web/design-system/src/components/FlagMessage.tsx b/server/sonar-web/design-system/src/components/FlagMessage.tsx
new file mode 100644
index 00000000000..3a3aed03c94
--- /dev/null
+++ b/server/sonar-web/design-system/src/components/FlagMessage.tsx
@@ -0,0 +1,122 @@
+/*
+ * 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 * as React from 'react';
+import tw from 'twin.macro';
+import { themeBorder, themeColor, themeContrast } from '../helpers/theme';
+import { ThemeColors } from '../types/theme';
+import { FlagErrorIcon, FlagInfoIcon, FlagSuccessIcon, FlagWarningIcon } from './icons';
+
+export type Variant = 'error' | 'warning' | 'success' | 'info';
+
+interface Props {
+  ariaLabel: string;
+  variant: Variant;
+}
+
+interface VariantInformation {
+  backGroundColor: ThemeColors;
+  borderColor: ThemeColors;
+  icon: JSX.Element;
+  role: string;
+}
+
+function getVariantInfo(variant: Variant): VariantInformation {
+  const variantList: Record<Variant, VariantInformation> = {
+    error: {
+      icon: <FlagErrorIcon />,
+      borderColor: 'errorBorder',
+      backGroundColor: 'errorBackground',
+      role: 'alert',
+    },
+    warning: {
+      icon: <FlagWarningIcon />,
+      borderColor: 'warningBorder',
+      backGroundColor: 'warningBackground',
+      role: 'alert',
+    },
+    success: {
+      icon: <FlagSuccessIcon />,
+      borderColor: 'successBorder',
+      backGroundColor: 'successBackground',
+      role: 'status',
+    },
+    info: {
+      icon: <FlagInfoIcon />,
+      borderColor: 'infoBorder',
+      backGroundColor: 'infoBackground',
+      role: 'status',
+    },
+  };
+
+  return variantList[variant];
+}
+
+export function FlagMessage(props: Props & React.HTMLAttributes<HTMLDivElement>) {
+  const { ariaLabel, className, variant, ...domProps } = props;
+  const variantInfo = getVariantInfo(variant);
+
+  return (
+    <StyledFlag
+      aria-label={ariaLabel}
+      className={classNames('alert', className)}
+      role={variantInfo.role}
+      variantInfo={variantInfo}
+      {...domProps}
+    >
+      <StyledFlagInner>
+        <StyledFlagIcon variantInfo={variantInfo}>{variantInfo.icon}</StyledFlagIcon>
+        <StyledFlagContent>{props.children}</StyledFlagContent>
+      </StyledFlagInner>
+    </StyledFlag>
+  );
+}
+
+export const StyledFlag = styled.div<{
+  variantInfo: VariantInformation;
+}>`
+  ${tw`sw-inline-flex`}
+  ${tw`sw-min-h-10`}
+  ${tw`sw-rounded-1`}
+  border: ${({ variantInfo }) => themeBorder('default', variantInfo.borderColor)};
+  background-color: ${themeColor('flagMessageBackground')};
+`;
+
+const StyledFlagInner = styled.div`
+  ${tw`sw-flex sw-items-stretch`}
+  ${tw`sw-box-border`}
+`;
+
+const StyledFlagIcon = styled.div<{ variantInfo: VariantInformation }>`
+  ${tw`sw-flex sw-justify-center sw-items-center`}
+  ${tw`sw-rounded-l-1`}
+  ${tw`sw-px-3`}
+  background-color: ${({ variantInfo }) => themeColor(variantInfo.backGroundColor)};
+`;
+
+const StyledFlagContent = styled.div`
+  ${tw`sw-flex sw-flex-auto sw-items-center`}
+  ${tw`sw-overflow-auto`}
+  ${tw`sw-text-left`}
+  ${tw`sw-mx-3 sw-my-2`}
+  ${tw`sw-body-sm`}
+  color: ${themeContrast('flagMessageBackground')};
+`;
diff --git a/server/sonar-web/design-system/src/components/__tests__/FlagMessage-test.tsx b/server/sonar-web/design-system/src/components/__tests__/FlagMessage-test.tsx
new file mode 100644
index 00000000000..b51dddcad2a
--- /dev/null
+++ b/server/sonar-web/design-system/src/components/__tests__/FlagMessage-test.tsx
@@ -0,0 +1,44 @@
+/*
+ * 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 { render } from '../../helpers/testUtils';
+import { FCProps } from '../../types/misc';
+import { FlagMessage, Variant } from '../FlagMessage';
+
+it.each([
+  ['error', 'alert', '1px solid rgb(249,112,102)'],
+  ['warning', 'alert', '1px solid rgb(248,205,92)'],
+  ['success', 'status', '1px solid rgb(50,213,131)'],
+  ['info', 'status', '1px solid rgb(110,185,228)'],
+])('should render properly for "%s" variant', (variant: Variant, expectedRole, color) => {
+  renderFlagMessage({ variant });
+
+  const item = screen.getByRole(expectedRole);
+  expect(item).toBeInTheDocument();
+  expect(item).toHaveStyle({ border: color });
+});
+
+function renderFlagMessage(props: Partial<FCProps<typeof FlagMessage>> = {}) {
+  return render(
+    <FlagMessage ariaLabel="label" variant="error" {...props}>
+      This is an error!
+    </FlagMessage>
+  );
+}
diff --git a/server/sonar-web/design-system/src/components/icons/FlagErrorIcon.tsx b/server/sonar-web/design-system/src/components/icons/FlagErrorIcon.tsx
new file mode 100644
index 00000000000..519b9a387a0
--- /dev/null
+++ b/server/sonar-web/design-system/src/components/icons/FlagErrorIcon.tsx
@@ -0,0 +1,34 @@
+/*
+ * 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 { useTheme } from '@emotion/react';
+import { themeColor } from '../../helpers/theme';
+import { CustomIcon, IconProps } from './Icon';
+
+export function FlagErrorIcon({ fill = 'iconError', ...iconProps }: IconProps) {
+  const theme = useTheme();
+  return (
+    <CustomIcon {...iconProps}>
+      <path
+        d="M7.364 1.707a1 1 0 0 1 1.414 0l5.657 5.657a1 1 0 0 1 0 1.414l-5.657 5.657a1 1 0 0 1-1.414 0L1.707 8.778a1 1 0 0 1 0-1.414l5.657-5.657ZM7 5a1 1 0 0 1 2 0v3a1 1 0 1 1-2 0V5Zm1 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z"
+        style={{ fill: themeColor(fill)({ theme }) }}
+      />
+    </CustomIcon>
+  );
+}
diff --git a/server/sonar-web/design-system/src/components/icons/FlagInfoIcon.tsx b/server/sonar-web/design-system/src/components/icons/FlagInfoIcon.tsx
new file mode 100644
index 00000000000..3aef3045e4a
--- /dev/null
+++ b/server/sonar-web/design-system/src/components/icons/FlagInfoIcon.tsx
@@ -0,0 +1,34 @@
+/*
+ * 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 { useTheme } from '@emotion/react';
+import { themeColor } from '../../helpers/theme';
+import { CustomIcon, IconProps } from './Icon';
+
+export function FlagInfoIcon({ fill = 'iconInfo', ...iconProps }: IconProps) {
+  const theme = useTheme();
+  return (
+    <CustomIcon {...iconProps}>
+      <path
+        d="M14 8A6 6 0 1 1 2 8a6 6 0 0 1 12 0Zm-5 3a1 1 0 1 1-2 0V8a1 1 0 0 1 2 0v3ZM8 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+        style={{ fill: themeColor(fill)({ theme }) }}
+      />
+    </CustomIcon>
+  );
+}
diff --git a/server/sonar-web/design-system/src/components/icons/FlagSuccessIcon.tsx b/server/sonar-web/design-system/src/components/icons/FlagSuccessIcon.tsx
new file mode 100644
index 00000000000..748b8a5bc31
--- /dev/null
+++ b/server/sonar-web/design-system/src/components/icons/FlagSuccessIcon.tsx
@@ -0,0 +1,34 @@
+/*
+ * 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 { useTheme } from '@emotion/react';
+import { themeColor } from '../../helpers/theme';
+import { CustomIcon, IconProps } from './Icon';
+
+export function FlagSuccessIcon({ fill = 'iconSuccess', ...iconProps }: IconProps) {
+  const theme = useTheme();
+  return (
+    <CustomIcon {...iconProps}>
+      <path
+        d="M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12Zm3.207-6.793a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l3.5-3.5Z"
+        style={{ fill: themeColor(fill)({ theme }) }}
+      />
+    </CustomIcon>
+  );
+}
diff --git a/server/sonar-web/design-system/src/components/icons/FlagWarningIcon.tsx b/server/sonar-web/design-system/src/components/icons/FlagWarningIcon.tsx
new file mode 100644
index 00000000000..0550bbb9c96
--- /dev/null
+++ b/server/sonar-web/design-system/src/components/icons/FlagWarningIcon.tsx
@@ -0,0 +1,34 @@
+/*
+ * 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 { useTheme } from '@emotion/react';
+import { themeColor } from '../../helpers/theme';
+import { CustomIcon, IconProps } from './Icon';
+
+export function FlagWarningIcon({ fill = 'iconWarning', ...iconProps }: IconProps) {
+  const theme = useTheme();
+  return (
+    <CustomIcon {...iconProps}>
+      <path
+        d="M14.41 12.55a1 1 0 0 1-.893 1.45H2.625a1 1 0 0 1-.892-1.45L7.178 1.766a1 1 0 0 1 1.786 0l5.445 10.782ZM7 6a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0V6Zm1 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z"
+        style={{ fill: themeColor(fill)({ theme }) }}
+      />
+    </CustomIcon>
+  );
+}
diff --git a/server/sonar-web/design-system/src/components/icons/HomeFillIcon.tsx b/server/sonar-web/design-system/src/components/icons/HomeFillIcon.tsx
new file mode 100644
index 00000000000..72d7cd65059
--- /dev/null
+++ b/server/sonar-web/design-system/src/components/icons/HomeFillIcon.tsx
@@ -0,0 +1,35 @@
+/*
+ * 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 { useTheme } from '@emotion/react';
+import { themeColor } from '../../helpers/theme';
+import { CustomIcon, IconProps } from './Icon';
+
+export default function HomeFillIcon({ fill = 'iconFavorite', ...iconProps }: IconProps) {
+  const theme = useTheme();
+  const fillColor = themeColor(fill)({ theme });
+  return (
+    <CustomIcon {...iconProps}>
+      <path
+        d="M6.9995 0.280296C6.602 0.280296 6.21634 0.415622 5.906 0.664003L0.657 4.864C0.242 5.196 0 5.699 0 6.23V13.25C0 13.7141 0.184374 14.1593 0.512563 14.4874C0.840752 14.8156 1.28587 15 1.75 15H5.25C5.44891 15 5.63968 14.921 5.78033 14.7803C5.92098 14.6397 6 14.4489 6 14.25V9H8V14.25C8 14.4489 8.07902 14.6397 8.21967 14.7803C8.36032 14.921 8.55109 15 8.75 15H12.25C12.7141 15 13.1592 14.8156 13.4874 14.4874C13.8156 14.1593 14 13.7141 14 13.25V6.231C14 5.699 13.758 5.196 13.343 4.864L8.093 0.664003C7.78266 0.415622 7.397 0.280296 6.9995 0.280296Z"
+        fill={fillColor}
+      />
+    </CustomIcon>
+  );
+}
diff --git a/server/sonar-web/design-system/src/components/icons/HomeIcon.tsx b/server/sonar-web/design-system/src/components/icons/HomeIcon.tsx
new file mode 100644
index 00000000000..a4a6d07ba01
--- /dev/null
+++ b/server/sonar-web/design-system/src/components/icons/HomeIcon.tsx
@@ -0,0 +1,23 @@
+/*
+ * 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 { HomeIcon } from '@primer/octicons-react';
+import { OcticonHoc } from './Icon';
+
+export default OcticonHoc(HomeIcon);
diff --git a/server/sonar-web/design-system/src/components/icons/index.ts b/server/sonar-web/design-system/src/components/icons/index.ts
index 8b30b791711..3b681fbe1b8 100644
--- a/server/sonar-web/design-system/src/components/icons/index.ts
+++ b/server/sonar-web/design-system/src/components/icons/index.ts
@@ -18,6 +18,12 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 export { default as ClockIcon } from './ClockIcon';
+export { FlagErrorIcon } from './FlagErrorIcon';
+export { FlagInfoIcon } from './FlagInfoIcon';
+export { FlagSuccessIcon } from './FlagSuccessIcon';
+export { FlagWarningIcon } from './FlagWarningIcon';
+export { default as HomeFillIcon } from './HomeFillIcon';
+export { default as HomeIcon } from './HomeIcon';
 export { default as MenuHelpIcon } from './MenuHelpIcon';
 export { default as MenuSearchIcon } from './MenuSearchIcon';
 export { default as OpenNewTabIcon } from './OpenNewTabIcon';
diff --git a/server/sonar-web/design-system/src/components/index.ts b/server/sonar-web/design-system/src/components/index.ts
index e7bdcf4ca80..452c570433e 100644
--- a/server/sonar-web/design-system/src/components/index.ts
+++ b/server/sonar-web/design-system/src/components/index.ts
@@ -24,6 +24,7 @@ export { default as DeferredSpinner } from './DeferredSpinner';
 export { default as Dropdown } from './Dropdown';
 export * from './DropdownMenu';
 export { default as DropdownToggler } from './DropdownToggler';
+export { FlagMessage } from './FlagMessage';
 export * from './GenericAvatar';
 export * from './icons';
 export { default as InputSearch } from './InputSearch';