@openedx/frontend-base 1.0.0-alpha.9 → 1.0.0

package/dist/shell/header/course-bar/masquerade/hooks.js

@@ -0,0 +1,203 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { useEffect, useRef, useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { getMasqueradeOptions, postMasqueradeOptions, } from './data/api';
+import { courseHomeCourseMetadataQueryKey, findActiveTab, getCourseHomeCourseMetadata, } from '../data/service';
+import { isClientRoute } from '../utils';
+import messages from './messages';
+const defaultActive = {
+    role: 'staff',
+    groupId: null,
+    groupName: null,
+    userName: null,
+    userPartitionId: null,
+};
+function toMasqueradePayload(option) {
+    const payload = { role: option.role };
+    if (option.groupId !== undefined && option.userPartitionId !== undefined) {
+        payload.group_id = option.groupId;
+        payload.user_partition_id = option.userPartitionId;
+    }
+    return payload;
+}
+/*
+ * Whether `option` represents the active masquerade.  Three shapes:
+ *   - userName defined: the "Specific Student..." prompt; active when the
+ *     server says we're masquerading as some specific user.
+ *   - groupId defined: a group option; active when the group ids match.
+ *   - neither: a plain role option (e.g. Staff); active when no group/user
+ *     is set.
+ */
+export function isOptionSelected(option, active) {
+    if (option.role !== active.role) {
+        return false;
+    }
+    if (option.userName !== undefined) {
+        return active.userName !== null;
+    }
+    if (option.groupId !== undefined) {
+        return option.groupId === active.groupId
+            && option.userPartitionId === active.userPartitionId;
+    }
+    return active.userName === null && active.groupId === null;
+}
+function getHttpStatus(error) {
+    var _a;
+    return (_a = error === null || error === void 0 ? void 0 : error.customAttributes) === null || _a === void 0 ? void 0 : _a.httpErrorStatus;
+}
+/*
+ * Anything other than a successful load with `success: true` hides the bar:
+ * 403, 200 with `success: false`, network errors, 5xx, redirected requests.
+ */
+function isQueryDenied(query) {
+    if (query.isError) {
+        return true;
+    }
+    return query.data !== undefined && !query.data.success;
+}
+export function formatErrorMessage(formatMessage, error) {
+    return typeof error === 'string' ? error : formatMessage(error);
+}
+function pickErrorMessage(mutation) {
+    if (mutation.isError) {
+        return getHttpStatus(mutation.error) === 404
+            ? messages.noStudentFound
+            : messages.genericSubmitError;
+    }
+    if (mutation.data && !mutation.data.success) {
+        return mutation.data.error || messages.genericSubmitError;
+    }
+    return null;
+}
+export function useMasqueradeState(courseId) {
+    var _a, _b;
+    const queryClient = useQueryClient();
+    const navigate = useNavigate();
+    const location = useLocation();
+    /*
+     * Tracks the option the user just clicked, so the toggle and active-marker
+     * can update before the server confirms.  Cleared once a mutation succeeds
+     * (the server's active state becomes the truth) or replaced when the user
+     * picks something else.
+     */
+    const [pendingOption, setPendingOption] = useState(null);
+    const [userName, setUserName] = useState('');
+    const query = useQuery({
+        queryKey: ['masquerade', courseId],
+        queryFn: () => getMasqueradeOptions(courseId),
+    });
+    const mutation = useMutation({
+        mutationFn: (payload) => postMasqueradeOptions(courseId, payload),
+        onSuccess: (data, payload) => __awaiter(this, void 0, void 0, function* () {
+            if (!(data === null || data === void 0 ? void 0 : data.success)) {
+                /* Server rejected the pick.  Clear the optimistic pending state so the
+                 * UI snaps back to the real active option, except for userName
+                 * submissions where the input must stay open for retry. */
+                if (payload.user_name === undefined) {
+                    setPendingOption(null);
+                }
+                return;
+            }
+            queryClient.invalidateQueries();
+            /* The course-tabs metadata is the source of truth for "what pages this
+             * user can see in this course."  Fetch the post-masquerade tabs and
+             * redirect to the first one if the current path no longer appears. */
+            const meta = yield queryClient.fetchQuery({
+                queryKey: courseHomeCourseMetadataQueryKey(courseId),
+                queryFn: () => getCourseHomeCourseMetadata(courseId),
+            });
+            const fallback = meta.tabs[0];
+            if (!fallback) {
+                return;
+            }
+            const stillVisible = findActiveTab(meta.tabs, location.pathname);
+            if (stillVisible) {
+                return;
+            }
+            const targetPath = new URL(fallback.url).pathname;
+            if (isClientRoute(targetPath)) {
+                navigate(targetPath, { replace: true });
+            }
+            else {
+                window.location.assign(fallback.url);
+            }
+        }),
+        onError: (_error, payload) => {
+            /* Same as the !success branch: revert the optimistic pick, but keep the
+             * userName input open so the user can fix a typo and retry. */
+            if (payload.user_name === undefined) {
+                setPendingOption(null);
+            }
+        },
+    });
+    const active = (((_a = query.data) === null || _a === void 0 ? void 0 : _a.success) && query.data.active) || defaultActive;
+    const available = (((_b = query.data) === null || _b === void 0 ? void 0 : _b.success) && query.data.available) || [];
+    /*
+     * Seed the input from active.userName once, on the first successful query.
+     * After that the input belongs to the user — refetches (e.g. triggered by
+     * a masquerade change in another tab) must not clobber what they typed.
+     */
+    const hasSeededRef = useRef(false);
+    useEffect(() => {
+        if (hasSeededRef.current || !query.isSuccess) {
+            return;
+        }
+        hasSeededRef.current = true;
+        if (active.userName) {
+            setUserName(active.userName);
+        }
+    }, [query.isSuccess, active.userName]);
+    /*
+     * Clear pendingOption once the refetched active state actually reflects it.
+     * Clearing in onSuccess instead would briefly flash the old active state
+     * between mutation success and the refetch landing.
+     */
+    useEffect(() => {
+        if (pendingOption && isOptionSelected(pendingOption, active)) {
+            setPendingOption(null);
+        }
+    }, [pendingOption, active]);
+    const showUserNameInput = active.userName !== null
+        || (pendingOption === null || pendingOption === void 0 ? void 0 : pendingOption.userName) !== undefined;
+    const errorMessage = pickErrorMessage(mutation);
+    const isDenied = isQueryDenied(query);
+    /* Loading until the first response (success or failure) lands. */
+    const isLoading = query.isLoading;
+    const select = (option) => {
+        /* Clear any prior mutation error so it doesn't leak into the new selection. */
+        mutation.reset();
+        setPendingOption(option);
+        if (option.userName !== undefined) {
+            setUserName(option.userName);
+            return;
+        }
+        mutation.mutate(toMasqueradePayload(option));
+    };
+    const submitUserName = () => {
+        mutation.mutate({ role: 'student', user_name: userName });
+    };
+    return {
+        active,
+        available,
+        pendingOption,
+        showUserNameInput,
+        userName,
+        setUserName,
+        select,
+        submitUserName,
+        errorMessage,
+        isSubmitting: mutation.isPending,
+        isLoading,
+        isDenied,
+    };
+}
+//# sourceMappingURL=hooks.js.map

package/dist/shell/header/course-bar/masquerade/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../../../../shell/header/course-bar/masquerade/hooks.ts"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';\nimport type { MessageDescriptor } from 'react-intl';\nimport { useLocation, useNavigate } from 'react-router-dom';\n\nimport {\n  ActiveMasqueradeData,\n  MasqueradeOption,\n  MasqueradeStatus,\n  MasqueradePayload,\n  getMasqueradeOptions,\n  postMasqueradeOptions,\n} from './data/api';\nimport {\n  CourseHomeCourseMetadata,\n  courseHomeCourseMetadataQueryKey,\n  findActiveTab,\n  getCourseHomeCourseMetadata,\n} from '../data/service';\nimport { isClientRoute } from '../utils';\nimport messages from './messages';\n\nconst defaultActive: ActiveMasqueradeData = {\n  role: 'staff',\n  groupId: null,\n  groupName: null,\n  userName: null,\n  userPartitionId: null,\n};\n\nfunction toMasqueradePayload(option: MasqueradeOption): MasqueradePayload {\n  const payload: MasqueradePayload = { role: option.role };\n  if (option.groupId !== undefined && option.userPartitionId !== undefined) {\n    payload.group_id = option.groupId;\n    payload.user_partition_id = option.userPartitionId;\n  }\n  return payload;\n}\n\n/*\n * Whether `option` represents the active masquerade.  Three shapes:\n *   - userName defined: the \"Specific Student...\" prompt; active when the\n *     server says we're masquerading as some specific user.\n *   - groupId defined: a group option; active when the group ids match.\n *   - neither: a plain role option (e.g. Staff); active when no group/user\n *     is set.\n */\nexport function isOptionSelected(option: MasqueradeOption, active: ActiveMasqueradeData): boolean {\n  if (option.role !== active.role) {\n    return false;\n  }\n  if (option.userName !== undefined) {\n    return active.userName !== null;\n  }\n  if (option.groupId !== undefined) {\n    return option.groupId === active.groupId\n      && option.userPartitionId === active.userPartitionId;\n  }\n  return active.userName === null && active.groupId === null;\n}\n\ninterface HttpishError {\n  customAttributes?: { httpErrorStatus?: number },\n}\n\nfunction getHttpStatus(error: unknown): number | undefined {\n  return (error as HttpishError | null)?.customAttributes?.httpErrorStatus;\n}\n\n/*\n * Anything other than a successful load with `success: true` hides the bar:\n * 403, 200 with `success: false`, network errors, 5xx, redirected requests.\n */\nfunction isQueryDenied(query: { isError: boolean, error: unknown, data: MasqueradeStatus | undefined }): boolean {\n  if (query.isError) {\n    return true;\n  }\n  return query.data !== undefined && !query.data.success;\n}\n\n/*\n * Errors are returned as MessageDescriptors when the frontend can pick the\n * message, or as a raw string when the server's `data.error` is more specific\n * than anything we'd hand-pick.  formatErrorMessage handles both at the\n * render site.\n */\nexport type MasqueradeErrorMessage = MessageDescriptor | string;\n\nexport function formatErrorMessage(\n  formatMessage: (descriptor: MessageDescriptor) => string,\n  error: MasqueradeErrorMessage,\n): string {\n  return typeof error === 'string' ? error : formatMessage(error);\n}\n\nfunction pickErrorMessage(\n  mutation: { isError: boolean, error: unknown, data: MasqueradeStatus | undefined },\n): MasqueradeErrorMessage | null {\n  if (mutation.isError) {\n    return getHttpStatus(mutation.error) === 404\n      ? messages.noStudentFound\n      : messages.genericSubmitError;\n  }\n  if (mutation.data && !mutation.data.success) {\n    return mutation.data.error || messages.genericSubmitError;\n  }\n  return null;\n}\n\nexport interface MasqueradeState {\n  active: ActiveMasqueradeData,\n  available: MasqueradeOption[],\n  pendingOption: MasqueradeOption | null,\n  showUserNameInput: boolean,\n  userName: string,\n  setUserName: (value: string) => void,\n  select: (option: MasqueradeOption) => void,\n  submitUserName: () => void,\n  errorMessage: MasqueradeErrorMessage | null,\n  isSubmitting: boolean,\n  isLoading: boolean,\n  isDenied: boolean,\n}\n\nexport function useMasqueradeState(courseId: string): MasqueradeState {\n  const queryClient = useQueryClient();\n  const navigate = useNavigate();\n  const location = useLocation();\n  /*\n   * Tracks the option the user just clicked, so the toggle and active-marker\n   * can update before the server confirms.  Cleared once a mutation succeeds\n   * (the server's active state becomes the truth) or replaced when the user\n   * picks something else.\n   */\n  const [pendingOption, setPendingOption] = useState<MasqueradeOption | null>(null);\n  const [userName, setUserName] = useState('');\n\n  const query = useQuery({\n    queryKey: ['masquerade', courseId],\n    queryFn: () => getMasqueradeOptions(courseId),\n  });\n\n  const mutation = useMutation({\n    mutationFn: (payload: MasqueradePayload) => postMasqueradeOptions(courseId, payload),\n    onSuccess: async (data, payload) => {\n      if (!data?.success) {\n        /* Server rejected the pick.  Clear the optimistic pending state so the\n         * UI snaps back to the real active option, except for userName\n         * submissions where the input must stay open for retry. */\n        if (payload.user_name === undefined) {\n          setPendingOption(null);\n        }\n        return;\n      }\n\n      queryClient.invalidateQueries();\n\n      /* The course-tabs metadata is the source of truth for \"what pages this\n       * user can see in this course.\"  Fetch the post-masquerade tabs and\n       * redirect to the first one if the current path no longer appears. */\n      const meta = await queryClient.fetchQuery<CourseHomeCourseMetadata>({\n        queryKey: courseHomeCourseMetadataQueryKey(courseId),\n        queryFn: () => getCourseHomeCourseMetadata(courseId),\n      });\n      const fallback = meta.tabs[0];\n      if (!fallback) {\n        return;\n      }\n      const stillVisible = findActiveTab(meta.tabs, location.pathname);\n      if (stillVisible) {\n        return;\n      }\n      const targetPath = new URL(fallback.url).pathname;\n      if (isClientRoute(targetPath)) {\n        navigate(targetPath, { replace: true });\n      } else {\n        window.location.assign(fallback.url);\n      }\n    },\n    onError: (_error, payload) => {\n      /* Same as the !success branch: revert the optimistic pick, but keep the\n       * userName input open so the user can fix a typo and retry. */\n      if (payload.user_name === undefined) {\n        setPendingOption(null);\n      }\n    },\n  });\n\n  const active = (query.data?.success && query.data.active) || defaultActive;\n  const available = (query.data?.success && query.data.available) || [];\n\n  /*\n   * Seed the input from active.userName once, on the first successful query.\n   * After that the input belongs to the user — refetches (e.g. triggered by\n   * a masquerade change in another tab) must not clobber what they typed.\n   */\n  const hasSeededRef = useRef(false);\n  useEffect(() => {\n    if (hasSeededRef.current || !query.isSuccess) {\n      return;\n    }\n    hasSeededRef.current = true;\n    if (active.userName) {\n      setUserName(active.userName);\n    }\n  }, [query.isSuccess, active.userName]);\n\n  /*\n   * Clear pendingOption once the refetched active state actually reflects it.\n   * Clearing in onSuccess instead would briefly flash the old active state\n   * between mutation success and the refetch landing.\n   */\n  useEffect(() => {\n    if (pendingOption && isOptionSelected(pendingOption, active)) {\n      setPendingOption(null);\n    }\n  }, [pendingOption, active]);\n\n  const showUserNameInput = active.userName !== null\n    || pendingOption?.userName !== undefined;\n\n  const errorMessage = pickErrorMessage(mutation);\n  const isDenied = isQueryDenied(query);\n  /* Loading until the first response (success or failure) lands. */\n  const isLoading = query.isLoading;\n\n  const select = (option: MasqueradeOption) => {\n    /* Clear any prior mutation error so it doesn't leak into the new selection. */\n    mutation.reset();\n    setPendingOption(option);\n    if (option.userName !== undefined) {\n      setUserName(option.userName);\n      return;\n    }\n    mutation.mutate(toMasqueradePayload(option));\n  };\n\n  const submitUserName = () => {\n    mutation.mutate({ role: 'student', user_name: userName });\n  };\n\n  return {\n    active,\n    available,\n    pendingOption,\n    showUserNameInput,\n    userName,\n    setUserName,\n    select,\n    submitUserName,\n    errorMessage,\n    isSubmitting: mutation.isPending,\n    isLoading,\n    isDenied,\n  };\n}\n"]}

package/dist/shell/header/course-bar/masquerade/index.d.ts

@@ -0,0 +1 @@
+export { default } from './MasqueradeBar';

package/dist/shell/header/course-bar/masquerade/index.js

@@ -0,0 +1,2 @@
+export { default } from './MasqueradeBar';
+//# sourceMappingURL=index.js.map

package/dist/shell/header/course-bar/masquerade/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../shell/header/course-bar/masquerade/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { default } from './MasqueradeBar';\n"]}

package/dist/shell/header/course-bar/masquerade/masquerade-widget/MasqueradeUserNameInput.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    id?: string;
+    className?: string;
+    autoFocus?: boolean;
+}
+export declare function MasqueradeUserNameInput({ id, className, autoFocus }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shell/header/course-bar/masquerade/masquerade-widget/MasqueradeUserNameInput.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useIntl } from '@openedx/frontend-base';
+import { Form, FormControl, FormGroup, StatefulButton, } from '@openedx/paragon';
+import { useMasqueradeContext } from '../MasqueradeContext';
+import messages from './messages';
+export function MasqueradeUserNameInput({ id, className, autoFocus }) {
+    const { formatMessage } = useIntl();
+    const { userName, setUserName, submitUserName, isSubmitting, } = useMasqueradeContext();
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        submitUserName();
+    };
+    return (_jsxs(Form, { className: `d-flex align-items-center ${className !== null && className !== void 0 ? className : ''}`, onSubmit: handleSubmit, children: [_jsx(FormGroup, { controlId: id, className: "flex-grow-1 mb-0 mr-2", children: _jsx(FormControl, { autoFocus: autoFocus, value: userName, onChange: (event) => setUserName(event.target.value) }) }), _jsx(StatefulButton, { type: "submit", variant: "brand", state: isSubmitting ? 'pending' : 'default', disabled: !userName, labels: {
+                    default: formatMessage(messages.submit),
+                    pending: formatMessage(messages.submitting),
+                } })] }));
+}
+//# sourceMappingURL=MasqueradeUserNameInput.js.map

package/dist/shell/header/course-bar/masquerade/masquerade-widget/MasqueradeUserNameInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MasqueradeUserNameInput.js","sourceRoot":"","sources":["../../../../../../shell/header/course-bar/masquerade/masquerade-widget/MasqueradeUserNameInput.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EACL,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,cAAc,GAC7C,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,QAAQ,MAAM,YAAY,CAAC;AAQlC,MAAM,UAAU,uBAAuB,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAS;IACzE,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,EACJ,QAAQ,EAAE,WAAW,EAAE,cAAc,EAAE,YAAY,GACpD,GAAG,oBAAoB,EAAE,CAAC;IAE3B,MAAM,YAAY,GAAG,CAAC,KAAiC,EAAE,EAAE;QACzD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,cAAc,EAAE,CAAC;IACnB,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,6BAA6B,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,EAAE,EAAE,QAAQ,EAAE,YAAY,aACrF,KAAC,SAAS,IAAC,SAAS,EAAE,EAAE,EAAE,SAAS,EAAC,uBAAuB,YACzD,KAAC,WAAW,IACV,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,CAAC,KAA0C,EAAE,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GACzF,GACQ,EACZ,KAAC,cAAc,IACb,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,OAAO,EACf,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAC3C,QAAQ,EAAE,CAAC,QAAQ,EACnB,MAAM,EAAE;oBACN,OAAO,EAAE,aAAa,CAAC,QAAQ,CAAC,MAAM,CAAC;oBACvC,OAAO,EAAE,aAAa,CAAC,QAAQ,CAAC,UAAU,CAAC;iBAC5C,GACD,IACG,CACR,CAAC;AACJ,CAAC","sourcesContent":["import { FormEvent } from 'react';\nimport { useIntl } from '@openedx/frontend-base';\nimport {\n  Form, FormControl, FormGroup, StatefulButton,\n} from '@openedx/paragon';\n\nimport { useMasqueradeContext } from '../MasqueradeContext';\nimport messages from './messages';\n\ninterface Props {\n  id?: string,\n  className?: string,\n  autoFocus?: boolean,\n}\n\nexport function MasqueradeUserNameInput({ id, className, autoFocus }: Props) {\n  const { formatMessage } = useIntl();\n  const {\n    userName, setUserName, submitUserName, isSubmitting,\n  } = useMasqueradeContext();\n\n  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    submitUserName();\n  };\n\n  return (\n    <Form className={`d-flex align-items-center ${className ?? ''}`} onSubmit={handleSubmit}>\n      <FormGroup controlId={id} className=\"flex-grow-1 mb-0 mr-2\">\n        <FormControl\n          autoFocus={autoFocus}\n          value={userName}\n          onChange={(event: React.ChangeEvent<HTMLInputElement>) => setUserName(event.target.value)}\n        />\n      </FormGroup>\n      <StatefulButton\n        type=\"submit\"\n        variant=\"brand\"\n        state={isSubmitting ? 'pending' : 'default'}\n        disabled={!userName}\n        labels={{\n          default: formatMessage(messages.submit),\n          pending: formatMessage(messages.submitting),\n        }}\n      />\n    </Form>\n  );\n}\n"]}

package/dist/shell/header/course-bar/masquerade/masquerade-widget/MasqueradeWidget.d.ts

@@ -0,0 +1 @@
+export declare function MasqueradeWidget(): import("react/jsx-runtime").JSX.Element;

package/dist/shell/header/course-bar/masquerade/masquerade-widget/MasqueradeWidget.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { useIntl, FormattedMessage } from '@openedx/frontend-base';
+import { Dropdown } from '@openedx/paragon';
+import { MasqueradeUserNameInput } from './MasqueradeUserNameInput';
+import { MasqueradeWidgetOption } from './MasqueradeWidgetOption';
+import { useMasqueradeContext } from '../MasqueradeContext';
+import messages from './messages';
+export function MasqueradeWidget() {
+    var _a, _b, _c;
+    const { formatMessage } = useIntl();
+    const inputId = useId();
+    const { active, available, pendingOption, showUserNameInput, } = useMasqueradeContext();
+    return (_jsxs("div", { className: "flex-grow-1", children: [_jsxs("div", { className: "row", children: [_jsx("span", { className: "col-auto col-form-label pl-3", children: _jsx(FormattedMessage, Object.assign({}, messages.titleViewAs)) }), _jsxs(Dropdown, { className: "flex-shrink-1 mx-1", children: [_jsx(Dropdown.Toggle, { id: "masquerade-widget-toggle", variant: "inverse-outline-primary", children: (_c = (_b = (_a = pendingOption === null || pendingOption === void 0 ? void 0 : pendingOption.name) !== null && _a !== void 0 ? _a : active.groupName) !== null && _b !== void 0 ? _b : active.userName) !== null && _c !== void 0 ? _c : formatMessage(messages.titleStaff) }), _jsx(Dropdown.Menu, { children: available.map(option => (_jsx(MasqueradeWidgetOption, { option: option }, option.name))) })] })] }), showUserNameInput && (_jsxs("div", { className: "row mt-2", children: [_jsx("label", { htmlFor: inputId, className: "col-auto col-form-label pl-3 mb-0", children: `${formatMessage(messages.userNameLabel)}:` }), _jsx(MasqueradeUserNameInput, { id: inputId, className: "col-4", autoFocus: true })] }))] }));
+}
+//# sourceMappingURL=MasqueradeWidget.js.map

package/dist/shell/header/course-bar/masquerade/masquerade-widget/MasqueradeWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MasqueradeWidget.js","sourceRoot":"","sources":["../../../../../../shell/header/course-bar/masquerade/masquerade-widget/MasqueradeWidget.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,MAAM,UAAU,gBAAgB;;IAC9B,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IACxB,MAAM,EACJ,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,iBAAiB,GACpD,GAAG,oBAAoB,EAAE,CAAC;IAE3B,OAAO,CACL,eAAK,SAAS,EAAC,aAAa,aAC1B,eAAK,SAAS,EAAC,KAAK,aAClB,eAAM,SAAS,EAAC,8BAA8B,YAC5C,KAAC,gBAAgB,oBAAK,QAAQ,CAAC,WAAW,EAAI,GACzC,EACP,MAAC,QAAQ,IAAC,SAAS,EAAC,oBAAoB,aACtC,KAAC,QAAQ,CAAC,MAAM,IAAC,EAAE,EAAC,0BAA0B,EAAC,OAAO,EAAC,yBAAyB,YAC7E,MAAA,MAAA,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,IAAI,mCACjB,MAAM,CAAC,SAAS,mCAChB,MAAM,CAAC,QAAQ,mCACf,aAAa,CAAC,QAAQ,CAAC,UAAU,CAAC,GACrB,EAClB,KAAC,QAAQ,CAAC,IAAI,cACX,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CACvB,KAAC,sBAAsB,IAAmB,MAAM,EAAE,MAAM,IAA3B,MAAM,CAAC,IAAI,CAAoB,CAC7D,CAAC,GACY,IACP,IACP,EACL,iBAAiB,IAAI,CACpB,eAAK,SAAS,EAAC,UAAU,aACvB,gBAAO,OAAO,EAAE,OAAO,EAAE,SAAS,EAAC,mCAAmC,YACnE,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG,GACtC,EACR,KAAC,uBAAuB,IAAC,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC,OAAO,EAAC,SAAS,SAAG,IAChE,CACP,IACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { useId } from 'react';\nimport { useIntl, FormattedMessage } from '@openedx/frontend-base';\nimport { Dropdown } from '@openedx/paragon';\n\nimport { MasqueradeUserNameInput } from './MasqueradeUserNameInput';\nimport { MasqueradeWidgetOption } from './MasqueradeWidgetOption';\nimport { useMasqueradeContext } from '../MasqueradeContext';\nimport messages from './messages';\n\nexport function MasqueradeWidget() {\n  const { formatMessage } = useIntl();\n  const inputId = useId();\n  const {\n    active, available, pendingOption, showUserNameInput,\n  } = useMasqueradeContext();\n\n  return (\n    <div className=\"flex-grow-1\">\n      <div className=\"row\">\n        <span className=\"col-auto col-form-label pl-3\">\n          <FormattedMessage {...messages.titleViewAs} />\n        </span>\n        <Dropdown className=\"flex-shrink-1 mx-1\">\n          <Dropdown.Toggle id=\"masquerade-widget-toggle\" variant=\"inverse-outline-primary\">\n            {pendingOption?.name\n            ?? active.groupName\n            ?? active.userName\n            ?? formatMessage(messages.titleStaff)}\n          </Dropdown.Toggle>\n          <Dropdown.Menu>\n            {available.map(option => (\n              <MasqueradeWidgetOption key={option.name} option={option} />\n            ))}\n          </Dropdown.Menu>\n        </Dropdown>\n      </div>\n      {showUserNameInput && (\n        <div className=\"row mt-2\">\n          <label htmlFor={inputId} className=\"col-auto col-form-label pl-3 mb-0\">\n            {`${formatMessage(messages.userNameLabel)}:`}\n          </label>\n          <MasqueradeUserNameInput id={inputId} className=\"col-4\" autoFocus />\n        </div>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/shell/header/course-bar/masquerade/masquerade-widget/MasqueradeWidgetOption.d.ts

@@ -0,0 +1,6 @@
+import type { MasqueradeOption } from '../data/api';
+interface Props {
+    option: MasqueradeOption;
+}
+export declare function MasqueradeWidgetOption({ option }: Props): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/shell/header/course-bar/masquerade/masquerade-widget/MasqueradeWidgetOption.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dropdown } from '@openedx/paragon';
+import { useMasqueradeContext } from '../MasqueradeContext';
+import { isOptionSelected } from '../hooks';
+export function MasqueradeWidgetOption({ option }) {
+    const { active, pendingOption, select } = useMasqueradeContext();
+    if (!option.name) {
+        return null;
+    }
+    /* While a click is pending, the menu mirrors the toggle: only that option
+     * is highlighted.  Once the server confirms (pendingOption clears), the
+     * active-server-state logic takes over again. */
+    const isHighlighted = pendingOption !== null
+        ? option.name === pendingOption.name
+        : isOptionSelected(option, active);
+    return (_jsx(Dropdown.Item, { className: isHighlighted ? 'active' : '', href: "#", onClick: () => select(option), children: option.name }));
+}
+//# sourceMappingURL=MasqueradeWidgetOption.js.map

package/dist/shell/header/course-bar/masquerade/masquerade-widget/MasqueradeWidgetOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MasqueradeWidgetOption.js","sourceRoot":"","sources":["../../../../../../shell/header/course-bar/masquerade/masquerade-widget/MasqueradeWidgetOption.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAO5C,MAAM,UAAU,sBAAsB,CAAC,EAAE,MAAM,EAAS;IACtD,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAEjE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;QACjB,OAAO,IAAI,CAAC;IACd,CAAC;IAED;;qDAEiD;IACjD,MAAM,aAAa,GAAG,aAAa,KAAK,IAAI;QAC1C,CAAC,CAAC,MAAM,CAAC,IAAI,KAAK,aAAa,CAAC,IAAI;QACpC,CAAC,CAAC,gBAAgB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAErC,OAAO,CACL,KAAC,QAAQ,CAAC,IAAI,IACZ,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EACxC,IAAI,EAAC,GAAG,EACR,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,YAE5B,MAAM,CAAC,IAAI,GACE,CACjB,CAAC;AACJ,CAAC","sourcesContent":["import { Dropdown } from '@openedx/paragon';\n\nimport { useMasqueradeContext } from '../MasqueradeContext';\nimport { isOptionSelected } from '../hooks';\nimport type { MasqueradeOption } from '../data/api';\n\ninterface Props {\n  option: MasqueradeOption,\n}\n\nexport function MasqueradeWidgetOption({ option }: Props) {\n  const { active, pendingOption, select } = useMasqueradeContext();\n\n  if (!option.name) {\n    return null;\n  }\n\n  /* While a click is pending, the menu mirrors the toggle: only that option\n   * is highlighted.  Once the server confirms (pendingOption clears), the\n   * active-server-state logic takes over again. */\n  const isHighlighted = pendingOption !== null\n    ? option.name === pendingOption.name\n    : isOptionSelected(option, active);\n\n  return (\n    <Dropdown.Item\n      className={isHighlighted ? 'active' : ''}\n      href=\"#\"\n      onClick={() => select(option)}\n    >\n      {option.name}\n    </Dropdown.Item>\n  );\n}\n"]}

package/dist/shell/header/course-bar/masquerade/masquerade-widget/index.d.ts

@@ -0,0 +1,2 @@
+import { MasqueradeWidget } from './MasqueradeWidget';
+export default MasqueradeWidget;

package/dist/shell/header/course-bar/masquerade/masquerade-widget/index.js

@@ -0,0 +1,3 @@
+import { MasqueradeWidget } from './MasqueradeWidget';
+export default MasqueradeWidget;
+//# sourceMappingURL=index.js.map

package/dist/shell/header/course-bar/masquerade/masquerade-widget/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../shell/header/course-bar/masquerade/masquerade-widget/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,eAAe,gBAAgB,CAAC","sourcesContent":["import { MasqueradeWidget } from './MasqueradeWidget';\n\nexport default MasqueradeWidget;\n"]}

package/dist/shell/header/course-bar/masquerade/masquerade-widget/messages.d.ts

@@ -0,0 +1,28 @@
+declare const messages: {
+    userNameLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    submit: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    submitting: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    titleViewAs: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    titleStaff: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default messages;

package/dist/shell/header/course-bar/masquerade/masquerade-widget/messages.js

@@ -0,0 +1,30 @@
+import { defineMessages } from '../../../../../runtime';
+const messages = defineMessages({
+    userNameLabel: {
+        id: 'masquerade-widget.userName.input.label',
+        defaultMessage: 'Username or email',
+        description: 'Label for the masquerade username/email input.',
+    },
+    submit: {
+        id: 'masquerade-widget.userName.submit',
+        defaultMessage: 'Submit',
+        description: 'Label for the masquerade username submit button.',
+    },
+    submitting: {
+        id: 'masquerade-widget.userName.submitting',
+        defaultMessage: 'Submitting',
+        description: 'Pending label for the masquerade username submit button.',
+    },
+    titleViewAs: {
+        id: 'masquerade-widget.view.as',
+        defaultMessage: 'View this course as:',
+        description: 'Button to view this course as',
+    },
+    titleStaff: {
+        id: 'masquerade-widget.staff',
+        defaultMessage: 'Staff',
+        description: 'Button Staff',
+    },
+});
+export default messages;
+//# sourceMappingURL=messages.js.map

package/dist/shell/header/course-bar/masquerade/masquerade-widget/messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../../../../shell/header/course-bar/masquerade/masquerade-widget/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,aAAa,EAAE;QACb,EAAE,EAAE,wCAAwC;QAC5C,cAAc,EAAE,mBAAmB;QACnC,WAAW,EAAE,gDAAgD;KAC9D;IACD,MAAM,EAAE;QACN,EAAE,EAAE,mCAAmC;QACvC,cAAc,EAAE,QAAQ;QACxB,WAAW,EAAE,kDAAkD;KAChE;IACD,UAAU,EAAE;QACV,EAAE,EAAE,uCAAuC;QAC3C,cAAc,EAAE,YAAY;QAC5B,WAAW,EAAE,0DAA0D;KACxE;IACD,WAAW,EAAE;QACX,EAAE,EAAE,2BAA2B;QAC/B,cAAc,EAAE,sBAAsB;QACtC,WAAW,EAAE,+BAA+B;KAC7C;IACD,UAAU,EAAE;QACV,EAAE,EAAE,yBAAyB;QAC7B,cAAc,EAAE,OAAO;QACvB,WAAW,EAAE,cAAc;KAC5B;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '../../../../../runtime';\n\nconst messages = defineMessages({\n  userNameLabel: {\n    id: 'masquerade-widget.userName.input.label',\n    defaultMessage: 'Username or email',\n    description: 'Label for the masquerade username/email input.',\n  },\n  submit: {\n    id: 'masquerade-widget.userName.submit',\n    defaultMessage: 'Submit',\n    description: 'Label for the masquerade username submit button.',\n  },\n  submitting: {\n    id: 'masquerade-widget.userName.submitting',\n    defaultMessage: 'Submitting',\n    description: 'Pending label for the masquerade username submit button.',\n  },\n  titleViewAs: {\n    id: 'masquerade-widget.view.as',\n    defaultMessage: 'View this course as:',\n    description: 'Button to view this course as',\n  },\n  titleStaff: {\n    id: 'masquerade-widget.staff',\n    defaultMessage: 'Staff',\n    description: 'Button Staff',\n  },\n});\n\nexport default messages;\n"]}

package/dist/shell/header/course-bar/masquerade/messages.d.ts

@@ -0,0 +1,28 @@
+declare const messages: {
+    ariaLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    titleViewCourseIn: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    titleStudio: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    noStudentFound: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    genericSubmitError: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default messages;

package/dist/shell/header/course-bar/masquerade/messages.js

@@ -0,0 +1,30 @@
+import { defineMessages } from '../../../../runtime';
+const messages = defineMessages({
+    ariaLabel: {
+        id: 'masqueradeBar.ariaLabel',
+        defaultMessage: 'Masquerade bar',
+        description: 'Accessible label identifying the masquerade bar region.',
+    },
+    titleViewCourseIn: {
+        id: 'masqueradeBar.viewCourse',
+        defaultMessage: 'View course in:',
+        description: 'Button to view the course in the studio',
+    },
+    titleStudio: {
+        id: 'masqueradeBar.studio',
+        defaultMessage: 'Studio',
+        description: 'Button to view in studio',
+    },
+    noStudentFound: {
+        id: 'masqueradeBar.error.noStudentFound',
+        defaultMessage: 'No student with this username or email could be found.',
+        description: 'Error shown when masquerading by username and the user does not exist.',
+    },
+    genericSubmitError: {
+        id: 'masqueradeBar.error.genericSubmit',
+        defaultMessage: 'An error has occurred; please try again.',
+        description: 'Generic error shown when the masquerade submission fails.',
+    },
+});
+export default messages;
+//# sourceMappingURL=messages.js.map

package/dist/shell/header/course-bar/masquerade/messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../../../shell/header/course-bar/masquerade/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,SAAS,EAAE;QACT,EAAE,EAAE,yBAAyB;QAC7B,cAAc,EAAE,gBAAgB;QAChC,WAAW,EAAE,yDAAyD;KACvE;IACD,iBAAiB,EAAE;QACjB,EAAE,EAAE,0BAA0B;QAC9B,cAAc,EAAE,iBAAiB;QACjC,WAAW,EAAE,yCAAyC;KACvD;IACD,WAAW,EAAE;QACX,EAAE,EAAE,sBAAsB;QAC1B,cAAc,EAAE,QAAQ;QACxB,WAAW,EAAE,0BAA0B;KACxC;IACD,cAAc,EAAE;QACd,EAAE,EAAE,oCAAoC;QACxC,cAAc,EAAE,wDAAwD;QACxE,WAAW,EAAE,wEAAwE;KACtF;IACD,kBAAkB,EAAE;QAClB,EAAE,EAAE,mCAAmC;QACvC,cAAc,EAAE,0CAA0C;QAC1D,WAAW,EAAE,2DAA2D;KACzE;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '../../../../runtime';\n\nconst messages = defineMessages({\n  ariaLabel: {\n    id: 'masqueradeBar.ariaLabel',\n    defaultMessage: 'Masquerade bar',\n    description: 'Accessible label identifying the masquerade bar region.',\n  },\n  titleViewCourseIn: {\n    id: 'masqueradeBar.viewCourse',\n    defaultMessage: 'View course in:',\n    description: 'Button to view the course in the studio',\n  },\n  titleStudio: {\n    id: 'masqueradeBar.studio',\n    defaultMessage: 'Studio',\n    description: 'Button to view in studio',\n  },\n  noStudentFound: {\n    id: 'masqueradeBar.error.noStudentFound',\n    defaultMessage: 'No student with this username or email could be found.',\n    description: 'Error shown when masquerading by username and the user does not exist.',\n  },\n  genericSubmitError: {\n    id: 'masqueradeBar.error.genericSubmit',\n    defaultMessage: 'An error has occurred; please try again.',\n    description: 'Generic error shown when the masquerade submission fails.',\n  },\n});\n\nexport default messages;\n"]}

package/dist/shell/header/course-bar/navigation/CourseTabsNavigation.d.ts

@@ -0,0 +1,3 @@
+import './course-tabs-navigation.scss';
+declare const CourseTabsNavigation: () => import("react/jsx-runtime").JSX.Element | null;
+export default CourseTabsNavigation;

package/dist/shell/header/course-bar/navigation/CourseTabsNavigation.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Link, useLocation, useParams } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
+import { Slot, useIntl } from '../../../../runtime';
+import { courseHomeCourseMetadataQueryKey, findActiveTab, getCourseHomeCourseMetadata, } from '../data/service';
+import { Container, Nav, Navbar, Skeleton } from '@openedx/paragon';
+import messages from './messages';
+import { isClientRoute } from '../utils';
+import './course-tabs-navigation.scss';
+const CourseTabsNavigation = () => {
+    const location = useLocation();
+    const { courseId = '' } = useParams();
+    const intl = useIntl();
+    const { data = { tabs: [] }, isLoading } = useQuery({
+        queryKey: courseHomeCourseMetadataQueryKey(courseId),
+        queryFn: () => getCourseHomeCourseMetadata(courseId),
+        retry: 2,
+        enabled: !!courseId,
+    });
+    const { tabs } = data;
+    const resolvedTabs = useMemo(() => tabs.map(tab => {
+        // Tab URLs from the course_home API are always absolute.
+        const pathname = new URL(tab.url).pathname;
+        return Object.assign(Object.assign({}, tab), { pathname, clientPath: isClientRoute(pathname) ? pathname : null });
+    }), [tabs]);
+    const currentTab = useMemo(() => { var _a, _b; return (resolvedTabs.length > 0 ? (_b = (_a = findActiveTab(resolvedTabs, location.pathname)) === null || _a === void 0 ? void 0 : _a.tabId) !== null && _b !== void 0 ? _b : null : null); }, [location.pathname, resolvedTabs]);
+    if (isLoading) {
+        return _jsx(Skeleton, { className: "lead mt-3" });
+    }
+    if (!courseId || resolvedTabs.length === 0) {
+        return null;
+    }
+    return (_jsx(Navbar, { expand: "sm", className: "course-tabs-navigation pb-0", "aria-label": intl.formatMessage(messages.courseMaterial), children: _jsx(Container, { fluid: true, size: "xl", children: _jsxs(Nav, { variant: "tabs", activeKey: currentTab, children: [_jsx(Navbar.Toggle, { "aria-controls": "course-nav" }), _jsx(Navbar.Collapse, { id: "course-nav", children: resolvedTabs.map(tab => (_jsx(Nav.Item, { children: _jsx(Nav.Link, Object.assign({}, (tab.clientPath
+                                ? { to: tab.clientPath, as: Link }
+                                : { href: tab.url }), { active: tab.tabId === currentTab, children: tab.title })) }, tab.tabId))) }), _jsx(Slot, { id: "org.openedx.frontend.slot.header.courseNavigationBar.extraContent.v1" })] }) }) }));
+};
+export default CourseTabsNavigation;
+//# sourceMappingURL=CourseTabsNavigation.js.map

package/dist/shell/header/course-bar/navigation/CourseTabsNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CourseTabsNavigation.js","sourceRoot":"","sources":["../../../../../shell/header/course-bar/navigation/CourseTabsNavigation.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo } from 'react';\nimport { Link, useLocation, useParams } from 'react-router-dom';\nimport { useQuery } from '@tanstack/react-query';\nimport { Slot, useIntl } from '../../../../runtime';\nimport {\n  CourseTab,\n  courseHomeCourseMetadataQueryKey,\n  findActiveTab,\n  getCourseHomeCourseMetadata,\n} from '../data/service';\nimport { Container, Nav, Navbar, Skeleton } from '@openedx/paragon';\nimport messages from './messages';\nimport { isClientRoute } from '../utils';\nimport './course-tabs-navigation.scss';\n\ninterface ResolvedTab extends CourseTab {\n  pathname: string,\n  clientPath: string | null,\n}\n\nconst CourseTabsNavigation = () => {\n  const location = useLocation();\n  const { courseId = '' } = useParams();\n  const intl = useIntl();\n\n  const { data = { tabs: [] }, isLoading } = useQuery({\n    queryKey: courseHomeCourseMetadataQueryKey(courseId),\n    queryFn: () => getCourseHomeCourseMetadata(courseId),\n    retry: 2,\n    enabled: !!courseId,\n  });\n\n  const { tabs } = data;\n\n  const resolvedTabs: ResolvedTab[] = useMemo(\n    () => tabs.map(tab => {\n      // Tab URLs from the course_home API are always absolute.\n      const pathname = new URL(tab.url).pathname;\n      return { ...tab, pathname, clientPath: isClientRoute(pathname) ? pathname : null };\n    }),\n    [tabs]\n  );\n\n  const currentTab = useMemo(\n    () => (resolvedTabs.length > 0 ? findActiveTab(resolvedTabs, location.pathname)?.tabId ?? null : null),\n    [location.pathname, resolvedTabs]\n  );\n\n  if (isLoading) {\n    return <Skeleton className=\"lead mt-3\" />;\n  }\n\n  if (!courseId || resolvedTabs.length === 0) {\n    return null;\n  }\n\n  return (\n    <Navbar expand=\"sm\" className=\"course-tabs-navigation pb-0\" aria-label={intl.formatMessage(messages.courseMaterial)}>\n      <Container fluid size=\"xl\">\n        <Nav\n          variant=\"tabs\"\n          activeKey={currentTab}\n        >\n          <Navbar.Toggle aria-controls=\"course-nav\" />\n          <Navbar.Collapse id=\"course-nav\">\n            {\n              resolvedTabs.map(tab => (\n                <Nav.Item key={tab.tabId}>\n                  <Nav.Link\n                    {...(tab.clientPath\n                      ? { to: tab.clientPath, as: Link }\n                      : { href: tab.url }\n                    )}\n                    active={tab.tabId === currentTab}\n                  >\n                    {tab.title}\n                  </Nav.Link>\n                </Nav.Item>\n              ))\n            }\n          </Navbar.Collapse>\n          <Slot id=\"org.openedx.frontend.slot.header.courseNavigationBar.extraContent.v1\" />\n        </Nav>\n      </Container>\n    </Navbar>\n  );\n};\n\nexport default CourseTabsNavigation;\n"]}

package/dist/shell/header/course-bar/navigation/course-tabs-navigation.scss

@@ -0,0 +1,7 @@
+.course-tabs-navigation {
+  border-bottom: 2px solid var(--pgn-color-nav-tabs-base-border-base);
+
+  .nav-tabs {
+    border-bottom: none;
+  }
+}

package/dist/shell/header/course-bar/navigation/messages.d.ts

@@ -0,0 +1,8 @@
+declare const messages: {
+    courseMaterial: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default messages;

package/dist/shell/header/course-bar/navigation/messages.js

@@ -0,0 +1,10 @@
+import { defineMessages } from '../../../../runtime';
+const messages = defineMessages({
+    courseMaterial: {
+        id: 'org.openedx.frontend.slot.header.courseNavigationBar.tabs.label',
+        defaultMessage: 'Course Navigation Bar',
+        description: 'The accessible label for course tabs navigation',
+    },
+});
+export default messages;
+//# sourceMappingURL=messages.js.map

package/dist/shell/header/course-bar/navigation/messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../../../shell/header/course-bar/navigation/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,cAAc,EAAE;QACd,EAAE,EAAE,iEAAiE;QACrE,cAAc,EAAE,uBAAuB;QACvC,WAAW,EAAE,iDAAiD;KAC/D;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '../../../../runtime';\n\nconst messages = defineMessages({\n  courseMaterial: {\n    id: 'org.openedx.frontend.slot.header.courseNavigationBar.tabs.label',\n    defaultMessage: 'Course Navigation Bar',\n    description: 'The accessible label for course tabs navigation',\n  },\n});\n\nexport default messages;\n"]}

package/dist/shell/header/course-bar/utils.d.ts

@@ -0,0 +1,3 @@
+export declare function isCourseBarRoute(): boolean;
+export declare function isCourseBarMasqueradeRoute(): boolean;
+export declare function isClientRoute(pathname: string): boolean;