Merge pull request #133 from vtexdocs/fix/KI-no-fix-status-display

fix: no fix status for ki cards

src/components/known-issue-card/index.tsx

@@ -26,7 +26,9 @@ const KnownIssueCard = ({
         <Flex sx={styles.topContainer}>
           <Tag color={status}>
             {intl.formatMessage({
-              id: `known_issues_filter_status.${status.toLowerCase()}`,
+              id: `known_issues_filter_status.${status
+                .toLowerCase()
+                .replace(' ', '_')}`,
             })}
           </Tag>
           <Text sx={styles.knownIssueModule} className="module">

src/components/tag/styles.ts

@@ -40,7 +40,7 @@ const statusColors: {
     color: '#D77809',
     background: '#FFF3DA',
   },
-  'No fix': {
+  No_Fix: {
     border: '1px solid #FAA397',
     color: '#CB2610',
     background: '#FFDFDB',

src/pages/known-issues/index.tsx

@@ -43,6 +43,7 @@ interface Props {
 
 const KnownIssuesPage: NextPage<Props> = ({ knownIssuesData, branch }) => {
   const intl = useIntl()
+
   const { setBranchPreview } = useContext(PreviewContext)
   setBranchPreview(branch)
   const itemsPerPage = 8
@@ -51,9 +52,9 @@ const KnownIssuesPage: NextPage<Props> = ({ knownIssuesData, branch }) => {
     status: string[]
     modules: string[]
   }>({ status: [], modules: [] })
+
   const [search, setSearch] = useState<string>('')
   const [sortByValue, setSortByValue] = useState<SortByType>('newest')
-
   const filteredResult = useMemo(() => {
     const data = knownIssuesData.filter((knownIssue) => {
       const hasFilter: boolean =
@@ -242,7 +243,10 @@ export const getStaticProps: GetStaticProps = async ({
               title: frontmatter.title,
               module: frontmatter.tag,
               slug: data.slug,
-              status: frontmatter.kiStatus as KnownIssueStatus,
+              status: frontmatter.kiStatus.replace(
+                ' ',
+                '_'
+              ) as KnownIssueStatus,
               createdAt: String(frontmatter.createdAt),
               updatedAt: String(frontmatter.updatedAt),
             })

src/utils/constants.ts

@@ -456,7 +456,7 @@ export const knownIssuesStatusFilter = (intl: IntlShape) => {
         }),
       },
       {
-        id: 'No fix',
+        id: 'No_Fix',
         name: intl.formatMessage({ id: 'known_issues_filter_status.no_fix' }),
       },
     ],

src/utils/typings/types.ts

@@ -18,6 +18,7 @@ export type DataElement = {
   Icon: IconComponent
   description: string
 }
+
 export interface DocDataElement extends DataElement {
   id: string
   title: string
@@ -64,7 +65,7 @@ export type KnownIssueStatus =
   | 'Closed'
   | 'Backlog'
   | 'Scheduled'
-  | 'No fix'
+  | 'No_Fix'
 
 export type KnownIssueDataElement = {
   title: string