Merge branch 'master' of github.com:NDLANO/ndla-frontend into meta-im…

…age-instead-of-visualelements-other-than-image
NDLANO · Oct 7, 2024 · 78fa9fc · 78fa9fc
2 parents a382d5b + 03374b2
commit 78fa9fc
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 57 deletions.
diff --git a/src/containers/Masthead/components/MastheadSearch.tsx b/src/containers/Masthead/components/MastheadSearch.tsx
@@ -132,6 +132,14 @@ const TextWrapper = styled("div", {
   },
 });
 
+const StyledHitsWrapper = styled("div", { base: { marginTop: "3xsmall", textAlign: "start" } });
+
+const SuggestionButton = styled(Button, {
+  base: {
+    marginInlineStart: "3xsmall",
+  },
+});
+
 const MastheadSearch = () => {
   const [dialogState, setDialogState] = useState({ open: false });
   const [highlightedValue, setHighligtedValue] = useState<string | null>(null);
@@ -232,6 +240,8 @@ const MastheadSearch = () => {
     [mappedItems],
   );
 
+  const suggestion = searchResult?.groupSearch?.[0]?.suggestions?.[0]?.suggestions?.[0]?.options?.[0]?.text;
+
   return (
     <DialogRoot
       open={dialogState.open}
@@ -302,6 +312,25 @@ const MastheadSearch = () => {
                 <SearchLine />
               </IconButton>
             </ComboboxControl>
+            <StyledHitsWrapper aria-live="assertive">
+              {!loading && query && (
+                <div>
+                  {!(mappedItems.length > 1) ? (
+                    <Text textStyle="label.small">{t("searchPage.noHitsShort", { query: query })}</Text>
+                  ) : (
+                    <Text textStyle="label.small">{`${t("searchPage.resultType.showingSearchPhrase")} "${query}"`}</Text>
+                  )}
+                  {suggestion && (
+                    <Text textStyle="label.small">
+                      {t("searchPage.resultType.searchPhraseSuggestion")}
+                      <SuggestionButton variant="link" onClick={() => onQueryChange(suggestion)}>
+                        [{suggestion}]
+                      </SuggestionButton>
+                    </Text>
+                  )}
+                </div>
+              )}
+            </StyledHitsWrapper>
             {!!mappedItems.length || loading ? (
               <StyledComboboxContent>
                 {loading ? (

diff --git a/src/containers/MyNdla/Arena/components/SortableArenaCards.tsx b/src/containers/MyNdla/Arena/components/SortableArenaCards.tsx
@@ -121,19 +121,19 @@ const SortableArenaCards = ({ refetchCategories, categories, isEditing, user, ca
   );
 
   return (
-    <StyledCardContainer>
-      <DndContext
-        sensors={sensors}
-        collisionDetection={closestCenter}
-        onDragEnd={onDragEnd}
-        accessibility={{ announcements }}
-        modifiers={[restrictToVerticalAxis, restrictToParentElement]}
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragEnd={onDragEnd}
+      accessibility={{ announcements }}
+      modifiers={[restrictToVerticalAxis, restrictToParentElement]}
+    >
+      <SortableContext
+        items={sortedCategories}
+        disabled={categories?.length < 2}
+        strategy={verticalListSortingStrategy}
       >
-        <SortableContext
-          items={sortedCategories}
-          disabled={categories?.length < 2}
-          strategy={verticalListSortingStrategy}
-        >
+        <StyledCardContainer>
           {categories?.map((category, categoryIndex) => (
             <SortableArenaListItem
               refetchCategories={refetchCategories}
@@ -148,9 +148,9 @@ const SortableArenaCards = ({ refetchCategories, categories, isEditing, user, ca
               index={categoryIndex}
             />
           ))}
-        </SortableContext>
-      </DndContext>
-    </StyledCardContainer>
+        </StyledCardContainer>
+      </SortableContext>
+    </DndContext>
   );
 };
 

diff --git a/src/containers/MyNdla/Folders/components/FolderList.tsx b/src/containers/MyNdla/Folders/components/FolderList.tsx
@@ -90,15 +90,15 @@ const FolderList = ({ loading, folders, folderId, setFocusId, folderRefId, isFav
   return (
     <WhileLoading isLoading={loading} fallback={<PageSpinner />}>
       {folders.length > 0 && (
-        <BlockWrapper>
-          <DndContext
-            sensors={sensors}
-            collisionDetection={closestCenter}
-            onDragEnd={sortFolderIds}
-            accessibility={{ announcements }}
-            modifiers={[restrictToVerticalAxis, restrictToParentElement]}
-          >
-            <SortableContext items={sortedFolders} disabled={folders.length < 2} strategy={verticalListSortingStrategy}>
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragEnd={sortFolderIds}
+          accessibility={{ announcements }}
+          modifiers={[restrictToVerticalAxis, restrictToParentElement]}
+        >
+          <SortableContext items={sortedFolders} disabled={folders.length < 2} strategy={verticalListSortingStrategy}>
+            <BlockWrapper>
               {folders.map((folder, index) => (
                 <DraggableFolder
                   key={`folder-${folder.id}`}
@@ -111,9 +111,9 @@ const FolderList = ({ loading, folders, folderId, setFocusId, folderRefId, isFav
                   isFavorited={isFavorited}
                 />
               ))}
-            </SortableContext>
-          </DndContext>
-        </BlockWrapper>
+            </BlockWrapper>
+          </SortableContext>
+        </DndContext>
       )}
     </WhileLoading>
   );

diff --git a/src/containers/MyNdla/Folders/components/ResourceList.tsx b/src/containers/MyNdla/Folders/components/ResourceList.tsx
@@ -106,19 +106,19 @@ const ResourceList = ({ selectedFolder, viewType, resourceRefId }: Props) => {
   const keyedData = keyBy(data ?? [], (resource) => `${resource.type}-${resource.id}`);
 
   return (
-    <StyledBlockWrapper variant={viewType}>
-      <DndContext
-        sensors={sensors}
-        collisionDetection={closestCenter}
-        onDragEnd={sortResourceIds}
-        accessibility={{ announcements }}
-        modifiers={[restrictToVerticalAxis, restrictToParentElement]}
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragEnd={sortResourceIds}
+      accessibility={{ announcements }}
+      modifiers={[restrictToVerticalAxis, restrictToParentElement]}
+    >
+      <SortableContext
+        items={sortedResources}
+        disabled={sortedResources.length < 2}
+        strategy={verticalListSortingStrategy}
       >
-        <SortableContext
-          items={sortedResources}
-          disabled={sortedResources.length < 2}
-          strategy={verticalListSortingStrategy}
-        >
+        <StyledBlockWrapper variant={viewType}>
           {resources.map((resource, index) => {
             const resourceMeta = keyedData[`${resource.resourceType}-${resource.resourceId}`];
             return (
@@ -136,9 +136,9 @@ const ResourceList = ({ selectedFolder, viewType, resourceRefId }: Props) => {
               />
             );
           })}
-        </SortableContext>
-      </DndContext>
-    </StyledBlockWrapper>
+        </StyledBlockWrapper>
+      </SortableContext>
+    </DndContext>
   );
 };
 

diff --git a/src/containers/SearchPage/SearchInnerPage.tsx b/src/containers/SearchPage/SearchInnerPage.tsx
@@ -28,7 +28,7 @@ import { contentTypeMapping } from "../../util/getContentType";
 import handleError from "../../util/handleError";
 import { useGraphQuery } from "../../util/runQueries";
 
-const getStateSearchParams = (searchParams: Record<string, any>) => {
+export const getStateSearchParams = (searchParams: Record<string, any>) => {
   const stateSearchParams: Record<string, any> = {};
   Object.keys(searchParams).forEach((key) => {
     stateSearchParams[key] = convertSearchParam(searchParams[key]);

diff --git a/src/containers/SearchPage/SearchPage.tsx b/src/containers/SearchPage/SearchPage.tsx
@@ -13,8 +13,8 @@ import { useTranslation } from "react-i18next";
 import { useLocation, useNavigate } from "react-router-dom";
 import { HelmetWithTracker, useTracker } from "@ndla/tracker";
 import { constants } from "@ndla/ui";
-import { converSearchStringToObject, convertSearchParam } from "./searchHelpers";
-import SearchInnerPage from "./SearchInnerPage";
+import { converSearchStringToObject } from "./searchHelpers";
+import SearchInnerPage, { getStateSearchParams } from "./SearchInnerPage";
 import { AuthContext } from "../../components/AuthenticationContext";
 import { ContentPlaceholder } from "../../components/ContentPlaceholder";
 import { PageContainer } from "../../components/Layout/PageContainer";
@@ -24,14 +24,6 @@ import { useGraphQuery } from "../../util/runQueries";
 import { searchSubjects } from "../../util/searchHelpers";
 import { getAllDimensions } from "../../util/trackingUtil";
 
-const getStateSearchParams = (searchParams: Record<string, any>) => {
-  const stateSearchParams: Record<string, any> = {};
-  Object.keys(searchParams).forEach((key) => {
-    stateSearchParams[key] = convertSearchParam(searchParams[key]);
-  });
-  return stateSearchParams;
-};
-
 const SearchPage = () => {
   const { t, i18n } = useTranslation();
   const { trackPageView } = useTracker();

diff --git a/src/containers/SearchPage/components/SearchHeader.tsx b/src/containers/SearchPage/components/SearchHeader.tsx
@@ -58,7 +58,7 @@ const FiltersWrapper = styled("div", { base: { display: "flex", gap: "small", fl
 
 const StyledSearchWrapper = styled("div", { base: { display: "flex", gap: "xsmall" } });
 
-const StyledHitsWrapper = styled("div", { base: { marginTop: "xsmall" } });
+const StyledHitsWrapper = styled("div", { base: { marginTop: "3xsmall" } });
 
 const StyledFieldRoot = styled(FieldRoot, {
   base: {
@@ -173,9 +173,7 @@ const SearchHeader = ({
                   {activeSubjectFilters.length ? `. ${t("searchPage.removeFilterSuggestion")}` : undefined}
                 </Text>
               ) : (
-                <Text textStyle="label.small">
-                  {t("searchPage.resultType.showingSearchPhrase")} &ldquo;{query}&rdquo;
-                </Text>
+                <Text textStyle="label.small">{`${t("searchPage.resultType.showingSearchPhrase")} "${query}"`}</Text>
               )}
               {suggestion && (
                 <Text textStyle="label.small">