mirror of
https://github.com/hasura/graphql-engine.git
synced 2024-12-14 17:02:49 +03:00
Improve loading UX on permissions editor
PR-URL: https://github.com/hasura/graphql-engine-mono/pull/9457 GitOrigin-RevId: 548c4ccadd4672d7cbdb12e637e919243edb0f2a
This commit is contained in:
parent
be252cddf7
commit
3e6b7816df
@ -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>
|
||||
|
@ -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)}
|
||||
|
@ -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} />;
|
||||
|
@ -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"
|
||||
|
@ -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',
|
||||
});
|
||||
|
||||
|
@ -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,
|
||||
};
|
||||
}) ?? [],
|
||||
};
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user