🏷️(frontend) adapt types to link-configuration endpoint

The link-configuration endpoint has now a strict validation schema about the combination of link_reach and link_role. We need to adapt our types frontend side to reflect that.

Author: AntoLC

src/frontend/apps/impress/src/features/docs/doc-management/types.tsx

@@ -60,7 +60,7 @@ export interface Doc {
  path: string;
  is_favorite: boolean;
  link_reach: LinkReach;
- link_role: LinkRole;
+ link_role?: LinkRole;
  nb_accesses_direct: number;
  nb_accesses_ancestors: number;
  computed_link_reach: LinkReach;

src/frontend/apps/impress/src/features/docs/doc-management/utils.ts

@@ -1,7 +1,7 @@
 import emojiRegex from 'emoji-regex';
 import * as Y from 'yjs';
 
-import { Doc, LinkReach, LinkRole } from './types';
+import { Doc, LinkReach } from './types';
 
 export const base64ToYDoc = (base64: string) => {
  const uint8Array = Buffer.from(base64, 'base64');
@@ -18,7 +18,7 @@ export const getDocLinkReach = (doc: Doc): LinkReach => {
  return doc.computed_link_reach ?? doc.link_reach;
 };
 
-export const getDocLinkRole = (doc: Doc): LinkRole => {
+export const getDocLinkRole = (doc: Doc): Doc['link_role'] => {
  return doc.computed_link_role ?? doc.link_role;
 };
 

src/frontend/apps/impress/src/features/docs/doc-share/components/DocVisibility.tsx

@@ -54,13 +54,18 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => {
  const linkReachOptions: DropdownMenuOption[] = useMemo(() => {
  return Object.values(LinkReach).map((key) => {
  const isDisabled = doc.abilities.link_select_options[key] === undefined;
+ let linkRole = undefined;
+ if (key !== LinkReach.RESTRICTED) {
+ linkRole = docLinkRole;
+ }
 
  return {
  label: linkReachTranslations[key],
  callback: () =>
  updateDocLink({
  id: doc.id,
  link_reach: key,
+ link_role: linkRole,
  }),
  isSelected: docLinkReach === key,
  disabled: isDisabled,
@@ -70,6 +75,7 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => {
  doc.abilities.link_select_options,
  doc.id,
  docLinkReach,
+ docLinkRole,
  linkReachTranslations,
  updateDocLink,
  ]);
@@ -78,7 +84,8 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => {
  (option) => option.disabled,
  );
 
- const showLinkRoleOptions = doc.computed_link_reach !== LinkReach.RESTRICTED;
+ const showLinkRoleOptions =
+ docLinkReach !== LinkReach.RESTRICTED && docLinkRole;
 
  const linkRoleOptions: DropdownMenuOption[] = useMemo(() => {
  const options = doc.abilities.link_select_options[docLinkReach] ?? [];
@@ -175,26 +182,24 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => {
  </Box>
  {showLinkRoleOptions && (
  <Box $direction="row" $align="center" $gap={spacingsTokens['3xs']}>
- {docLinkReach !== LinkReach.RESTRICTED && (
- <DropdownMenu
- testId="doc-access-mode"
- disabled={!canManage}
- showArrow={true}
- options={linkRoleOptions}
- topMessage={
- haveDisabledLinkRoleOptions
- ? t(
- 'You cannot restrict access to a subpage relative to its parent page.',
- )
- : undefined
- }
- label={t('Document access mode')}
- >
- <Text $weight="initial" $variation="600">
- {linkModeTranslations[docLinkRole]}
- </Text>
- </DropdownMenu>
- )}
+ <DropdownMenu
+ testId="doc-access-mode"
+ disabled={!canManage}
+ showArrow={true}
+ options={linkRoleOptions}
+ topMessage={
+ haveDisabledLinkRoleOptions
+ ? t(
+ 'You cannot restrict access to a subpage relative to its parent page.',
+ )
+ : undefined
+ }
+ label={t('Document access mode')}
+ >
+ <Text $weight="initial" $variation="600">
+ {linkModeTranslations[docLinkRole]}
+ </Text>
+ </DropdownMenu>
  </Box>
  )}
  </Box>