SONAR-22610 Adjust flag message and table header in users page

use doc link

Use word sticky

diff --git a/server/sonar-web/src/main/js/app/components/admin/StickyTable.tsx b/server/sonar-web/src/main/js/app/components/admin/StickyTable.tsx
new file mode 100644 (file)
index 0000000..4bf9ac0
--- /dev/null
+++ b/server/sonar-web/src/main/js/app/components/admin/StickyTable.tsx
@@ -0,0 +1,32 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2024 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 { LAYOUT_GLOBAL_NAV_HEIGHT, Table, themeColor } from 'design-system';
+
+export const LAYOUT_ADMIN_NAV_HEIGHT = 92;
+
+export const StickyTable = styled(Table)`
+  & th {
+    position: sticky;
+    top: ${LAYOUT_ADMIN_NAV_HEIGHT + LAYOUT_GLOBAL_NAV_HEIGHT}px;
+    background: ${themeColor('backgroundSecondary')};
+  }
+`;

diff --git a/server/sonar-web/src/main/js/apps/users/Header.tsx b/server/sonar-web/src/main/js/apps/users/Header.tsx
index 7dc105c9017195591473e750044821cd9c192ea4..61734b3c962250f9db57022dd305f6b45f5922f8 100644 (file)
--- a/server/sonar-web/src/main/js/apps/users/Header.tsx
+++ b/server/sonar-web/src/main/js/apps/users/Header.tsx
@@ -19,11 +19,11 @@
  */
 
 import { Button, ButtonVariety } from '@sonarsource/echoes-react';
-import { FlagMessage, Link, Title } from 'design-system';
+import { Title } from 'design-system';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
+import DocumentationLink from '../../components/common/DocumentationLink';
 import { DocLink } from '../../helpers/doc-links';
-import { useDocUrl } from '../../helpers/docs';
 import { translate } from '../../helpers/l10n';
 import UserForm from './components/UserForm';
 
@@ -32,7 +32,6 @@ interface Props {
 }
 
 export default function Header(props: Props) {
-  const docUrl = useDocUrl(DocLink.AuthOverview);
   const [openUserForm, setOpenUserForm] = React.useState(false);
 
   const { manageProvider } = props;
@@ -54,18 +53,28 @@ export default function Header(props: Props) {
         {manageProvider === undefined ? (
           <span>{translate('users.page.description')}</span>
         ) : (
-          <FlagMessage className="sw-max-w-3/4 sw-mb-4" variant="info">
-            <span>
+          <div className="sw-max-w-3/4 sw-mb-4">
+            <FormattedMessage
+              defaultMessage={translate('users.page.managed_description')}
+              id="users.page.managed_description"
+              values={{
+                provider: translate(`managed.${manageProvider}`),
+              }}
+            />
+            <div className="sw-mt-2">
               <FormattedMessage
-                defaultMessage={translate('users.page.managed_description')}
-                id="users.page.managed_description"
+                defaultMessage={translate('users.page.managed_description2')}
+                id="users.page.managed_description2"
                 values={{
-                  provider: manageProvider,
-                  link: <Link to={docUrl}>{translate('documentation')}</Link>,
+                  link: (
+                    <DocumentationLink to={DocLink.AuthOverview}>
+                      {translate('users.page.managing_users')}
+                    </DocumentationLink>
+                  ),
                 }}
               />
-            </span>
-          </FlagMessage>
+            </div>
+          </div>
         )}
       </div>
 

diff --git a/server/sonar-web/src/main/js/apps/users/UsersList.tsx b/server/sonar-web/src/main/js/apps/users/UsersList.tsx
index 05f957b3325e0e10772ce64b15e7996e66770d5e..122d55eea3c25f7e9edb92d23acfc4031d339262 100644 (file)
--- a/server/sonar-web/src/main/js/apps/users/UsersList.tsx
+++ b/server/sonar-web/src/main/js/apps/users/UsersList.tsx
@@ -17,9 +17,10 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { ActionCell, ContentCell, HelperHintIcon, Table, TableRow } from 'design-system';
+import { ActionCell, ContentCell, HelperHintIcon, TableRow } from 'design-system';
 import * as React from 'react';
 import HelpTooltip from '~sonar-aligned/components/controls/HelpTooltip';
+import { StickyTable } from '../../app/components/admin/StickyTable';
 import { translate } from '../../helpers/l10n';
 import { IdentityProvider, Provider } from '../../types/types';
 import { RestUserDetailed } from '../../types/users';
@@ -52,7 +53,7 @@ export default function UsersList({ identityProviders, users, manageProvider }:
   );
 
   return (
-    <Table columnCount={7} header={header} id="users-list">
+    <StickyTable columnCount={7} header={header} id="users-list">
       {users.map((user) => (
         <UserListItem
           identityProvider={identityProviders.find(
@@ -63,6 +64,6 @@ export default function UsersList({ identityProviders, users, manageProvider }:
           manageProvider={manageProvider}
         />
       ))}
-    </Table>
+    </StickyTable>
   );
 }

diff --git a/server/sonar-web/src/main/js/components/controls/ManagedFilter.tsx b/server/sonar-web/src/main/js/components/controls/ManagedFilter.tsx
index 533c3673e3f70408eb04ede7b1e2e3d77b376516..1d28a8e172bb6c8b37840e8026db1746ae6b3073 100644 (file)
--- a/server/sonar-web/src/main/js/components/controls/ManagedFilter.tsx
+++ b/server/sonar-web/src/main/js/components/controls/ManagedFilter.tsx
@@ -19,7 +19,7 @@
  */
 import { ToggleButton } from 'design-system';
 import * as React from 'react';
-import { translate } from '../../helpers/l10n';
+import { translate, translateWithParameters } from '../../helpers/l10n';
 import { Provider } from '../../types/types';
 
 interface ManagedFilterProps {
@@ -43,10 +43,13 @@ export function ManagedFilter(props: Readonly<ManagedFilterProps>) {
         disabled={loading}
         options={[
           { label: translate('all'), value: 'all' },
-          { label: translate('managed'), value: true },
+          {
+            label: translateWithParameters('managed', translate(`managed.${manageProvider}`)),
+            value: true,
+          },
           { label: translate('local'), value: false },
         ]}
-        onChange={(filterOption) => {
+        onChange={(filterOption: 'all' | boolean | undefined) => {
           if (filterOption === 'all') {
             props.setManaged(undefined);
           } else {

diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
index af18ebc2f0fa274f468f3b239a7ed48f61484aea..b563a9d59f71f2f4c5a236ec67f60bb76ccd3d30 100644 (file)
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -314,7 +314,10 @@ less_than_1_hour_ago=< 1 hour ago
 local=Local
 logging_out=You're logging out, please wait...
 manage=Manage
-managed=Managed
+managed=From {0}
+managed.github=GitHub
+managed.gitlab=GitLab
+managed.SCIM=IdP
 management=Management
 more_information=More information
 new_violations=New violations
@@ -5197,7 +5200,9 @@ encryption.how_to_use.content4=For each property that you want to encrypt, gener
 #------------------------------------------------------------------------------
 users.page=Users
 users.page.description=Create and administer individual users.
-users.page.managed_description=Your instance is managed by {provider}. No modification is allowed except for tokens and SCM account information. You can still delete local users. All other operations should be done on your identity provider. See {link} for help managing users.
+users.page.managed_description=Your instance is managed by {provider}. No modification is allowed except for tokens and SCM account information.
+users.page.managed_description2=We recommend that you delete local users to ensure all operations are done on your identity provider. Read more about {link}.
+users.page.managing_users=managing users
 users.info=User
 users.deactivate=Deactivate
 users.deactivate_user=Deactivate User