@strapi/admin 4.14.4 → 4.14.6

package/admin/src/index.js

@@ -23,6 +23,9 @@ window.strapi = {
     REVIEW_WORKFLOWS: 'review-workflows',
   },
   projectType: 'Community',
+  flags: {
+    nps: false,
+  },
 };
 
 const customConfig = appCustomisations;
@@ -41,16 +44,16 @@ const run = async () => {
   try {
     const {
       data: {
-        data: { isEE, features },
+        data: { isEE, features, flags },
       },
     } = await get('/admin/project-type');
 
     window.strapi.isEE = isEE;
+    window.strapi.flags = flags;
     window.strapi.features = {
       ...window.strapi.features,
       isEnabled: (featureName) => features.some((feature) => feature.name === featureName),
     };
-
     window.strapi.projectType = isEE ? 'Enterprise' : 'Community';
   } catch (err) {
     console.error(err);

package/admin/src/layouts/UnauthenticatedLayout/LocaleToggle/index.js

@@ -9,10 +9,10 @@ import React from 'react';
 import { SingleSelect, SingleSelectOption } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 
-import useLocalesProvider from '../../../components/LocalesProvider/useLocalesProvider';
+import { useLocales } from '../../../components/LanguageProvider';
 
 const LocaleToggle = () => {
-  const { changeLocale, localeNames } = useLocalesProvider();
+  const { changeLocale, localeNames } = useLocales();
   const { locale } = useIntl();
 
   return (

package/admin/src/pages/Admin/index.js

@@ -13,8 +13,9 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Route, Switch } from 'react-router-dom';
 
 import GuidedTourModal from '../../components/GuidedTour/Modal';
-import LeftMenu from '../../components/LeftMenu';
-import { useConfigurations, useMenu } from '../../hooks';
+import { LeftMenu } from '../../components/LeftMenu';
+import { useConfiguration } from '../../hooks/useConfiguration';
+import { useMenu } from '../../hooks/useMenu';
 import AppLayout from '../../layouts/AppLayout';
 import { createRoute } from '../../utils';
 import { SET_APP_RUNTIME_STATUS } from '../App/constants';
@@ -73,7 +74,7 @@ const Admin = () => {
   useTrackUsage();
   const { isLoading, generalSectionLinks, pluginsSectionLinks } = useMenu();
   const { menu } = useStrapiApp();
-  const { showTutorials } = useConfigurations();
+  const { showTutorials } = useConfiguration();
 
   const routes = useMemo(() => {
     return menu

package/admin/src/pages/App/index.js

@@ -23,7 +23,7 @@ import { Route, Switch } from 'react-router-dom';
 
 import { PrivateRoute } from '../../components/PrivateRoute';
 import { ADMIN_PERMISSIONS_CE } from '../../constants';
-import { useConfigurations } from '../../hooks';
+import { useConfiguration } from '../../hooks/useConfiguration';
 import { useEnterprise } from '../../hooks/useEnterprise';
 import { createRoute, makeUniqueRoutes } from '../../utils';
 import AuthPage from '../AuthPage';
@@ -57,7 +57,7 @@ function App() {
     }
   );
   const toggleNotification = useNotification();
-  const { updateProjectSettings } = useConfigurations();
+  const { updateProjectSettings } = useConfiguration();
   const { formatMessage } = useIntl();
   const [{ isLoading, hasAdmin, uuid, deviceId }, setState] = useState({
     isLoading: true,
@@ -180,7 +180,9 @@ function App() {
 
   return (
     <Suspense fallback={<LoadingIndicatorPage />}>
-      <SkipToContent>{formatMessage({ id: 'skipToContent' })}</SkipToContent>
+      <SkipToContent>
+        {formatMessage({ id: 'skipToContent', defaultMessage: 'Skip to content' })}
+      </SkipToContent>
       <TrackingProvider value={trackingInfo}>
         <Switch>
           {authRoutes}

package/admin/src/pages/AuthPage/components/Register/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 
 import {
   Box,
@@ -26,10 +26,11 @@ import { Formik } from 'formik';
 import omit from 'lodash/omit';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
+import { useQuery as useReactQuery } from 'react-query';
 import { useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { useNpsSurveySettings } from '../../../../components/NpsSurvey/hooks/useNpsSurveySettings';
+import { useNpsSurveySettings } from '../../../../components/NpsSurvey';
 import { Logo } from '../../../../components/UnauthenticatedLogo';
 import UnauthenticatedLayout, { LayoutContent } from '../../../../layouts/UnauthenticatedLayout';
 import FieldActionWrapper from '../FieldActionWrapper';
@@ -50,7 +51,6 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
   const [passwordShown, setPasswordShown] = useState(false);
   const [confirmPasswordShown, setConfirmPasswordShown] = useState(false);
   const [submitCount, setSubmitCount] = useState(0);
-  const [userInfo, setUserInfo] = useState({});
   const { trackUsage } = useTracking();
   const { formatMessage } = useIntl();
   const query = useQuery();
@@ -60,39 +60,34 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
 
   const registrationToken = query.get('registrationToken');
 
-  useEffect(() => {
-    if (registrationToken) {
-      const getData = async () => {
-        try {
-          const {
-            data: { data },
-          } = await get(`/admin/registration-info`, {
-            params: {
-              registrationToken,
-            },
-          });
+  const { data: userInfo } = useReactQuery({
+    queryKey: ['admin', 'registration-info', registrationToken],
+    async queryFn() {
+      const {
+        data: { data },
+      } = await get(`/admin/registration-info`, {
+        params: {
+          registrationToken,
+        },
+      });
 
-          if (data) {
-            setUserInfo(data);
-          }
-        } catch (error) {
-          const message = formatAPIError(error);
+      return data;
+    },
+    enabled: !!registrationToken,
+    initialData: {},
+    onError(err) {
+      const message = formatAPIError(err);
 
-          toggleNotification({
-            type: 'warning',
-            message,
-          });
+      toggleNotification({
+        type: 'warning',
+        message,
+      });
 
-          // Redirect to the oops page in case of an invalid token
-          // @alexandrebodin @JAB I am not sure it is the wanted behavior
-          push(`/auth/oops?info=${encodeURIComponent(message)}`);
-        }
-      };
-
-      getData();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [registrationToken]);
+      // Redirect to the oops page in case of an invalid token
+      // @alexandrebodin @JAB I am not sure it is the wanted behavior
+      push(`/auth/oops?info=${encodeURIComponent(message)}`);
+    },
+  });
 
   function normalizeData(data) {
     return Object.entries(data).reduce((acc, [key, value]) => {

package/admin/src/pages/AuthPage/index.js

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import { Redirect, useHistory, useRouteMatch } from 'react-router-dom';
 
 import persistStateToLocaleStorage from '../../components/GuidedTour/utils/persistStateToLocaleStorage';
-import useLocalesProvider from '../../components/LocalesProvider/useLocalesProvider';
+import { useLocales } from '../../components/LanguageProvider';
 import { useEnterprise } from '../../hooks/useEnterprise';
 import formatAPIErrors from '../../utils/formatAPIErrors';
 
@@ -23,7 +23,7 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
     push,
     location: { search },
   } = useHistory();
-  const { changeLocale } = useLocalesProvider();
+  const { changeLocale } = useLocales();
   const { setSkipped } = useGuidedTour();
   const { trackUsage } = useTracking();
   const {

package/admin/src/pages/ProfilePage/index.js

@@ -26,7 +26,7 @@ import { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 
-import useLocalesProvider from '../../components/LocalesProvider/useLocalesProvider';
+import { useLocales } from '../../components/LanguageProvider';
 import { useThemeToggle } from '../../hooks/useThemeToggle';
 import { getFullName } from '../../utils';
 
@@ -36,7 +36,7 @@ import UserInfo from './components/UserInfo';
 import schema from './utils/schema';
 
 const ProfilePage = () => {
-  const { changeLocale, localeNames } = useLocalesProvider();
+  const { changeLocale, localeNames } = useLocales();
   const { setUserDisplayName } = useAppInfo();
   const queryClient = useQueryClient();
   const { formatMessage } = useIntl();

package/admin/src/pages/SettingsPage/components/Tokens/Table/index.js

@@ -27,102 +27,24 @@ const Table = ({
   tokenType,
 }) => {
   const { canDelete, canUpdate, canRead } = permissions;
-  const withBulkActions = canDelete || canUpdate || canRead;
-  const [{ query }] = useQueryParams();
-  const { formatMessage } = useIntl();
-  const [, sortOrder] = query ? query.sort.split(':') : 'ASC';
-  const {
-    push,
-    location: { pathname },
-  } = useHistory();
-  const { trackUsage } = useTracking();
-
-  const sortedTokens = tokens.sort((a, b) => {
-    const comparison = a.name.localeCompare(b.name);
-
-    return sortOrder === 'DESC' ? -comparison : comparison;
-  });
 
+  /**
+   * TODO: This needs refactoring to the new `Table` component.
+   */
   return (
     <DynamicTable
       headers={headers}
       contentType={contentType}
       rows={tokens}
-      withBulkActions={withBulkActions}
+      withBulkActions={canDelete || canUpdate || canRead}
       isLoading={isLoading}
       onConfirmDelete={onConfirmDelete}
     >
-      <Tbody>
-        {sortedTokens.map((token) => {
-          return (
-            <Tr
-              key={token.id}
-              {...onRowClick({
-                fn() {
-                  trackUsage('willEditTokenFromList', {
-                    tokenType,
-                  });
-                  push(`${pathname}/${token.id}`);
-                },
-                condition: canUpdate,
-              })}
-            >
-              <Td maxWidth={pxToRem(250)}>
-                <Typography textColor="neutral800" fontWeight="bold" ellipsis>
-                  {token.name}
-                </Typography>
-              </Td>
-              <Td maxWidth={pxToRem(250)}>
-                <Typography textColor="neutral800" ellipsis>
-                  {token.description}
-                </Typography>
-              </Td>
-              <Td>
-                <Typography textColor="neutral800">
-                  <RelativeTime timestamp={new Date(token.createdAt)} />
-                </Typography>
-              </Td>
-              <Td>
-                {token.lastUsedAt && (
-                  <Typography textColor="neutral800">
-                    <RelativeTime
-                      timestamp={new Date(token.lastUsedAt)}
-                      customIntervals={[
-                        {
-                          unit: 'hours',
-                          threshold: 1,
-                          text: formatMessage({
-                            id: 'Settings.apiTokens.lastHour',
-                            defaultMessage: 'last hour',
-                          }),
-                        },
-                      ]}
-                    />
-                  </Typography>
-                )}
-              </Td>
-
-              {withBulkActions && (
-                <Td>
-                  <Flex justifyContent="end">
-                    {canUpdate && <UpdateButton tokenName={token.name} tokenId={token.id} />}
-                    {!canUpdate && canRead && (
-                      <ReadButton tokenName={token.name} tokenId={token.id} />
-                    )}
-                    {canDelete && (
-                      <DeleteButton
-                        tokenName={token.name}
-                        onClickDelete={() => onConfirmDelete(token.id)}
-                        tokenType={tokenType}
-                      />
-                    )}
-                  </Flex>
-                </Td>
-              )}
-            </Tr>
-          );
-        })}
-      </Tbody>
+      <TableRows
+        tokenType={tokenType}
+        permissions={permissions}
+        onConfirmDelete={onConfirmDelete}
+      />
     </DynamicTable>
   );
 };
@@ -159,3 +81,113 @@ Table.defaultProps = {
 };
 
 export default Table;
+
+const TableRows = ({ tokenType, permissions, rows, withBulkActions, onConfirmDelete }) => {
+  const { canDelete, canUpdate, canRead } = permissions;
+
+  const [{ query }] = useQueryParams();
+  const { formatMessage } = useIntl();
+  const [, sortOrder] = query ? query.sort.split(':') : 'ASC';
+  const {
+    push,
+    location: { pathname },
+  } = useHistory();
+  const { trackUsage } = useTracking();
+
+  const sortedTokens = rows.sort((a, b) => {
+    const comparison = a.name.localeCompare(b.name);
+
+    return sortOrder === 'DESC' ? -comparison : comparison;
+  });
+
+  return (
+    <Tbody>
+      {sortedTokens.map((token) => {
+        return (
+          <Tr
+            key={token.id}
+            {...onRowClick({
+              fn() {
+                trackUsage('willEditTokenFromList', {
+                  tokenType,
+                });
+                push(`${pathname}/${token.id}`);
+              },
+              condition: canUpdate,
+            })}
+          >
+            <Td maxWidth={pxToRem(250)}>
+              <Typography textColor="neutral800" fontWeight="bold" ellipsis>
+                {token.name}
+              </Typography>
+            </Td>
+            <Td maxWidth={pxToRem(250)}>
+              <Typography textColor="neutral800" ellipsis>
+                {token.description}
+              </Typography>
+            </Td>
+            <Td>
+              <Typography textColor="neutral800">
+                <RelativeTime timestamp={new Date(token.createdAt)} />
+              </Typography>
+            </Td>
+            <Td>
+              {token.lastUsedAt && (
+                <Typography textColor="neutral800">
+                  <RelativeTime
+                    timestamp={new Date(token.lastUsedAt)}
+                    customIntervals={[
+                      {
+                        unit: 'hours',
+                        threshold: 1,
+                        text: formatMessage({
+                          id: 'Settings.apiTokens.lastHour',
+                          defaultMessage: 'last hour',
+                        }),
+                      },
+                    ]}
+                  />
+                </Typography>
+              )}
+            </Td>
+
+            {withBulkActions && (
+              <Td>
+                <Flex justifyContent="end">
+                  {canUpdate && <UpdateButton tokenName={token.name} tokenId={token.id} />}
+                  {!canUpdate && canRead && (
+                    <ReadButton tokenName={token.name} tokenId={token.id} />
+                  )}
+                  {canDelete && (
+                    <DeleteButton
+                      tokenName={token.name}
+                      onClickDelete={() => onConfirmDelete(token.id)}
+                      tokenType={tokenType}
+                    />
+                  )}
+                </Flex>
+              </Td>
+            )}
+          </Tr>
+        );
+      })}
+    </Tbody>
+  );
+};
+
+TableRows.defaultProps = {
+  rows: [],
+  withBulkActions: false,
+};
+
+TableRows.propTypes = {
+  rows: PropTypes.array,
+  permissions: PropTypes.shape({
+    canRead: PropTypes.bool,
+    canDelete: PropTypes.bool,
+    canUpdate: PropTypes.bool,
+  }).isRequired,
+  onConfirmDelete: PropTypes.func.isRequired,
+  tokenType: PropTypes.string.isRequired,
+  withBulkActions: PropTypes.bool,
+};

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/CustomizationInfos/index.js

@@ -5,7 +5,7 @@ import { useTracking } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
-import { useConfigurations } from '../../../../../../hooks';
+import { useConfiguration } from '../../../../../../hooks/useConfiguration';
 import { DIMENSION, SIZE } from '../../utils/constants';
 import LogoInput from '../LogoInput';
 
@@ -17,7 +17,7 @@ const CustomizationInfos = forwardRef(({ canUpdate, projectSettingsStored }, ref
   const { trackUsage } = useTracking();
   const {
     logos: { menu, auth },
-  } = useConfigurations();
+  } = useConfiguration();
   const [{ menuLogo, authLogo }, dispatch] = useReducer(reducer, initialState, () =>
     init(initialState, projectSettingsStored)
   );

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/index.js

@@ -29,7 +29,7 @@ import { useIntl } from 'react-intl';
 import { useMutation, useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 
-import { useConfigurations } from '../../../../hooks';
+import { useConfiguration } from '../../../../hooks/useConfiguration';
 import { useEnterprise } from '../../../../hooks/useEnterprise';
 import { selectAdminPermissions } from '../../../App/selectors';
 
@@ -44,7 +44,7 @@ const ApplicationInfosPage = () => {
   const { trackUsage } = useTracking();
   const { formatMessage } = useIntl();
   const { get, post } = useFetchClient();
-  const { updateProjectSettings } = useConfigurations();
+  const { updateProjectSettings } = useConfiguration();
   const permissions = useSelector(selectAdminPermissions);
   const { formatAPIError } = useAPIErrorHandler();
 

package/admin/src/pages/SettingsPage/pages/Roles/CreatePage/index.js

@@ -33,10 +33,10 @@ import { useSelector } from 'react-redux';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { useAdminRolePermissions } from '../../../../../hooks/useAdminRolePermissions';
 import { selectAdminPermissions } from '../../../../App/selectors';
 import Permissions from '../EditPage/components/Permissions';
 import { useAdminRolePermissionLayout } from '../hooks/useAdminRolePermissionLayout';
+import { useAdminRolePermissions } from '../hooks/useAdminRolePermissions';
 
 import schema from './utils/schema';
 

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/index.js

@@ -16,7 +16,7 @@ import upperFirst from 'lodash/upperFirst';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
-import { usePermissionsDataManager } from '../../../../../../../hooks';
+import { usePermissionsDataManager } from '../../hooks/usePermissionsDataManager';
 
 import ActionRow from './ActionRow';
 import createDefaultConditionsForm from './utils/createDefaultConditionsForm';

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/Collapse/index.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 
-import { usePermissionsDataManager } from '../../../../../../../../hooks';
+import { usePermissionsDataManager } from '../../../hooks/usePermissionsDataManager';
 import ConditionsButton from '../../ConditionsButton';
 import ConditionsModal from '../../ConditionsModal';
 import HiddenAction from '../../HiddenAction';

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 
-import { usePermissionsDataManager } from '../../../../../../../../../hooks';
+import { usePermissionsDataManager } from '../../../../hooks/usePermissionsDataManager';
 import HiddenAction from '../../../HiddenAction';
 import { cellWidth, rowHeight } from '../../../Permissions/utils/constants';
 import RequiredSign from '../../../RequiredSign';

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/index.js

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 
-import { usePermissionsDataManager } from '../../../../../../../../../hooks';
+import { usePermissionsDataManager } from '../../../../hooks/usePermissionsDataManager';
 import CollapseLabel from '../../../CollapseLabel';
 import Curve from '../../../Curve';
 import HiddenAction from '../../../HiddenAction';

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/GlobalActions/index.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 
-import { usePermissionsDataManager } from '../../../../../../../hooks';
+import { usePermissionsDataManager } from '../../hooks/usePermissionsDataManager';
 import { cellWidth, firstRowWidth } from '../Permissions/utils/constants';
 
 import { findDisplayedActions, getCheckboxesState } from './utils';

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/PermissionsDataManagerProvider/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 import PropTypes from 'prop-types';
 
-import { PermissionsDataManagerContext } from '../../../../../../../contexts';
+import { PermissionsDataManagerContext } from '../../hooks/usePermissionsDataManager';
 
 const PermissionsDataManagerProvider = ({ children, value }) => {
   return (

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/PluginsAndSettings/SubCategory/index.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 
-import { usePermissionsDataManager } from '../../../../../../../../hooks';
+import { usePermissionsDataManager } from '../../../hooks/usePermissionsDataManager';
 import ConditionsButton from '../../ConditionsButton';
 import ConditionsModal from '../../ConditionsModal';
 import { getCheckboxState, removeConditionKeyFromData } from '../../utils';

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/hooks/usePermissionsDataManager.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+// Note: I had to guess most of these types based on the name and usage, but I actually don't
+// know if they are correct, because the usage is very generic. Feel free to correct them if
+// they create problems.
+export interface PermissionsDataManagerContextValue {
+  availableConditions: unknown[];
+  modifiedData: object;
+  onChangeCollectionTypeLeftActionRowCheckbox: (
+    pathToData: string,
+    propertyName: string,
+    nam: string,
+    value: unknown
+  ) => void;
+  onChangeConditions: (conditions: object) => void;
+  onChangeSimpleCheckbox: (target: { name: string; value: unknown }) => void;
+  onChangeParentCheckbox: (target: { name: string; value: unknown }) => void;
+  onChangeCollectionTypeGlobalActionCheckbox: (
+    kind: string,
+    actionId: string,
+    value: unknown
+  ) => void;
+}
+
+export const PermissionsDataManagerContext =
+  React.createContext<PermissionsDataManagerContextValue | null>(null);
+
+export const usePermissionsDataManager = () => React.useContext(PermissionsDataManagerContext);

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/index.js

@@ -16,9 +16,9 @@ import { Formik } from 'formik';
 import { useIntl } from 'react-intl';
 import { useRouteMatch } from 'react-router-dom';
 
-import { useAdminRolePermissions } from '../../../../../hooks/useAdminRolePermissions';
 import { useAdminRoles } from '../../../../../hooks/useAdminRoles';
 import { useAdminRolePermissionLayout } from '../hooks/useAdminRolePermissionLayout';
+import { useAdminRolePermissions } from '../hooks/useAdminRolePermissions';
 
 import { Permissions, RoleForm } from './components';
 import schema from './utils/schema';

package/admin/src/{hooks/useAdminRolePermissions/index.js → pages/SettingsPage/pages/Roles/hooks/useAdminRolePermissions.ts}

@@ -1,15 +1,22 @@
 import { useFetchClient } from '@strapi/helper-plugin';
+import { Entity } from '@strapi/types';
 import { useQuery } from 'react-query';
 
-export const useAdminRolePermissions = (params = {}, queryOptions = {}) => {
+import { RolePermissions } from '../../../../../../../shared/permissions';
+import { APIBaseParams, APIResponse } from '../../../../../types/adminAPI';
+
+export interface APIRolePermissionsQueryParams extends APIBaseParams {
+  id: null | Entity.ID;
+}
+
+export const useAdminRolePermissions = (
+  params: APIRolePermissionsQueryParams = { id: null },
+  queryOptions = {}
+) => {
   const { id, ...queryParams } = params;
 
   const { get } = useFetchClient();
 
-  if (!id && (queryOptions?.enabled === undefined || !!queryOptions?.enabled === true)) {
-    throw new Error('"id" is a required argument');
-  }
-
   const {
     data: permissions,
     error,
@@ -21,7 +28,7 @@ export const useAdminRolePermissions = (params = {}, queryOptions = {}) => {
     async () => {
       const {
         data: { data },
-      } = await get(`/admin/roles/${id}/permissions`, {
+      } = await get<APIResponse<RolePermissions>>(`/admin/roles/${id}/permissions`, {
         params: queryParams,
       });