@admin-layout/gluestack-ui-mobile 9.0.2-alpha.4 → 9.0.4-alpha.102

package/src/components/WithConfiguration.tsx

@@ -0,0 +1,74 @@
+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 { 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,81 @@
+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 '@adminide-stack/platform-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 } = usePermissionAutoFetch();
+    const { permissions, loading: permissionLoading } = usePermissionAutoFetch();
+    const hasPermission = React.useMemo(() => {
+        return permissionKeys.some((key) => permissionTypes.includes(get(permissions?.resolveConfiguration, key)));
+    }, [permissions, permissionTypes, permissionKeys]);
+
+    console.log('hasPermission', hasPermission);
+    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,78 @@
+import {
+    IResourceAuthority,
+    IConfigFragmentName,
+    useGetContextDataQuery,
+    generateUserUri,
+    IContext,
+} from '@adminide-stack/core';
+import { useSetting } from './useSetting';
+
+interface userPermissionAutoFetchProps {
+    configKey?: string;
+}
+export const usePermissionAutoFetch = (options?: userPermissionAutoFetchProps) => {
+    const { data, loading } = useGetContextDataQuery();
+    const { teamUri, orgUri, userId } = (data?.getContextData as IContext) || {};
+
+    // Determine resource based on teamUri, orgUri, or fallback to userId
+    let resource = teamUri || orgUri || (userId ? generateUserUri({ _id: userId }) : generateUserUri({ _id: 'guest' }));
+
+    const { loading: settingLoading, ...remaining } = useSetting({
+        configKey: options?.configKey || '',
+        overrides: {
+            resource: resource,
+        },
+        options: {
+            forceExist: false,
+            authority: IResourceAuthority.Defaultpermissions,
+            fragment: IConfigFragmentName.Roles,
+        },
+    });
+
+    return { ...remaining, loading: loading || settingLoading };
+};
+
+// import React from 'react';
+// import { IResourceAuthority, IConfigFragmentName } from '@adminide-stack/core';
+// import { useGetTeamContextQuery } from '@adminide-stack/platform-client';
+// import { generateOrgUri } from '@adminide-stack/core/lib/utils/generate-uri.js';
+// import { useSelector } from 'react-redux';
+// import { navigationRef } from '@common-stack/client-react';
+// import { useSetting } from './useSetting';
+
+// interface userPermissionAutoFetchProps {
+//     configKey?: string;
+// }
+// export const usePermissionAutoFetch = (options?: userPermissionAutoFetchProps) => {
+//     const [orgName, setOrgName] = React.useState<any>(null);
+//     const [orgUri, setOrgUri] = React.useState<any>(null);
+//     const platformState = useSelector((state) => (state as any).platform);
+//     const currentRoute: any = navigationRef.isReady() ? navigationRef?.getCurrentRoute() : null;
+//     const { data, loading } = useGetTeamContextQuery();
+//     const teamData = React.useMemo(() => data?.getTeamContext, [data]);
+//     React.useEffect(() => {
+//         if (currentRoute?.params?.orgName || platformState?.orgName) {
+//             const org = currentRoute?.params?.orgName || platformState?.orgName;
+//             if (org !== orgName) {
+//                 setOrgName(org);
+//             }
+//         }
+//         if (orgName) {
+//             const orgUri = generateOrgUri(orgName, IConfigFragmentName.Settings);
+//             setOrgUri(orgUri);
+//         }
+//     }, [currentRoute, platformState, orgName]);
+
+//     const { loading: settingLoading, ...remaining } = useSetting({
+//         configKey: options?.configKey || '',
+//         overrides: {
+//             resource: teamData?.teamUri ?? orgUri,
+//         },
+//         options: {
+//             forceExist: false,
+//             authority: IResourceAuthority.Defaultpermissions,
+//             fragment: IConfigFragmentName.Roles,
+//         },
+//     });
+//     return { ...remaining, loading: loading || settingLoading };
+// };

package/src/components/useSetting.tsx

@@ -0,0 +1,137 @@
+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;
+    let prefLoaded = false;
+    const {
+        data: prefData,
+        error: prefError,
+        loading: perfLoading,
+        refetch: refetchPrefData,
+    } = useOpenPreferencesSettingsQuery({
+        variables: { resource: targetResource, options },
+        fetchPolicy: 'cache-first', // to make `{always: true}` to work
+        skip: prefLoaded,
+    });
+    React.useEffect(() => {
+        refetchPrefData({ resource: targetResource, options });
+    }, [targetResource]);
+    prefLoaded = perfLoading || skip;
+    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;
+    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,
+            },
+        });
+    };
+
+    return {
+        data: settingsData,
+        loading,
+        error,
+        ...remaining,
+        preferencesInput: {
+            ...prefData?.openPreferencesSettings,
+        },
+        updateConfiguration,
+    } as any;
+};

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

@@ -1,27 +1,37 @@
-import React, { ComponentType } from 'react';
-// import { Transition, Transitioning } from 'react-native-reanimated';
+import React from 'react';
 import { Lifecycle } from '../containers/layout/Lifecycle';
 import { LifecyclePhase } from '@workbench-stack/core';
-import Animated, { useSharedValue, withTiming } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 import { useAfterInteractions } from '../hooks/use-after-interactions';
-import { Box, Spinner, SafeAreaView, Center } from '@gluestack-ui/themed';
-import hoistNonReactStatics from 'hoist-non-react-statics';
+import { Spinner, Center } from '@gluestack-ui/themed';
 import { Platform } from 'react-native';
+import { WithPermissionContainer } from './WithPermission';
+import { isUserAuthenticated } from '@adminide-stack/user-auth0-client';
 
 const LoadingComponent = () => (
-    // <SafeAreaView flex={1}>
     <Center flex={1} justifyContent={'center'} alignItems={'center'}>
         {<Spinner color={'$blue500'} />}
     </Center>
-    // </SafeAreaView>
 );
 
-const IntractionComponent = ({ children, interationTime }) => {
+const LifecycleComponent = ({ children }: { children?: any }) => {
+    const { authenticated } = isUserAuthenticated();
+    if (authenticated) {
+        return (
+            <Lifecycle renderWhenPhase={LifecyclePhase.Restored} loadingRenderer={LoadingComponent}>
+                {children}
+            </Lifecycle>
+        );
+    } else {
+        return <>{children}</>;
+    }
+};
+
+const IntractionComponent = ({ children, interationTime }: { children?: any; interationTime: number }) => {
     const { interactionsComplete, opacity, setInteractionsTimeOut } = useAfterInteractions();
     React.useEffect(() => {
         if (interationTime) setInteractionsTimeOut(interationTime);
     }, [interationTime]);
-    console.log('interactionsComplete', interactionsComplete);
     return (
         <>
             {interactionsComplete ? (
@@ -41,18 +51,15 @@ const IntractionComponent = ({ children, interationTime }) => {
     );
 };
 
-const IntractionWithLifeCycleComponent = ({ children, interationTime }) => {
+const IntractionWithLifeCycleComponent = ({ children, interationTime }: { children?: any; interationTime: number }) => {
     const { interactionsComplete, opacity, setInteractionsTimeOut } = useAfterInteractions();
     React.useEffect(() => {
         if (interationTime) setInteractionsTimeOut(interationTime);
     }, [interationTime]);
-    console.log('interactionsComplete', interactionsComplete);
     return (
         <>
             {interactionsComplete ? (
-                <Lifecycle renderWhenPhase={LifecyclePhase.Restored} loadingRenderer={LoadingComponent}>
-                    {children}
-                </Lifecycle>
+                <LifecycleComponent>{children}</LifecycleComponent>
             ) : (
                 <Animated.View
                     style={{
@@ -68,38 +75,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}>
-                    {component}
-                </Lifecycle>
+                <LifecycleComponent>
+                    <>{component}</>
+                    {/* {permissionKeys ? (
+                        <WithPermissionContainer permissionKeys={permissionKeys}>{component}</WithPermissionContainer>
+                    ) : (
+                        <>{component}</>
+                    )} */}
+                </LifecycleComponent>
             ) : (
                 <IntractionWithLifeCycleComponent interationTime={interationTime}>
-                    {component}
+                    <>{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}>
-            {component}
-        </Lifecycle>
+        <LifecycleComponent>
+            <>{component}</>
+            {/* {permissionKeys ? (
+                <WithPermissionContainer permissionKeys={permissionKeys}>{component}</WithPermissionContainer>
+            ) : (
+                <>{component}</>
+            )} */}
+        </LifecycleComponent>
     );
 }

package/src/containers/layout/module.ts

@@ -1,6 +1,6 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { Feature } from '@common-stack/client-react';
-import { createStackNavigator } from '@react-navigation/stack';
+// import { createStackNavigator } from '@react-navigation/stack';
 import { ProLayout, AppFeatures, AppLayout } from './ProLayout';
 
 export { ProLayout, AppFeatures, AppLayout };
@@ -8,7 +8,7 @@ export { ProLayout, AppFeatures, AppLayout };
 const layoutConfig = {
     ['/']: {
         exact: false,
-        container: createStackNavigator(),
+        // container: createStackNavigator(),
         name: 'MainStack',
         props: {
             initialRouteName: 'MainStack.MainBottomTab',

package/src/utils/ThemeColor.ts

@@ -6,4 +6,14 @@ export const COLOR = {
     GREYISH_BLACK: '#1f1f1f',
 };
 
-export const THEMECOLOR = ['#1890ff', '#f5222d', '#fa541c', '#faad14', '#13c2c2', '#52c41a', '#2f54eb', '#722ed1'];
+export const THEMECOLOR = [
+    '#4a154b',
+    '#601e69',
+    '#1d1c1d',
+    '#36c5ef',
+    '#2db57c',
+    '#e01d5a',
+    '#ecb12f',
+    '#616061',
+    '#dcd9d4',
+];