Merge pull request #2137 from iamfaran/fix/2133-datasource-access

[Fix]: #2133 Data Source access control

Author: raheeliftikhar5

client/packages/lowcoder/src/components/PermissionDialog/DatasourcePermissionDialog.tsx

@@ -14,6 +14,44 @@ import { getDataSourcePermissionInfo } from "../../redux/selectors/datasourceSel
 import { StyledLoading } from "./commonComponents";
 import { PermissionRole } from "./Permission";
 import { getUser } from "../../redux/selectors/usersSelectors";
+import styled from "styled-components";
+import { TacoButton } from "components/button";
+import { AddIcon } from "icons";
+import { GreyTextColor } from "constants/style";
+
+const BottomWrapper = styled.div`
+  margin: 12px 16px 0 16px;
+  display: flex;
+  justify-content: flex-start;
+`;
+
+const AddPermissionButton = styled(TacoButton)`
+  &,
+  &:hover,
+  &:focus {
+    border: none;
+    box-shadow: none;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    line-height: 14px;
+    background: #ffffff;
+    transition: unset;
+  }
+
+  svg {
+    margin-right: 4px;
+  }
+
+  &:hover {
+    color: #315efb;
+
+    svg g path {
+      fill: #315efb;
+    }
+  }
+`;
 
 export const DatasourcePermissionDialog = (props: {
   datasourceId: string;
@@ -85,6 +123,19 @@ export const DatasourcePermissionDialog = (props: {
         }
         return list;
       }}
+      viewFooterRender={(_primaryModelProps, stepProps) => (
+        <BottomWrapper>
+          <AddPermissionButton
+            style={{ height: 28 }}
+            icon={<AddIcon style={{ color: GreyTextColor }} />}
+            onClick={() => {
+              stepProps.next();
+            }}
+          >
+            {trans("home.addMember")}
+          </AddPermissionButton>
+        </BottomWrapper>
+      )}
       addPermission={(userIds, groupIds, role, onSuccess) => {
         dispatch(
           grantDatasourcePermission(

client/packages/lowcoder/src/redux/sagas/datasourcePermissionSagas.ts

@@ -10,18 +10,17 @@ import { validateResponse } from "api/apiUtils";
 import log from "loglevel";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
 
-import { LibraryQuery } from "../../api/queryLibraryApi";
 import {
   DeleteDatasourcePermissionPayload,
   FetchDatasourcePermissionsPayload,
   GrantDatasourcePermissionPayload,
   UpdateDatasourcePermissionPayload,
 } from "../reduxActions/datasourcePermissionActions";
-import { DatasourcePermissionApi } from "../../api/datasourcePermissionApi";
+import { DatasourcePermissionApi, DatasourcePermissionInfo } from "../../api/datasourcePermissionApi";
 
 function* fetchPermissionsSaga(action: ReduxAction<FetchDatasourcePermissionsPayload>) {
   try {
-    const response: AxiosResponse<GenericApiResponse<LibraryQuery[]>> =
+    const response: AxiosResponse<GenericApiResponse<DatasourcePermissionInfo>> =
       yield DatasourcePermissionApi.fetchPermissions(action.payload.datasourceId);
     const isValidResponse: boolean = validateResponse(response);
     if (isValidResponse) {
@@ -61,13 +60,13 @@ function* grantPermissionSaga(
 
 function* updatePermissionSaga(action: ReduxAction<UpdateDatasourcePermissionPayload>) {
   try {
-    const response: AxiosResponse<GenericApiResponse<LibraryQuery>> =
+    const response: AxiosResponse<GenericApiResponse<boolean>> =
       yield DatasourcePermissionApi.updatePermission(action.payload);
     const isValidResponse: boolean = validateResponse(response);
 
     if (isValidResponse) {
       yield put({
-        type: ReduxActionTypes.UPDATE_QUERY_LIBRARY_SUCCESS,
+        type: ReduxActionTypes.UPDATE_DATASOURCE_PERMISSION_SUCCESS,
         payload: action.payload,
       });
     }