You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by mi...@apache.org on 2024/02/15 16:46:42 UTC
(superset) branch master updated: fix: RLS modal overflow (#27128)
This is an automated email from the ASF dual-hosted git repository.
michaelsmolina pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new 506ea756ad fix: RLS modal overflow (#27128)
506ea756ad is described below
commit 506ea756ad858f7325adecc73e4969f4476c642d
Author: Michael S. Molina <70...@users.noreply.github.com>
AuthorDate: Thu Feb 15 11:46:35 2024 -0500
fix: RLS modal overflow (#27128)
---
.../src/features/rls/RowLevelSecurityModal.tsx | 88 ++++++++++------------
superset-frontend/src/features/rls/constants.ts | 2 +-
2 files changed, 42 insertions(+), 48 deletions(-)
diff --git a/superset-frontend/src/features/rls/RowLevelSecurityModal.tsx b/superset-frontend/src/features/rls/RowLevelSecurityModal.tsx
index 135803fc8f..44753f8dfc 100644
--- a/superset-frontend/src/features/rls/RowLevelSecurityModal.tsx
+++ b/superset-frontend/src/features/rls/RowLevelSecurityModal.tsx
@@ -28,12 +28,13 @@ import Modal from 'src/components/Modal';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import Icons from 'src/components/Icons';
import Select from 'src/components/Select/Select';
+import { TextArea } from 'src/components/Input';
import AsyncSelect from 'src/components/Select/AsyncSelect';
import rison from 'rison';
import { LabeledErrorBoundInput } from 'src/components/Form';
import InfoTooltip from 'src/components/InfoTooltip';
import { useSingleViewResource } from 'src/views/CRUD/hooks';
-import { FilterOptions } from './constants';
+import { FILTER_OPTIONS } from './constants';
import { FilterType, RLSObject, RoleObject, TableObject } from './types';
const noMargins = css`
@@ -48,13 +49,11 @@ const StyledModal = styled(Modal)`
max-width: 1200px;
min-width: min-content;
width: 100%;
- .ant-modal-body {
- overflow: initial;
- }
.ant-modal-footer {
white-space: nowrap;
}
`;
+
const StyledIcon = (theme: SupersetTheme) => css`
margin: auto ${theme.gridUnit * 2}px auto 0;
color: ${theme.colors.grayscale.base};
@@ -106,11 +105,9 @@ const StyledInputContainer = styled.div`
}
`;
-const StyledTextArea = styled.textarea`
- height: 100px;
+const StyledTextArea = styled(TextArea)`
resize: none;
margin-top: ${({ theme }) => theme.gridUnit}px;
- border: 1px solid ${({ theme }) => theme.colors.secondary.light3};
`;
export interface RowLevelSecurityModalProps {
@@ -155,23 +152,25 @@ function RowLevelSecurityModal(props: RowLevelSecurityModalProps) {
addDangerToast,
);
- // initialize
- useEffect(() => {
- if (!isEditMode) {
- setCurrentRule({ ...DEAFULT_RULE });
- } else if (rule?.id !== null && !loading && !fetchError) {
- fetchResource(rule.id as number);
- }
- }, [rule]);
+ const updateRuleState = (name: string, value: any) => {
+ setCurrentRule(currentRuleData => ({
+ ...currentRuleData,
+ [name]: value,
+ }));
+ };
- useEffect(() => {
- if (resource) {
- setCurrentRule({ ...resource, id: rule?.id });
- const selectedTableAndRoles = getSelectedData();
- updateRuleState('tables', selectedTableAndRoles?.tables || []);
- updateRuleState('roles', selectedTableAndRoles?.roles || []);
+ // * state validators *
+ const validate = () => {
+ if (
+ currentRule?.name &&
+ currentRule?.clause &&
+ currentRule.tables?.length
+ ) {
+ setDisableSave(false);
+ } else {
+ setDisableSave(true);
}
- }, [resource]);
+ };
// find selected tables and roles
const getSelectedData = useCallback(() => {
@@ -202,6 +201,24 @@ function RowLevelSecurityModal(props: RowLevelSecurityModalProps) {
return { tables, roles };
}, [resource?.tables, resource?.roles]);
+ // initialize
+ useEffect(() => {
+ if (!isEditMode) {
+ setCurrentRule({ ...DEAFULT_RULE });
+ } else if (rule?.id !== null && !loading && !fetchError) {
+ fetchResource(rule.id as number);
+ }
+ }, [rule]);
+
+ useEffect(() => {
+ if (resource) {
+ setCurrentRule({ ...resource, id: rule?.id });
+ const selectedTableAndRoles = getSelectedData();
+ updateRuleState('tables', selectedTableAndRoles?.tables || []);
+ updateRuleState('roles', selectedTableAndRoles?.roles || []);
+ }
+ }, [resource]);
+
// validate
const currentRuleSafe = currentRule || {};
useEffect(() => {
@@ -214,13 +231,6 @@ function RowLevelSecurityModal(props: RowLevelSecurityModalProps) {
label: string;
};
- const updateRuleState = (name: string, value: any) => {
- setCurrentRule(currentRuleData => ({
- ...currentRuleData,
- [name]: value,
- }));
- };
-
const onTextChange = (target: HTMLInputElement | HTMLTextAreaElement) => {
updateRuleState(target.name, target.value);
};
@@ -318,19 +328,6 @@ function RowLevelSecurityModal(props: RowLevelSecurityModalProps) {
[],
);
- // * state validators *
- const validate = () => {
- if (
- currentRule?.name &&
- currentRule?.clause &&
- currentRule.tables?.length
- ) {
- setDisableSave(false);
- } else {
- setDisableSave(true);
- }
- };
-
return (
<StyledModal
className="no-content-padding"
@@ -373,7 +370,6 @@ function RowLevelSecurityModal(props: RowLevelSecurityModalProps) {
hasTooltip
/>
</StyledInputContainer>
-
<StyledInputContainer>
<div className="control-label">
{t('Filter Type')}{' '}
@@ -390,12 +386,11 @@ function RowLevelSecurityModal(props: RowLevelSecurityModalProps) {
placeholder={t('Filter Type')}
onChange={onFilterChange}
value={currentRule?.filter_type}
- options={FilterOptions}
+ options={FILTER_OPTIONS}
data-test="rule-filter-type-test"
/>
</div>
</StyledInputContainer>
-
<StyledInputContainer>
<div className="control-label">
{t('Datasets')} <span className="required">*</span>
@@ -455,7 +450,6 @@ function RowLevelSecurityModal(props: RowLevelSecurityModalProps) {
data-test="group-key-test"
/>
</StyledInputContainer>
-
<StyledInputContainer>
<div className="control-label">
<LabeledErrorBoundInput
@@ -477,11 +471,11 @@ function RowLevelSecurityModal(props: RowLevelSecurityModalProps) {
/>
</div>
</StyledInputContainer>
-
<StyledInputContainer>
<div className="control-label">{t('Description')}</div>
<div className="input-container">
<StyledTextArea
+ rows={4}
name="description"
value={currentRule ? currentRule.description : ''}
onChange={event => onTextChange(event.target)}
diff --git a/superset-frontend/src/features/rls/constants.ts b/superset-frontend/src/features/rls/constants.ts
index ceb0982c5f..9bb0ca3e6c 100644
--- a/superset-frontend/src/features/rls/constants.ts
+++ b/superset-frontend/src/features/rls/constants.ts
@@ -19,7 +19,7 @@
import { t } from '@superset-ui/core';
-export const FilterOptions = [
+export const FILTER_OPTIONS = [
{
label: t('Regular'),
value: 'Regular',