@admin-layout/gluestack-ui-mobile 9.0.4-alpha.38 → 9.0.4-alpha.43

package/src/components/WithConfiguration.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { Spinner, Box, Text, Heading } from '@gluestack-ui/themed';
+import { IPermissionType, IPreDefinedPermissions, IVisibility } from '@adminide-stack/core';
+import { useSetting, usePermissionAutoFetch } from '@adminide-stack/platform-client';
+import { get } from 'lodash-es';
+import { URI } from '@vscode-alt/monaco-editor/esm/vs/base/common/uri';
+
+export interface IWithConfigurationProps {
+    children?: React.ReactElement;
+    configKey: string;
+    permissionKeys?: IPreDefinedPermissions[];
+    permissionTypes?: IPermissionType[];
+    resourceName?: string;
+    settingsUri?: URI;
+}
+
+export const WithConfiguration = (props: IWithConfigurationProps) => {
+    const { configKey, children, permissionKeys, resourceName, permissionTypes } = props;
+
+    const {
+        data,
+        loading: settingsLoading,
+        updateConfiguration: _,
+    } = useSetting({
+        configKey,
+        overrides: { resource: props.settingsUri },
+    });
+    const { data: permissions, loading: permissionLoading } = usePermissionAutoFetch();
+
+    const isPrivate = React.useMemo(
+        () => IVisibility.Private === data?.resolveConfiguration,
+        [data?.resolveConfiguration],
+    );
+
+    const hasPermission = React.useMemo(() => {
+        if (isPrivate && permissions && Array.isArray(permissionKeys)) {
+            return permissionKeys.some((key) => permissionTypes.includes(get(permissions?.resolveConfiguration, key)));
+        }
+        return false;
+    }, [isPrivate, permissions]);
+
+    const isLoading = React.useMemo(() => permissionLoading || settingsLoading, [permissionLoading, settingsLoading]);
+
+    if (isLoading) {
+        return <Spinner color={'#ff5a00'} />;
+    }
+
+    // if public or has permission
+    if (!isPrivate || hasPermission) {
+        return children;
+    }
+
+    if (!hasPermission) {
+        return (
+            <Box>
+                <Heading>Missing Permission</Heading>
+                <Text>{`You don't have the required permission to access ${resourceName || 'this resource'} `}</Text>
+            </Box>
+        );
+    }
+    return (
+        <Box>
+            <Heading>{`Private ${resourceName || 'Resource'}`}</Heading>
+            <Text>{`You are trying to access private ${resourceName || 'resource'}.`}</Text>
+        </Box>
+    );
+};
+
+WithConfiguration.defaultProps = {
+    permissionTypes: [IPermissionType.Allow],
+};
+
+export const WithConfigurationContainer = (props: IWithConfigurationProps) => <WithConfiguration {...props} />;

package/src/components/WithPermission.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { Spinner, Box, Text, Heading } from '@gluestack-ui/themed';
+import { IPermissionType, IPreDefinedPermissions } from '@adminide-stack/core';
+import { get } from 'lodash-es';
+import { usePermissionAutoFetch } from './usePermissionAutoFetch';
+import { isUserAuthenticated } from '@adminide-stack/user-auth0-client';
+
+export enum WithPermissionBehaviour {
+    hide,
+    showUnAuthorized,
+    showAlternative,
+}
+
+export interface IWithPermissionProps {
+    children?: React.ReactElement;
+    permissionKeys: IPreDefinedPermissions[];
+    permissionTypes?: IPermissionType[];
+    behaviour?: WithPermissionBehaviour;
+    message?: string;
+    alternative?: React.ReactElement;
+    render?: React.FunctionComponent<{ hasPermission: boolean }>;
+}
+
+export const WithPermission = ({
+    permissionKeys,
+    children,
+    permissionTypes = [IPermissionType.Allow],
+    behaviour = WithPermissionBehaviour.hide,
+    message = "You don't have permission to access this resource, contact owner",
+    alternative,
+    render,
+}: IWithPermissionProps) => {
+    const { data: permissions, loading: permissionLoading, refetch } = usePermissionAutoFetch();
+    const { authenticated } = isUserAuthenticated();
+
+    const hasPermission = React.useMemo(() => {
+        //  const permissionData = {...permissions?.resolveConfiguration,account:{...permissions?.resolveConfiguration?.account,user:{...permissions?.resolveConfiguration?.account?.user,secure:authenticated ? 'Allow' : 'Deny'}}};
+        return permissionKeys.some((key) => permissionTypes.includes(get(permissions?.resolveConfiguration, key)));
+    }, [permissions, permissionTypes, permissionKeys]);
+
+    console.log('hasPermission', hasPermission);
+    console.log('permissionKeys', permissionKeys);
+    console.log('permissions', JSON.stringify(permissions));
+
+    if (permissionLoading) {
+        return <Spinner />;
+    }
+
+    if (typeof render === 'function') {
+        return render({ hasPermission });
+    }
+
+    if (hasPermission) {
+        return children;
+    }
+
+    if (behaviour === WithPermissionBehaviour.showAlternative) {
+        return alternative;
+    }
+    if (behaviour === WithPermissionBehaviour.showUnAuthorized) {
+        if (permissionLoading) {
+            return <Spinner />;
+        }
+        return (
+            <Box>
+                <Heading>Missing Permission</Heading>
+                <Text>{message}</Text>
+            </Box>
+        );
+    }
+    return null;
+};
+
+WithPermission.defaultProps = {
+    permissionTypes: [IPermissionType.Allow],
+    behaviour: WithPermissionBehaviour.hide,
+    message: "You don't have permission to access this resource, contact owner",
+    disabledProps: {
+        disabled: true,
+    },
+};
+
+export const WithPermissionContainer = React.memo((props: IWithPermissionProps) => <WithPermission {...props} />);
+export default WithPermissionContainer;
+// export const WithPermissionContainer = (props: IWithPermissionProps) => <WithPermission {...props} />;

package/src/components/WithPolicy.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { ReactElement } from 'react';
+import { Spinner } from '@gluestack-ui/themed';
+import { logger } from '@cdm-logger/client';
+import { useSetting } from '@adminide-stack/platform-client';
+
+interface IProps {
+    policyKey: string;
+    Child: React.FC<{ value: unknown }>;
+    childProps?: Record<string, any>;
+    showLoading?: boolean;
+    skeletonProps?: Record<string, unknown>;
+}
+
+export const WithPolicy = (props: IProps): ReactElement => {
+    const { policyKey, showLoading, Child, skeletonProps = {}, childProps = {} } = props;
+    const {
+        data: policy,
+        loading,
+        error,
+    } = useSetting({
+        configKey: policyKey,
+    });
+    if (error) {
+        logger.error(error, `WithPolicy.name`);
+    }
+    if (showLoading && loading) {
+        return <Spinner color={'#ff5a00'} />;
+    }
+
+    return <Child {...childProps} value={policy?.resolveConfiguration} />;
+};

package/src/components/index.ts

@@ -7,4 +7,9 @@ export * from './ErrorBounday';
 export * from './NavigationComponent';
 export * from './ToastAlert';
 export * from './with-interactions-managed';
-export * from './AuthWrapper'
+export * from './AuthWrapper';
+export * from './WithPermission';
+export * from './WithConfiguration';
+export * from './WithPolicy';
+export * from './usePermissionAutoFetch';
+export * from './useSetting';

package/src/components/usePermissionAutoFetch.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { IResourceAuthority, IConfigFragmentName } from '@adminide-stack/core';
+import { useGetTeamContextQuery } from '@adminide-stack/platform-client';
+import { useSetting } from './useSetting';
+
+interface userPermissionAutoFetchProps {
+    configKey?: string;
+}
+export const usePermissionAutoFetch = (options?: userPermissionAutoFetchProps) => {
+    const { data, loading } = useGetTeamContextQuery();
+    const teamData = React.useMemo(() => data?.getTeamContext, [data]);
+    // const teamData = data?.getTeamContext;
+
+    const { loading: settingLoading, ...remaining } = useSetting({
+        configKey: options?.configKey || '',
+        overrides: {
+            resource: teamData?.teamUri ?? null,
+        },
+        options: {
+            forceExist: false,
+            authority: IResourceAuthority.Defaultpermissions,
+            fragment: IConfigFragmentName.Roles,
+        },
+    });
+    console.log('---remaining', JSON.stringify(remaining?.data));
+    return { ...remaining, loading: loading || settingLoading };
+};

package/src/components/useSetting.tsx

@@ -0,0 +1,144 @@
+import React from 'react';
+import {
+    IResolveConfigurationQuery,
+    IResolveConfigurationQueryVariables,
+    IPreferencesInput,
+    IPreferencesOpenOptionsInput,
+    IUpdateConfigurationMutation,
+    IConfigurationOverridesInput,
+    ConfigurationTarget,
+} from '@adminide-stack/core';
+import { QueryResult } from '@apollo/client/react';
+import { omitBy, isNil } from 'lodash-es';
+import { ExecutionResult } from 'graphql';
+import {
+    useResolveConfigurationQuery,
+    useOpenPreferencesSettingsQuery,
+    useUpdateConfigurationMutation,
+} from '@adminide-stack/platform-client';
+
+export interface ISettingsVariable {
+    overrides?: IConfigurationOverridesInput;
+    configKey: string;
+    options?: IPreferencesOpenOptionsInput;
+    skip?: boolean;
+}
+
+interface IResponse extends QueryResult<IResolveConfigurationQuery, IResolveConfigurationQueryVariables> {
+    preferencesInput?: IPreferencesInput;
+    updateConfiguration?: ({
+        updateKey,
+        value,
+        updateOverrides,
+        target,
+    }: {
+        updateKey?: string;
+        value: string | boolean | number;
+        updateOverrides?: IConfigurationOverridesInput;
+        target?: ConfigurationTarget;
+    }) => Promise<ExecutionResult<IUpdateConfigurationMutation>>;
+}
+
+/**
+ * Provides configuration for Organization and OrganizationResources. By default, it provides Organization configuration.
+ * If you need `resource` level configuration then, you need to provide resource URI in `overrides`.
+ * @param baseOptions
+ */
+export const useSetting = (settingsVariable: ISettingsVariable): IResponse => {
+    const { overrides, configKey, options, skip = false } = settingsVariable;
+    const targetResource = overrides?.resource ?? null;
+    console.log('---targetResource', targetResource);
+    let prefLoaded = false;
+    const {
+        data: prefData,
+        error: prefError,
+        loading: perfLoading,
+        refetch: refetchPrefData,
+    } = useOpenPreferencesSettingsQuery({
+        variables: { resource: targetResource, options },
+        fetchPolicy: 'cache-and-network', // to make `{always: true}` to work
+        skip: prefLoaded,
+    });
+    React.useEffect(() => {
+        refetchPrefData({ resource: targetResource, options });
+    }, [targetResource]);
+    prefLoaded = perfLoading || skip;
+    console.log('---prefData', prefData);
+    const [updateConfigurationMutation] = useUpdateConfigurationMutation();
+    const modifiedOverrides = {
+        ...overrides,
+        resource: targetResource ? prefData?.openPreferencesSettings?.editableSettingsInput ?? null : null,
+    };
+    const defaultOverrides = omitBy(modifiedOverrides, isNil);
+    let {
+        data: settingsData,
+        error: settingError,
+        loading: settingLoading,
+        ...remaining
+    } = useResolveConfigurationQuery({
+        variables: {
+            input: prefData?.openPreferencesSettings ?? null,
+            key: configKey,
+            overrides: defaultOverrides,
+        },
+        fetchPolicy: 'cache-and-network', // to make `{always: true}` to work
+        skip: prefLoaded || !!prefError || !prefData?.openPreferencesSettings?.editableSettingsInput,
+    });
+
+    React.useEffect(() => {
+        remaining?.refetch({
+            input: prefData?.openPreferencesSettings ?? null,
+            key: configKey,
+            overrides: defaultOverrides,
+        });
+    }, [prefData]);
+
+    let loading = true;
+    if (!settingLoading && !prefLoaded) {
+        loading = false;
+    }
+    const error = settingError || prefError;
+    console.log('---error', error);
+    console.log('---settingError', settingError);
+    console.log('---prefError', prefError);
+    if (error) {
+        return {
+            error,
+            data: undefined,
+            loading: false,
+            ...remaining,
+        };
+    }
+    if (loading) {
+        return {
+            error,
+            data: undefined,
+            loading,
+            ...remaining,
+        };
+    }
+
+    const updateConfiguration = ({ value, updateKey, updateOverrides, target }) => {
+        return updateConfigurationMutation({
+            variables: {
+                key: updateKey || configKey,
+                value,
+                target,
+                overrides: updateOverrides || defaultOverrides,
+                input: prefData?.openPreferencesSettings,
+            },
+        });
+    };
+
+    console.log('--USESetting ', JSON.stringify(settingsData?.resolveConfiguration));
+    return {
+        data: settingsData,
+        loading,
+        error,
+        ...remaining,
+        preferencesInput: {
+            ...prefData?.openPreferencesSettings,
+        },
+        updateConfiguration,
+    } as any;
+};

package/src/components/with-interactions-lifecycle-managed.tsx

@@ -7,6 +7,8 @@ import { useAfterInteractions } from '../hooks/use-after-interactions';
 import { Box, Spinner, SafeAreaView, Center } from '@gluestack-ui/themed';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import { Platform } from 'react-native';
+import { WithPermissionContainer } from './WithPermission';
+import { isUserAuthenticated } from '@adminide-stack/user-auth0-client';
 
 const LoadingComponent = () => (
     // <SafeAreaView flex={1}>
@@ -16,12 +18,25 @@ const LoadingComponent = () => (
     // </SafeAreaView>
 );
 
+const LifecycleComponent = ({ children }) => {
+    const { authenticated } = isUserAuthenticated();
+    if (authenticated) {
+        return (
+            <Lifecycle renderWhenPhase={LifecyclePhase.Restored} loadingRenderer={LoadingComponent}>
+                {children}
+            </Lifecycle>
+        );
+    } else {
+        return <>{children}</>;
+    }
+};
+
 const IntractionComponent = ({ children, interationTime }) => {
     const { interactionsComplete, opacity, setInteractionsTimeOut } = useAfterInteractions();
     React.useEffect(() => {
         if (interationTime) setInteractionsTimeOut(interationTime);
     }, [interationTime]);
-    console.log('interactionsComplete', interactionsComplete);
+    // console.log('interactionsComplete', interactionsComplete);
     return (
         <>
             {interactionsComplete ? (
@@ -46,13 +61,11 @@ const IntractionWithLifeCycleComponent = ({ children, interationTime }) => {
     React.useEffect(() => {
         if (interationTime) setInteractionsTimeOut(interationTime);
     }, [interationTime]);
-    console.log('interactionsComplete', interactionsComplete);
+    // console.log('interactionsComplete', interactionsComplete);
     return (
         <>
             {interactionsComplete ? (
-                <Lifecycle renderWhenPhase={LifecyclePhase.Restored} loadingRenderer={LoadingComponent}>
-                    {children}
-                </Lifecycle>
+                <LifecycleComponent>{children}</LifecycleComponent>
             ) : (
                 <Animated.View
                     style={{
@@ -68,38 +81,67 @@ const IntractionWithLifeCycleComponent = ({ children, interationTime }) => {
     );
 };
 
-export function withInteractionsManaged(component: any, interationTime?: number) {
+export function withInteractionsManaged(component: any, interationTime?: number, permissionKeys = null) {
     return (
         <>
             {Platform.OS === 'ios' ? (
-                { component }
+                <>
+                    {component}
+                    {/* {permissionKeys ? (
+                        <WithPermissionContainer permissionKeys={permissionKeys}>{component}</WithPermissionContainer>
+                    ) : (
+                        component
+                    )} */}
+                </>
             ) : (
-                <IntractionComponent interationTime={interationTime}>{component}</IntractionComponent>
+                <IntractionComponent interationTime={interationTime}>
+                    {component}
+                    {/* {permissionKeys ? (
+                        <WithPermissionContainer permissionKeys={permissionKeys}>{component}</WithPermissionContainer>
+                    ) : (
+                        component
+                    )} */}
+                </IntractionComponent>
             )}
         </>
     );
 }
 
-export function withLifeCycleInteractionsManaged(component: any, interationTime?: number) {
+export function withLifeCycleInteractionsManaged(component: any, interationTime?: number, permissionKeys = null) {
     return (
         <>
             {Platform.OS === 'ios' ? (
-                <Lifecycle renderWhenPhase={LifecyclePhase.Restored} loadingRenderer={LoadingComponent}>
+                <LifecycleComponent>
                     {component}
-                </Lifecycle>
+                    {/* {permissionKeys ? (
+                        <WithPermissionContainer permissionKeys={permissionKeys}>{component}</WithPermissionContainer>
+                    ) : (
+                        component
+                    )} */}
+                </LifecycleComponent>
             ) : (
                 <IntractionWithLifeCycleComponent interationTime={interationTime}>
                     {component}
+                    {/* {permissionKeys ? (
+                        <WithPermissionContainer permissionKeys={permissionKeys}>{component}</WithPermissionContainer>
+                    ) : (
+                        component
+                    )} */}
                 </IntractionWithLifeCycleComponent>
             )}
         </>
     );
 }
 
-export function withLifeCycleManaged(component: any) {
+export function withLifeCycleManaged(component: any, permissionKeys = null) {
     return (
-        <Lifecycle renderWhenPhase={LifecyclePhase.Restored} loadingRenderer={LoadingComponent}>
+        <LifecycleComponent>
             {component}
-        </Lifecycle>
+            {/* {permissionKeys ? (
+                <WithPermissionContainer permissionKeys={permissionKeys}>{component}</WithPermissionContainer>
+            ) : (
+                component
+            )} */}
+        </LifecycleComponent>
     );
 }