Merge pull request #43 from CSCfi/CSCFC4EMSCR-239_Search-styles-improvements

CSCFC4EMSCR-239 Search styles improvements

Author: konolak

mscr-ui/public/locales/en/common.json

@@ -67,7 +67,6 @@
   "filter-with-current_other": "",
   "go-to": "",
   "impersonate-user": "Impersonate user",
-  "in-all-mscr": "In all MSCR",
   "interoperability-logo-title": "",
   "items-to-be-unscribed-from_one": "",
   "items-to-be-unscribed-from_other": "",
@@ -176,6 +175,7 @@
       "search-button": "Search"
     },
     "facets": {
+      "filter-by": "Filter results by",
       "format": "Format",
       "isReferenced": "Source type",
       "organization": "Organization",

mscr-ui/public/locales/fi/common.json

@@ -67,7 +67,6 @@
   "filter-with-current_other": "",
   "go-to": "",
   "impersonate-user": "",
-  "in-all-mscr": "",
   "interoperability-logo-title": "",
   "items-to-be-unscribed-from_one": "",
   "items-to-be-unscribed-from_other": "",
@@ -174,6 +173,7 @@
       "search-button": ""
     },
     "facets": {
+      "filter-by": "",
       "format": "",
       "isReferenced": "",
       "organization": "",

mscr-ui/public/locales/sv/common.json

@@ -67,7 +67,6 @@
   "filter-with-current_other": "",
   "go-to": "",
   "impersonate-user": "",
-  "in-all-mscr": "",
   "interoperability-logo-title": "",
   "items-to-be-unscribed-from_one": "",
   "items-to-be-unscribed-from_other": "",
@@ -174,6 +173,7 @@
       "search-button": ""
     },
     "facets": {
+      "filter-by": "",
       "format": "",
       "isReferenced": "",
       "organization": "",

mscr-ui/src/common/components/search-filter-set/index.tsx

@@ -2,6 +2,7 @@ import { FacetTitle } from '@app/common/components/search-filter-set/search-filt
 import { Filter } from '@app/common/interfaces/search.interface';
 import { Checkbox, CheckboxGroup } from 'suomifi-ui-components';
 import useUrlState, { UrlState } from '@app/common/utils/hooks/use-url-state';
+import { useTranslation } from 'next-i18next';
 
 interface SearchFilterProps {
   title: string;

mscr-ui/src/common/components/search-result/index.tsx

@@ -1,9 +1,9 @@
 import { MscrSearchResult } from '@app/common/interfaces/search.interface';
 import { Block, RouterLink } from 'suomifi-ui-components';
-import { IconMerge, IconFileGeneric } from 'suomifi-icons';
 import {
-  ResultIconWrapper,
+  ChipWrapper, MetadataChip,
   ResultTextWrapper,
+  TypeChip
 } from '@app/common/components/search-result/search-result.styles';
 import { Schema } from '@app/common/interfaces/schema.interface';
 import router from 'next/router';
@@ -24,22 +24,23 @@ export default function SearchResult({ hit }: { hit: MscrSearchResult }) {
     state: result.state,
     versionLabel: result.versionLabel,
     description: result.comment,
+    format: result.format,
   };
-  let icon;
   let url;
   if (result.type == 'SCHEMA') {
-    icon = <IconFileGeneric />;
     url = `/schema/${displayResult.pid}`;
   } else {
-    icon = <IconMerge />;
     url = `/crosswalk/${displayResult.pid}`;
   }
+  let chips : string[] = [result.state];
+  if (result.format) {
+    chips = chips.concat(result.format);
+  }
 
   return (
     <Block>
-      <ResultIconWrapper>{icon}</ResultIconWrapper>
       <ResultTextWrapper>
-        <Link href={url}>
+        <Link href={url} passHref>
           <RouterLink onClick={() => setIsSearchActive(false)}>
             <h4>
               {getLanguageVersion({
@@ -50,19 +51,26 @@ export default function SearchResult({ hit }: { hit: MscrSearchResult }) {
             </h4>
           </RouterLink>
         </Link>
+        <ChipWrapper>
+          {result.type == 'SCHEMA' && (
+            <TypeChip $isSchema>{result.type}</TypeChip>
+          )}
+          {result.type != 'SCHEMA' && (
+            <TypeChip>{result.type}</TypeChip>
+          )}
+        </ChipWrapper>
         <p>
           {getLanguageVersion({
             data: displayResult.description,
             lang,
             appendLocale: true,
           })}
         </p>
-        {/*TODO: What exactly is supposed to be in the chips?
-        {Object.keys(result.label).map((key) => (
-          <ChipWrapper key={key}>
-            <StaticChip>{result.label[key]}</StaticChip>
+        {chips.map((chip) => (
+          <ChipWrapper key={chip}>
+            <MetadataChip>{chip}</MetadataChip>
           </ChipWrapper>
-        ))}*/}
+        ))}
       </ResultTextWrapper>
     </Block>
   );

mscr-ui/src/common/components/search-result/search-result.styles.tsx

@@ -1,16 +1,47 @@
 import styled from 'styled-components';
+import { StaticChip } from 'suomifi-ui-components';
 
 export const ResultTextWrapper = styled.div`
-  padding-left: 30px;
+  padding: 10px 30px;
   border-bottom: 1px solid ${(props) => props.theme.suomifi.colors.depthDark2};
-`;
-
-export const ResultIconWrapper = styled.div`
-  position: absolute;
-  margin-top: 6px;
+  && .fi-link--router {
+    color: ${(props) => props.theme.suomifi.colors.blackBase};
+    text-decoration: underline;
+    display: inline-block;
+    margin-right: 20px;
+    :hover {
+      color: ${(props) => props.theme.suomifi.colors.highlightBase};
+    }
+  }
 `;
 
 export const ChipWrapper = styled.div`
   display: inline;
   margin: 3px;
+  span {
+    font-size: 13px;
+  }
+`;
+
+export const TypeChip = styled(StaticChip)<{ $isSchema?: boolean }>`
+  &&.fi-chip {
+    border-style: solid;
+    border-width: 2px;
+    background-color: transparent;
+    color: ${(props) =>
+      props.$isSchema
+        ? props.theme.suomifi.colors.highlightLight1
+        : props.theme.suomifi.colors.blackBase};
+    border-color: ${(props) =>
+      props.$isSchema
+        ? props.theme.suomifi.colors.highlightLight1
+        : props.theme.suomifi.colors.blackBase};;
+  }
+`;
+
+export const MetadataChip = styled(StaticChip)`
+  &&.fi-chip {
+    background-color: #69D8D7;
+    color: ${(props) => props.theme.suomifi.colors.blackBase};
+  }
 `;

mscr-ui/src/common/interfaces/search.interface.ts

@@ -31,6 +31,7 @@ export interface ResultInfo {
   revisions: Revision[];
   versionLabel: string;
   namespace: string;
+  format?: string;
 }
 
 export interface PatchedResult extends ResultInfo {

mscr-ui/src/modules/search-screen/index.tsx

@@ -69,6 +69,7 @@ export default function SearchScreen() {
         key,
         mscrSearchResults.aggregations[key].buckets
       );
+      if (newFilter.facet == 'organization' || newFilter.facet == 'isReferenced') return;
       filters = filters.concat(newFilter);
     });
   }
@@ -80,7 +81,7 @@ export default function SearchScreen() {
           <FacetsWrapper>
             {/* Groups of facets for different contexts, made with search-filter-set */}
             {filters.length > 0 && (
-              <SearchFilterSet title={t('in-all-mscr')} filters={filters} />
+              <SearchFilterSet title={t('search.facets.filter-by')} filters={filters} />
             )}
           </FacetsWrapper>
         </Grid>

mscr-ui/src/modules/search-screen/search-screen.styles.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { Block } from 'suomifi-ui-components';
 
 export const SearchContainer = styled(Block)`
-  height: 800px;
+  height: 100%;
   position: absolute;
   background-color: ${(props) => props.theme.suomifi.colors.depthLight3};
   z-index: 1;