fix: members access

Author: ifokeev

src/layouts/SettingsLayout/index.tsx

@@ -1,20 +1,21 @@
 import { useTranslation } from "react-i18next";
 
-import SidebarLayout from "@/layouts/SidebarLayout";
 import SidebarMenu from "@/components/SidebarMenu";
 import type { Location } from "@/hooks/useLocation";
+import SidebarLayout from "@/layouts/SidebarLayout";
 import type { SidebarMenuItem } from "@/mocks/sidebarMenu";
+import CurrentUserStore from "@/stores/CurrentUserStore";
+import { Roles } from "@/types/team";
 
+import AlertsIcon from "@/assets/alert-logs.svg";
 import DataSourceIcon from "@/assets/data-source.svg";
-import SQLAPIIcon from "@/assets/sql-api.svg";
 import MembersIcon from "@/assets/members.svg";
-import RolesAndAccessIcon from "@/assets/roles-and-access.svg";
 import PersonalInfoIcon from "@/assets/personal-info.svg";
-import AlertsIcon from "@/assets/alert-logs.svg";
 import ReportsIcon from "@/assets/report-logs.svg";
-import QueryIcon from "@/assets/query-logs.svg";
-import TeamsIcon from "@/assets/team.svg";
+import RolesAndAccessIcon from "@/assets/roles-and-access.svg";
 import Icon from "@/assets/settings-active.svg";
+import SQLAPIIcon from "@/assets/sql-api.svg";
+import TeamsIcon from "@/assets/team.svg";
 
 import type { ReactNode } from "react";
 
@@ -31,6 +32,8 @@ const SettingsLayout: React.FC<SidebarLayoutProps> = ({
 }) => {
   const { t } = useTranslation(["pages"]);
   const splitedPath = (location?.pathname || "").split("/");
+  const { currentTeam } = CurrentUserStore();
+  const isMember = currentTeam?.role === Roles.member;
   const titleKey = splitedPath?.[2];
   const subKey = splitedPath?.[1];
 
@@ -53,12 +56,13 @@ const SettingsLayout: React.FC<SidebarLayoutProps> = ({
       href: "/settings/members",
       icon: <MembersIcon />,
     },
-    {
+    (!isMember && {
       key: "roles",
       label: t("common:words.roles_and_access"),
       href: "/settings/roles",
       icon: <RolesAndAccessIcon />,
-    },
+    }) ||
+      null,
     {
       key: "teams",
       label: t("common:words.teams"),
@@ -71,7 +75,7 @@ const SettingsLayout: React.FC<SidebarLayoutProps> = ({
       href: "/settings/info",
       icon: <PersonalInfoIcon />,
     },
-  ];
+  ].filter((item) => !!item?.key);
 
   const singalsMenuItems: SidebarMenuItem[] = [
     {

src/pages/DataSources/index.tsx

@@ -88,42 +88,48 @@ export const DataSources = ({
       <Card
         title={dataSource.name}
         titleTooltip={dataSource.name}
-        onTitleClick={() => dataSource.id && onEdit(dataSource.id)}
+        onTitleClick={() =>
+          !disableCreate && dataSource.id && onEdit(dataSource.id)
+        }
         extra={
-          <Dropdown
-            className={styles.btn}
-            trigger={["click"]}
-            menu={{
-              items: [
-                {
-                  key: "edit",
-                  label: t("common:words.edit"),
-                  onClick: () => dataSource.id && onEdit(dataSource.id),
-                },
-                {
-                  key: "generate",
-                  label: t("common:words.generate_models"),
-                  onClick: () =>
-                    dataSource.id && onGenerateModel(dataSource.id),
-                },
-                {
-                  key: "delete",
-                  className: styles.deleteItem,
-                  label: (
-                    <ConfirmModal
-                      title={t("common:words.delete_datasource")}
-                      className={styles.deleteText}
-                      onConfirm={() => dataSource.id && onDelete(dataSource.id)}
-                    >
-                      {t("common:words.delete")}
-                    </ConfirmModal>
-                  ),
-                },
-              ],
-            }}
-          >
-            <SettingOutlined key="setting" />
-          </Dropdown>
+          !disableCreate && (
+            <Dropdown
+              className={styles.btn}
+              trigger={["click"]}
+              menu={{
+                items: [
+                  {
+                    key: "edit",
+                    label: t("common:words.edit"),
+                    onClick: () => dataSource.id && onEdit(dataSource.id),
+                  },
+                  {
+                    key: "generate",
+                    label: t("common:words.generate_models"),
+                    onClick: () =>
+                      dataSource.id && onGenerateModel(dataSource.id),
+                  },
+                  {
+                    key: "delete",
+                    className: styles.deleteItem,
+                    label: (
+                      <ConfirmModal
+                        title={t("common:words.delete_datasource")}
+                        className={styles.deleteText}
+                        onConfirm={() =>
+                          dataSource.id && onDelete(dataSource.id)
+                        }
+                      >
+                        {t("common:words.delete")}
+                      </ConfirmModal>
+                    ),
+                  },
+                ],
+              }}
+            >
+              <SettingOutlined key="setting" />
+            </Dropdown>
+          )
         }
       >
         <dl>

src/pages/Members/index.module.less

@@ -7,10 +7,26 @@
 }
 
 .removeBtn {
-  padding: 0;
-  color: var(--color-primary);
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  padding: 5px !important;
+  color: rgba(0, 0, 0, 0.5);
+  font-weight: 700;
+  font-size: 9px;
+
   span {
-    font-size: 12px;
+    font-weight: 700;
+    font-size: 9px;
+  }
+
+  &:hover {
+    color: black;
+    background: rgba(163, 27, 203, 0.1) !important;
+
+    path {
+      stroke: rgba(163, 27, 203, 1);
+    }
   }
 }
 

src/pages/Members/index.tsx

@@ -1,19 +1,16 @@
+import { useParams } from "@vitjs/runtime";
 import { Col, Row, Select, Space, Spin, Tag, Typography, message } from "antd";
 import { useTranslation } from "react-i18next";
-import { useParams } from "@vitjs/runtime";
 
+import Avatar from "@/components/Avatar";
+import Button from "@/components/Button";
+import Card from "@/components/Card";
+import ConfirmModal from "@/components/ConfirmModal";
 import type { Invite } from "@/components/MembersForm";
 import MembersForm from "@/components/MembersForm";
-import Card from "@/components/Card";
-import Avatar from "@/components/Avatar";
 import Modal from "@/components/Modal";
-import PageHeader from "@/components/PageHeader";
-import ConfirmModal from "@/components/ConfirmModal";
 import NoMember from "@/components/NoMember";
-import Button from "@/components/Button";
-import formatTime from "@/utils/helpers/formatTime";
-import { createRoleOptions } from "@/utils/helpers/createRoleOptions";
-import { capitalize } from "@/utils/helpers/capitalize";
+import PageHeader from "@/components/PageHeader";
 import type {
   AllAccessListsQuery,
   Member_Roles_Set_Input,
@@ -26,12 +23,16 @@ import {
   useUpdateMemberRoleMutation,
 } from "@/graphql/generated";
 import useCheckResponse from "@/hooks/useCheckResponse";
+import useLocation from "@/hooks/useLocation";
 import CurrentUserStore from "@/stores/CurrentUserStore";
 import type { AccessList, Member } from "@/types/team";
 import { ChangeableRoles, Roles } from "@/types/team";
-import useLocation from "@/hooks/useLocation";
 import { MEMBERS } from "@/utils/constants/paths";
+import { capitalize } from "@/utils/helpers/capitalize";
+import { createRoleOptions } from "@/utils/helpers/createRoleOptions";
+import formatTime from "@/utils/helpers/formatTime";
 
+import TrashColoredIcon from "@/assets/trash-colored.svg";
 import TrashIcon from "@/assets/trash.svg";
 
 import styles from "./index.module.less";
@@ -109,7 +110,9 @@ export const Members: React.FC<MembersProps> = ({
               title={t("common:words.delete_member")}
               onConfirm={() => onRemove(member)}
             >
-              <Button className={styles.removeBtn} ghost icon={<TrashIcon />} />
+              <Button size="small" type="text" className={styles.removeBtn}>
+                <TrashColoredIcon />
+              </Button>
             </ConfirmModal>
           )
         }