hasura/graphql-engine
1
0
Fork 0
mirror of https://github.com/hasura/graphql-engine.git synced 2024-10-05 06:18:04 +03:00
Code Issues Projects Releases Wiki Activity

Improve loading UX on permissions editor

Browse Source 
PR-URL: https://github.com/hasura/graphql-engine-mono/pull/9457
GitOrigin-RevId: 548c4ccadd4672d7cbdb12e637e919243edb0f2a
This commit is contained in:
Julian 2023-06-08 10:20:47 -03:00 committed by hasura-bot
parent be252cddf7
commit 3e6b7816df
6 changed files with 41 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/libs/console/legacy-ce/src/lib/components/Common/Layout/RightContainer/RightContainer.tsx
View File

@ -1,12 +1,15 @@
import React from 'react';
import styles from './RightContainer.module.scss';
const RightContainer: React.FC = ({ children }) => {
const RightContainer: React.FC<{
style?: React.CSSProperties;
}> = ({ children, style }) => {
return (
<div className="container-fluid">
<div className="row">
<div
className={`${styles.main} ${styles.padd_left_remove} ${styles.padd_top}`}
style={style}
>
<div className={`${styles.rightBar}`}>{children}</div>
</div>

11
frontend/libs/console/legacy-ce/src/lib/components/Services/Data/TablePermissions/Permissions.js
View File

@ -1984,7 +1984,16 @@ class Permissions extends Component {
return (
<>
<RightContainer>
<RightContainer
style={
// Remove overflow for the new UI because it causes a double scrollbar and broken layout
this.props.showNewUI
? {
overflow: 'unset',
}
: undefined
}
>
<Analytics name="Permissions" {...REDACT_EVERYTHING}>
<div className={clsx(styles.container, 'bootstrap-jail')}>
{getHeader(currentTableSchema)}

3
frontend/libs/console/legacy-ce/src/lib/features/Permissions/PermissionsForm/PermissionsForm.tsx
View File

@ -27,6 +27,7 @@ import { useListAllTableColumns } from '../../Data';
import { useMetadataSource } from '../../MetadataAPI';
import useScrollIntoView from './hooks/useScrollIntoView';
import { getAllowedFilterKeys } from './hooks/dataFetchingHooks/useFormData/createFormData/index';
import Skeleton from 'react-loading-skeleton';
export interface ComponentProps {
dataSourceName: string;
@ -285,7 +286,7 @@ export const PermissionsForm = (props: PermissionsFormProps) => {
!metadataSource ||
!data.defaultValues
) {
return <IndicatorCard status="info">Loading...</IndicatorCard>;
return <Skeleton width={'100%'} height={300} />;
}
return <Component data={data} {...props} />;

5
frontend/libs/console/legacy-ce/src/lib/features/Permissions/PermissionsForm/components/RowPermissionsBuilder/RowPermissionBuilder.tsx
View File

@ -4,6 +4,7 @@ import { useFormContext } from 'react-hook-form';
import { RowPermissionsInput } from './components';
import { usePermissionTables } from './hooks/usePermissionTables';
import { usePermissionComparators } from './hooks/usePermissionComparators';
import Skeleton from 'react-loading-skeleton';
interface Props {
permissionsKey: 'check' | 'filter';
@ -23,13 +24,13 @@ export const RowPermissionBuilder = ({
const value = watch(permissionsKey);
const tables = usePermissionTables({
const { tables, isLoading } = usePermissionTables({
dataSourceName,
});
const comparators = usePermissionComparators();
if (!tables) return <>Loading</>;
if (isLoading || !tables) return <Skeleton />;
return (
<div
data-testid="row-permission-builder"

8
frontend/libs/console/legacy-ce/src/lib/features/Permissions/PermissionsForm/components/RowPermissionsBuilder/components/RowPermissionsInput.stories.tsx
View File

@ -709,7 +709,7 @@ export const NumericFloatValue: StoryObj<typeof RowPermissionsInput> = {
export const JsonbColumns: StoryObj<typeof RowPermissionsInput> = {
render: args => {
const tables = usePermissionTables({
const { tables } = usePermissionTables({
dataSourceName: 'default',
});
@ -751,7 +751,7 @@ export const JsonbColumns: StoryObj<typeof RowPermissionsInput> = {
export const JsonbColumnsHasKeys: StoryObj<typeof RowPermissionsInput> = {
render: args => {
const tables = usePermissionTables({
const { tables } = usePermissionTables({
dataSourceName: 'default',
});
@ -777,7 +777,7 @@ export const StringColumns: StoryObj<typeof RowPermissionsInput> = {
const [permissions, setPermissions] = useState<Permissions>({
name: { _eq: '' },
});
const tables = usePermissionTables({
const { tables } = usePermissionTables({
dataSourceName: 'default',
});
@ -823,7 +823,7 @@ export const NumberColumns: StoryObj<typeof RowPermissionsInput> = {
const [permissions, setPermissions] = useState<Permissions>({
id: { _eq: '1234' },
});
const tables = usePermissionTables({
const { tables } = usePermissionTables({
dataSourceName: 'default',
});

34
frontend/libs/console/legacy-ce/src/lib/features/Permissions/PermissionsForm/components/RowPermissionsBuilder/hooks/usePermissionTables.tsx
View File

@ -8,7 +8,7 @@ export const usePermissionTables = ({
dataSourceName,
}: {
dataSourceName: string;
}): Tables => {
}): { isLoading: boolean; tables: Tables | null } => {
const { data: sources, isLoading: isLoadingSources } = useSources();
const { data: tables, isLoading: isLoadingTables } = useTablesWithColumns({
dataSourceName,
@ -22,20 +22,22 @@ export const usePermissionTables = ({
});
if (isLoadingTables || isLoadingSuggestedRelationships || isLoadingSources)
return [];
return { isLoading: true, tables: null };
return (
tables?.map(({ metadataTable, columns }) => {
return {
table: metadataTable.table,
dataSource: sources?.find(source => source.name === dataSourceName),
relationships: getAllTableRelationships(
metadataTable,
dataSourceName,
suggestedRelationships
),
columns,
};
}) ?? []
);
return {
isLoading: false,
tables:
tables?.map(({ metadataTable, columns }) => {
return {
table: metadataTable.table,
dataSource: sources?.find(source => source.name === dataSourceName),
relationships: getAllTableRelationships(
metadataTable,
dataSourceName,
suggestedRelationships
),
columns,
};
}) ?? [],
};
};