#84 added translation
Opened 2 years ago by manishakanyal. Modified 2 years ago
fedora-qa/ manishakanyal/landingpage translation  into  master

removed unused strings
manisha • 2 years ago  
removed unused strings
manisha • 2 years ago  
removed dead strings
manisha • 2 years ago  
removed warnings
manisha • 2 years ago  
implemented react-i18next
manisha • 2 years ago  
removed splits
manisha • 2 years ago  
added translation
manisha • 2 years ago  
file modified
+1 -1
@@ -1,4 +1,4 @@ 

- # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

+ #  https://help.github.com/articles/ignoring-files/ for more about ignoring files.

  

  # dependencies

  /node_modules

file modified
+5
@@ -7,12 +7,17 @@ 

      "@babel/runtime": "^7.14.0",

      "clsx": "^1.1.1",

      "dateformat": "^3.0.3",

+     "i18n-js": "^3.8.0",

+     "i18next": "^20.3.5",

+     "i18next-browser-languagedetector": "^6.1.2",

+     "i18next-http-backend": "^1.3.0",

      "nanoid": "^3.1.22",

      "query-string": "^7.0.0",

      "ramda": "^0.27.1",

      "react": "^16.5.2",

      "react-animate-on-scroll": "^2.1.5",

      "react-dom": "^16.5.2",

+     "react-i18next": "^11.11.4",

      "react-redux": "^7.2.1",

      "react-router-dom": "^5.2.0",

      "react-scripts": "^3.3.0",

file modified
+18 -13
@@ -1,15 +1,15 @@ 

  <!DOCTYPE html>

  <html lang="en">

    <head>

-     <meta charset="utf-8">

-     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

-     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

-     <meta name="theme-color" content="#000000">

+     <meta charset="utf-8" />

+     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />

+     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

+     <meta name="theme-color" content="#000000" />

      <!--

        manifest.json provides metadata used when your web app is added to the

-       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/

+       homescreen on Android.  https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/

      -->

-     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">

+     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

      <!--

        Notice the use of %PUBLIC_URL% in the tags above.

        It will be replaced with the URL of the `public` folder during the build.
@@ -22,16 +22,21 @@ 

      <script src="%PUBLIC_URL%/env.js"></script>

      <title>Fedora QA Landingpage</title>

  

- 

-     <link href="https://apps.fedoraproject.org/global/fedora-bootstrap-1.5.0/fedora-bootstrap.css" type="text/css" rel="stylesheet" />

+     <link

+       href="https://apps.fedoraproject.org/global/fedora-bootstrap-1.5.0/fedora-bootstrap.css"

+       type="text/css"

+       rel="stylesheet"

+     />

      <!-- <script type="text/javascript" src="https://apps.fedoraproject.org/global/fedora-bootstrap-1.0.3/fedora-bootstrap.js"></script>-->

-     <script defer src="https://use.fontawesome.com/releases/v5.7.1/js/all.js" integrity="sha384-eVEQC9zshBn0rFj4+TU78eNA19HMNigMviK/PU/FFjLXqa/GKPgX58rvt5Z8PLs7" crossorigin="anonymous"></script>

- 

+     <script

+       defer

+       src="https://use.fontawesome.com/releases/v5.7.1/js/all.js"

+       integrity="sha384-eVEQC9zshBn0rFj4+TU78eNA19HMNigMviK/PU/FFjLXqa/GKPgX58rvt5Z8PLs7"

+       crossorigin="anonymous"

+     ></script>

    </head>

    <body>

-     <noscript>

-       You need to enable JavaScript to run this app.

-     </noscript>

+     <noscript> You need to enable JavaScript to run this app. </noscript>

      <div id="root"></div>

      <!--

        This HTML file is a template.

@@ -0,0 +1,111 @@ 

+ {

+   "Visit": "Visit",

+   "close": "Close",

+   "source": "Source",

+   "version": "version",

+   "Retrying": "Retrying",

+   "or": "or",

+   "on": "on",

+   "See": "See!",

+   "Preperation": "Preperation",

+   "Testing": "Testing",

+   "Reporting": "Reporting",

+   "Beginner_Guide": "Beginner Guide",

+   "meetbot": "meetbot",

+   "I_found_a_bug": "I found a bug!",

+   "go_to_home": "Go to home page ",

+   "to_see_older": "to see older",

+   "Few_hours": "Few hours",

+   "Everything_went_well": "Everything went well",

+   "Feeling_a_bit_lost": "Feeling a bit lost?",

+   "What_is_Karma": "What is Karma",

+   "Several_days": "Several days",

+   "Show_me_the_test_cases": "Show me the test cases",

+   "Proposed_FEs": "Proposed FEs",

+   "Accepted_FEs": "Accepted FEs",

+   "Not_sure_how": "Not sure how?",

+   "dont_have_an": "Don't have an IRC client?",

+   "Accepted_Blockers": "Accepted Blockers",

+   "Proposed_Blockers": "Proposed Blockers",

+   "Need_some_tips": "Need some tips?",

+   "select_language": "Select Language",

+   "Want_something_a_bit_nicer": "Want something a bit nicer?",

+   "New_to_fedora": "New to fedora-easy-karma?",

+   "Dont_have_one_yet": "Don't have one yet?",

+   "Fedora_QA_Meeting_Minutes": "Fedora QA Meeting Minutes",

+   "blockers_and_FEs": "blockers and FEs",

+   "current_development_schedule": "Current development schedule",

+   "Latest_minutes_from": "Latest minutes from",

+   "Fedora_Accounts_System": "Fedora Accounts System (FAS) account is required.",

+   "Meetings_and_testdays_in_the_next_7_days": "Meetings and testdays in the next 7 days",

+   "Tell_me_more_about": "Tell me more about the process! ",

+   "is_a_group": "Is a group containing several projects. Expand to see more.",

+   "Failed_to_fetch_data": "Failed to fetch data!",

+   "visibility_configuration": "Visibility Configuration",

+   "the_name_of": " The name of the ISO image you used ",

+   "Not_sure_what_that_means": "Not sure what that means?",

+   "Not_making_much_sense": "Not making much sense?",

+   "and_create_it": "and create it.",

+   "Not_sure_what_Karma_means": "Not sure what Karma means?",

+   "do_you_have_some_spare_time": "Click here, and help us make Fedora better!",

+   "Task_that_can_take_up_to_Few_Hours": "Task that can take up to Few Hours",

+   "Task_that_can_take_up_to_Several_Days": "Task that can take up to Several Days",

+   "Im_a_complete_beginner": "I'm a complete beginner",

+   "please_guide_to_me_this": "please guide to me this",

+   "Ive_already_done_this": "I've already done this",

+   "choose_an_update": "Choose an update to test",

+   "sure_let_me_do_it": "Sure, let me do it!",

+   "note_the_user": "Note the username and password, you will need it later on.",

+   "Make_sure_to": "Make sure to read about identifying the environment above.",

+   "Get_your_hands": "Get your hands dirty, and test the hell out of it!",

+   "timeline_Text": "This is a timeline of current Fedora release schedule",

+   "based_on_the": "Based on the enviromnent, select and download and appropriate ISO",

+   "Installation_text": "The <1>Installation</1> testcases generally deal with a part of the installation procedure. You will certainly need an installation ISO, and either a Virtual or Bare-metal machine to run the test.<br /> <4>Note:</4> some (not that many, though) of these testcases require Bare-metal machine. Be sure to read the Description of the testcase carefully.",

+   "Desktop_Text": "The <1>Desktop</1> testcases cover basic functionality of the desktop environment.<br /> You can either install Fedora onto clean Virtual or Bare-metal machine, or use a Live image instead.",

+   "Base_Text": "The <1>Base</1> testcases cover the system's basic functionality just after a clean installation. <br /> Most times, you will be asked to perform a clean Fedora installation. You can use either Virtual or Bare-metal machine. <br /><6>Pro tip:</6> using a snapshot of cleanly installed Virtual machine is just fine. Noneed to reinstall for every testcase.",

+   "Server_Text": "The <1>Server</1> testcases usually require multiple machines to test the server-client behaviour, and might feel a bit advanced.",

+   "Cloud_Text": "Even thought the <1>Cloud</1> testcases are best done in the specific environments like EC2 or Openstack, you can also perform them locally using Testcloud.<br />Have a look at the <6>  Cloud provider setup </6> guides for more details.",

+   "What_is_Karma_Text": "The updates are kept in <2>Bodhi</2>, which acts as a gatekeeper between new package releases and the stable repositories. Users (or automated systems) can then provide feedback in form of positive/negative Karma, marking the update as working (or not) within the scope of their expectations. Anupdate can (and usually does) consist of several packages (rpms), that are going throughthe acceptance process together.",

+   "Make_sure_you": "Make sure your system is up-to-date: <1>{{sudo_dnf}}</1>",

+   "Install_fedora_easy_karma_tool": "Install fedora-easy-karma tool: <1>{{sudo_dnf_install}}</1>",

+   "Have_a_look": "Have a look at the available packages in <1>updates-testing</1> repo, by running <1>{{dnf}}</1> and choose a package you know.",

+   "Install_the_packages": "Install the package  <2>{{sudo_dnf_enablepo}}</2>, and test whether it works, as you would expect.<br /> <5> Note:</5> Other packages from <7>updates-testing</7> repo may be installed as dependencies (shown during the installation process). Try to test those too, if possible. ",

+   "Sometimes_the_update": "Sometimes, the update associated with the package you just installed fixes some specific bugs, or has testcases associated with it. <br /> Run <3>{{fedora_easy_karma}}</3>, and look for  <6>Bugs</6>, <8>Test Cases</8>, and/or <10>Notes</10> sections in the detailed output.",

+   "We_already_mentioned_bodhi": "We already mentioned Bodhi, several times. Instead of using the <2>fedora-easy-karma</2> interface for submitting Karma and/or learning about the Update, you can visit Bodhi directly. <br /> <5>fedora-easy-karma</5> shows the URL of the relevant update near the bottom of the text output - look for URL like <8>https://bodhi.fedoraproject.org/updates/FEDORA-2019-00870e8bfc</8>. <br /> You can have a look at other people's comments, the afore-mentioned Bugs or Test Cases, and even submit the Karma directly. Just use your FAS credentials to log-in.",

+   "Run_fedora_easy_karam": "Run <1>{{fedora_easy_karma}}</1> and report what you found out. ",

+   "It_identifies_installed": "It identifies the packages installed from the <1>updates-testing</1> repository, and matches them to the updates in Bodhi. <br /> You are then presented with the relevant updates one-by-one, to submit Karma and a comment.",

+   "Enter_to_mark_positive": "Enter <1>1</1> to mark positive karma (the update works just fine, as far as you can tell), or <3>-1</3> to mark the package as broken. <br /> Not sure you can judge the package's state? Have a look at the <9> Update Feedback Guidelines </9> <br/> Still not sure? Just press <12>Enter</12> to skip it.",

+   "Add_a_comment_even_if": "Add a comment - even if it works, try to describe what you tested. It can be as easy as  <2>I tried openning and editing a document, and it worked.</2> when you test a text-editor, or  <5>I opened a couple of tabs, and browsed random pages.</5> for a web-browser. <br /> Absolutely make sure to provide reasonable amount of detail, when submitting negative karma - ideally, you should also create a bugreport, and reference it in the comment.",

+   "Restore_the_stable": "Restore the stable-packages on your system by running  <2>{{sudo_dnf_distro}}</2>",

+   "Identify_The_Testcase": "Identify the testcase and `environment` in our  <2> Tescase matrix </2>.",

+   "Have_a_look_at_the_matrix": "Have a look at the matrix. The rows are the testcases, and the columns are the environments. Most of the time, these are <1></1> for the {{testtype}} testcases, but you can also encouter a generic <6>Result</6> column, which usually means you can use any media/architecture available.",

+   "for_this_particular": "For this particular testcase, <1>{{join}}</1> {{length}} missing results.",

+   "Read_the_TestCase": "Read the <2> Testcase </2> briefly, just to have a general idea of what you will be doing.",

+   "Description_Text": "<0>Description</0> should give you a general idea of what is being tested",

+   "Setup_Text": "<0>Setup</0> describes the steps to take before you begin working on the testcase",

+   "How_to_Test": "<0>How to test</0> contains the individual steps to take in order to perform the testcase",

+   "Expected_Results": "<0>Expected results</0> describe what you should check while testing in order to decide whether it Passed of Failed",

+   "study_the_testcase": "Study the <2> Testcase</2> thoroughly, to be sure you know what to do.",

+   "If_you_are_not_familiar": "If you are not that familiar with IRC, you can use the <1> web-interface </1>  just enter a Nickname of your choice, #fedora-qa (including the hash sign) in the Channels field, and click Connect.",

+   "Great_either_use": "Great! Either use <1>relval report-results</1> on command line (make sure to install the <3>relval</3> package first), or modify the  <6> matrix </6> directly by clicking on the <9>Edit</9> link next to the Matrice's header, and put <11></11> in the appropriate spot.",

+   "Awesome_ideally_read": "Awesome! Ideally read up on <1>How_to_file_a_bug_report</1> <br/> If you don't feel like reading a wall of text, at least pot together a small document containing:",

+   "Once_you_get_the_bug": "Once you get the Bug reported, make sure to also submit the result into the testing matrix. Either use <1>relval report-results</1> on command line (make sure to install the <3>relval</3> package first), or modify the <6>matrix </6> directly by clicking on the <9>Edit</9> link next to the Matrice's header, and put <11></11> in the appropriate spot.",

+   "Share_your_notes": "Share your notes on the internet (you can use fpaste), and ask for help with filing the bug report on our IRC channel #fedora-qa at freenode.net ",

+   "The_testcase_structure_is_not_making_sense": "The testcase structure is not making sense?",

+   "The_testcases_are_generally_split_into_four_sections": "The testcases are generally split into four sections:",

+   "Maybe_you_are_stuck": "Maybe you are stuck, or just do not understand something? Feel free to ask on our IRC channel #fedora-qa at freenode.net",

+   "Preperation_text": " Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISOLorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO",

+   "Installation_text0": " Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISOLorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO",

+   "testing_text": " Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISOLorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO",

+   "reporting_text": " Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISOLorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO",

+   "Most_of_the_time": "Most of the time Workstation Live, or Server DVD are fine, but sometimes there are specific products (e.g. Xfce) to be tested",

+   "note_what_you_did": "Note what you did, as precisely as possible, in a step-by-step fashion. Even details like 'Chose Polish as the languae for the installation process' can matter.",

+   "brief_description_of_what": "Brief description of what went wrong (e.g. QA:Testcase_dualboot_with_windows -Bootloader does not show the Windows option)",

+   "try_to_reproduce_the": "Try to reproduce the same state again based on the steps above (you can also experiment a bit, and try to come up with just the critical steps)",

+   "None_of_the_above_looks_interesting_to_you": "None of the above looks interesting to you? We'd be happy if you looked around at",

+   "Before_a_new_version_of_a_package": "Before a new version of a package is pushed to the Fedora's Updates repository, it needs to be tested and proved functional.",

+   "freeze_Text": "At the milestone freeze, pushes from the updates-testing to the stable repository are suspended until the release candidate is accepted.",

+   "Rawhide_Text": "Next Fedora release hasn't been branched yet from rolling release branch.",

+   "branch_Text": "Next version of Fedora that was 'branched' from the rolling Rawhide tree and in the future will become the next stable Fedora release.",

+   "release_Text": "Release candidate was accepted (violating no milestone criteria) and was released."

+ } 

\ No newline at end of file

file modified
+1 -2
@@ -1,11 +1,10 @@ 

  import React from "react"

- 

  import { Route, Switch } from "react-router"

  import { BrowserRouter } from "react-router-dom"

- 

  import Wizard from "./wizard/Wizard"

  import LandingPage from "./landingpage/LandingPage"

  import NotFound from "./NotFound"

+ 

  const App = () => {

    return (

      <BrowserRouter basename={window.env.SUBDIR}>

file modified
+4 -1
@@ -2,8 +2,11 @@ 

  import Layout from "./layout/Layout"

  import { Link } from "react-router-dom"

  import { Container } from "reactstrap"

+ import { useTranslation } from "react-i18next"

  

  const Wizard = () => {

+   const { t } = useTranslation()

+ 

    return (

      <Layout>

        <Container>
@@ -14,7 +17,7 @@ 

                😢

              </span>

            </h3>

-           <Link to="/">Go to home page</Link>

+           <Link to="/"> {t("go_to_home")}</Link>

          </p>

        </Container>

      </Layout>

file added
+29
@@ -0,0 +1,29 @@ 

+ import i18n from "i18next"

+ import LanguageDetector from "i18next-browser-languagedetector"

+ import { initReactI18next } from "react-i18next"

+ import Backend from "i18next-http-backend"

+ 

+ 

+ i18n

+   .use(Backend)

+   .use(LanguageDetector)

+   .use(initReactI18next)

+   .init({

+     react: {

+       useSuspense: false,

+     },

+     fallbackLng: "en",

+     debug: true,

+     keySeparator: false,

+   

+     interpolation: {

+       defaultVariables: {

+         screenName: "foo",

+       },

+       escapeValue: false,

+     },

+    

+   })

+   

+ 

+ export default i18n

file modified
+8
@@ -279,3 +279,11 @@ 

  .bottom-padding {

    margin-bottom: 5px;

  }

+ 

+ .btn-group,

+ .btn-group-vertical {

+   position: relative;

+   display: inline-flex;

+   vertical-align: middle;

+   padding-right: 1em;

+ }

file modified
+13 -11
@@ -1,17 +1,15 @@ 

  import React from "react"

  import ReactDOM from "react-dom"

- 

  import "./index.css"

  import "typeface-open-sans"

- 

  import App from "./App"

  import * as serviceWorker from "./serviceWorker"

- 

  import { createStore, applyMiddleware, compose } from "redux"

  import thunkMiddleware from "redux-thunk"

  import { createLogger } from "redux-logger"

  import { Provider } from "react-redux"

  import reducer from "./reducers"

+ import i18n from "./i18n"

  

  const loggerMiddleware = createLogger()

  
@@ -22,14 +20,18 @@ 

    composeEnhancers(applyMiddleware(thunkMiddleware, loggerMiddleware))

  )

  

- ReactDOM.render(

-   <React.StrictMode>

-     <Provider store={store}>

-       <App />

-     </Provider>

-   </React.StrictMode>,

-   document.getElementById("root")

- )

+ i18n.on("initialized",() => {

+   ReactDOM.render(

+     <React.StrictMode>

+       <Provider store={store}>

+         <App />

+       </Provider>

+     </React.StrictMode>,

+     document.getElementById("root")

+   )

+ })

+ 

+ 

  

  // If you want your app to work offline and load faster, you can change

  // unregister() to register() below. Note this comes with some pitfalls.

file modified
+14 -14
@@ -2,23 +2,23 @@ 

  import { Row, Card, CardBody } from "reactstrap"

  import SourceLink from "./SourceLink"

  import BugStats from "./common/BugStats"

+ import { useTranslation } from "react-i18next"

  

  const Blockers = (props) => {

+   const { t } = useTranslation()

    return (

-     props.data && (

-       <Card className="cards">

-         <CardBody>

-           <h1 className="text-center padded">

-             Fedora {props.release} blockers and FEs{" "}

-             <SourceLink href="https://qa.fedoraproject.org/blockerbugs/" />

-           </h1>

-           <Row>

-             <BugStats milestone={"Beta"} stats={props.data.beta} />

-             <BugStats milestone={"Final"} stats={props.data.final} />

-           </Row>

-         </CardBody>

-       </Card>

-     )

+     <Card className="cards">

+       <CardBody>

+         <h1 className="text-center padded">

+           Fedora {props.release} {t("blockers_and_FEs")}{" "}

+           <SourceLink href="https://qa.fedoraproject.org/blockerbugs/" />

+         </h1>

+         <Row>

+           <BugStats milestone={"Beta"} stats={props.data.beta} />

+           <BugStats milestone={"Final"} stats={props.data.final} />

+         </Row>

+       </CardBody>

+     </Card>

    )

  }

  

file modified
+4 -2
@@ -2,8 +2,10 @@ 

  import dateFormat from "dateformat"

  import SourceLink from "./SourceLink"

  import { Card, CardBody, Row, Col } from "reactstrap"

+ import { useTranslation } from "react-i18next"

  

  const Events = (props) => {

+   const { t } = useTranslation()

    const meetings = props.data.map((meeting) => {

      const old = new Date(meeting.start)

      var date = old.getDate()
@@ -14,7 +16,7 @@ 

      }

      return (

        <Event

-         key={meeting.link}

+         key={date}

          date={date}

          month={month}

          time={time}
@@ -28,7 +30,7 @@ 

      <Card className="cards">

        <CardBody>

          <h1 className="text-center padded">

-           Meetings and testdays in the next 7 days{" "}

+           {t("Meetings_and_testdays_in_the_next_7_days")}{" "}

            <SourceLink href="https://apps.fedoraproject.org/calendar/QA/" />

          </h1>

          <Col md={12} className="padded">

@@ -19,8 +19,10 @@ 

  import { shallowEqual, useDispatch, useSelector } from "react-redux"

  import { loadData, toggleLandingPageModal } from "../actions/reduxActions"

  import Cookies from "universal-cookie"

+ import { useTranslation } from "react-i18next"

  

  const LandingPage = () => {

+   const { t } = useTranslation()

    const cookies = new Cookies()

    let available_components = ["events", "blockers", "minutes"]

    let enabled_components = cookies.get("landingpage_enabled_components")
@@ -109,7 +111,7 @@ 

                {components}

                <Col md={{ size: 12, offset: 2 }} className="text-right">

                  <Modal isOpen={showModal} toggle={toggleModal}>

-                   <ModalHeader>Visibility Configuration</ModalHeader>

+                   <ModalHeader>{t("visibility_configuration")}</ModalHeader>

                    <ModalBody>

                      {available_components.map((item) => (

                        <React.Fragment key={item}>
@@ -124,9 +126,9 @@ 

                              />{" "}

                              <label className="custom-control-label clickable" htmlFor={item}>

                                {item === "events"

-                                 ? "Meetings and testdays in the next 7 days"

+                                 ? t("Meetings_and_testdays_in_the_next_7_days")

                                  : item === "minutes"

-                                 ? "Fedora QA Meeting Minutes"

+                                 ? t("Fedora_QA_Meeting_Minutes")

                                  : "Fedora 35 blockers and FEs"}

                              </label>

                            </div>
@@ -136,7 +138,7 @@ 

                    </ModalBody>

                    <ModalFooter>

                      <Button color="primary" onClick={toggleModal}>

-                       Close

+                       {t("close")}

                      </Button>

                    </ModalFooter>

                  </Modal>
@@ -148,7 +150,7 @@ 

                    className="pad btn btn-primary btn-block btn-wrap-text btn-lg active"

                    to="/wizard"

                    role="button">

-                   Click here, and help us make Fedora better! <i className="fas fa-search"></i>

+                   {t("do_you_have_some_spare_time")} <i className="fas fa-search"></i>

                  </Link>

                </Col>

              </Row>

file modified
+8 -5
@@ -1,6 +1,9 @@ 

  import React from "react"

+ import { useTranslation } from "react-i18next"

  import { Card, CardBody } from "reactstrap"

  const Events = (props) => {

+   const { t } = useTranslation()

+ 

    const old = props.data.date

  

    let date = old.slice(0, 10)
@@ -12,20 +15,20 @@ 

    return (

      <Card className="cards">

        <CardBody className="minutes">

-         <h1 className="text-center padded">Fedora QA Meeting Minutes</h1>

+         <h1 className="text-center padded">{t("Fedora_QA_Meeting_Minutes")}</h1>

          <div className="events minutes">

            <a target="_blank" href={props.data.link} rel="noopener noreferrer">

-             Latest minutes from {dating} {timing}

+             {t("Latest_minutes_from")} {dating} {timing}

            </a>

            <br />

-           Visit{" "}

+           {t("Visit")}{" "}

            <a

              target="_blank"

              href="https://meetbot.fedoraproject.org/sresults/?group_id=fedora-qa&type=team"

              rel="noopener noreferrer">

-             meetbot

+             {t("meetbot")}

            </a>{" "}

-           to see older.

+           {t("to_see_older")}.

            <br />

          </div>

        </CardBody>

file modified
+9 -10
@@ -1,22 +1,21 @@ 

  import React, { useState } from "react"

+ import { useTranslation } from "react-i18next"

  import { Card, CardBody, Tooltip } from "reactstrap"

  import SourceLink from "./SourceLink"

  

  const Timeline = (props) => {

+   const { t } = useTranslation()

+ 

    const [tooltipOpen, setTooltipOpen] = useState(false)

  

    const toggle = () => setTooltipOpen(!tooltipOpen)

  

    const get_title = (summary) => {

      summary = summary.toLowerCase()

-     if (summary.includes("freeze"))

-       return "At the milestone freeze, pushes from the updates-testing to the stable repository are suspended until the release candidate is accepted."

-     if (summary === "rawhide")

-       return "Next Fedora release hasn't been branched yet from rolling release branch."

-     if (summary.includes("branch"))

-       return "Next version of Fedora that was 'branched' from the rolling Rawhide tree and in the future will become the next stable Fedora release."

-     if (summary.includes("release"))

-       return "Release candidate was accepted (violating no milestone criteria) and was released."

+     if (summary.includes("freeze")) return t("freeze_Text")

+     if (summary === "rawhide") return t("Rawhide_Text")

+     if (summary.includes("branch")) return t("branch_Text")

+     if (summary.includes("release")) return t("release_Text")

    }

  

    const line = props.data.map((milestone) => {
@@ -47,7 +46,7 @@ 

        <Card>

          <CardBody>

            <h1 className="text-center padded" width="150">

-             Current development schedule{" "}

+             {t("current_development_schedule")}{" "}

              <span href="#" id="TooltipExample">

                <i className="fas fa-question-circle light"></i>

              </span>
@@ -56,7 +55,7 @@ 

                isOpen={tooltipOpen}

                target="TooltipExample"

                toggle={toggle}>

-               This is a timeline of current Fedora release schedule

+               {t("timeline_Text")}

              </Tooltip>{" "}

              <SourceLink href="https://fedorapeople.org/groups/schedule/" />

            </h1>

@@ -1,8 +1,10 @@ 

  import React from "react"

+ import { useTranslation } from "react-i18next"

  import { Table, Col } from "reactstrap"

  

  const BugStats = (props) => {

    const { milestone, stats } = props

+   const { t } = useTranslation()

  

    return (

      <Col md={6} className="bugscount">
@@ -18,19 +20,19 @@ 

            {stats && (

              <>

                <tr>

-                 <td>Proposed Blockers</td>

+                 <td>{t("Proposed_Blockers")}</td>

                  <td>{stats.blockers_proposed}</td>

                </tr>

                <tr>

-                 <td>Accepted Blockers</td>

+                 <td>{t("Accepted_Blockers")}</td>

                  <td>{stats.blockers}</td>

                </tr>

                <tr>

-                 <td>Proposed FEs</td>

+                 <td>{t("Proposed_FEs")}</td>

                  <td>{stats.fe_proposed}</td>

                </tr>

                <tr>

-                 <td>Accepted FEs</td>

+                 <td>{t("Accepted_FEs")}</td>

                  <td>{stats.fe}</td>

                </tr>

              </>

file modified
+12 -11
@@ -1,16 +1,17 @@ 

- import React, { Component } from "react"

+ import React from "react"

+ import { useTranslation } from "react-i18next"

  

- class Footer extends Component {

-   render() {

-     return (

-       <div className="footer">

-         <div className="container">

-           <a href="https://pagure.io/fedora-qa/landingpage">Source</a> on Pagure{" "}

-           <span className="float-right">version 0.1.0</span>

-         </div>

+ const Footer = () => {

+   const { t } = useTranslation()

+ 

+   return (

+     <div className="footer">

+       <div className="container">

+         <a href="https://pagure.io/fedora-qa/landingpage">{t("source")}</a> {t("on")} Pagure {" "}

+         <span className="float-right">{t("version")} 0.1.0</span>

        </div>

-     )

-   }

+     </div>

+   )

  }

  

  export default Footer

file modified
+49 -4
@@ -1,16 +1,37 @@ 

- import React from "react"

+ import React, { useEffect, useState } from "react"

  import { Link, useLocation } from "react-router-dom"

- import { Container, NavbarBrand, Navbar, Button } from "reactstrap"

+ import {

+   Container,

+   NavbarBrand,

+   Navbar,

+   Button,

+   DropdownToggle,

+   DropdownMenu,

+   DropdownItem,

+   ButtonDropdown,

+ } from "reactstrap"

  import { API_CALL_STATUS_VALUES } from "../constants/ProjectConstants"

  import { ROUTE } from "../constants/Routes"

  import logo from "./logo.png"

  import { loadData, loadWizardData, toggleLandingPageModal } from "../actions/reduxActions"

  import { shallowEqual, useDispatch, useSelector } from "react-redux"

+ import { useTranslation } from "react-i18next"

  

  const selectWizardFromStore = (state) => state.wizard.api_call_status

  const selectLandingPageFromStore = (state) => state.landing_page.api_call_status

  

+ const language = [

+   {

+     lang: "en",

+     name: "english",

+   },

+ ]

+ 

  const Masthead = () => {

+   const { t, i18n } = useTranslation()

+   const [dropdownOpen, setDropdownOpen] = useState(false)

+   const [lang, setLang] = useState("")

+ 

    const location = useLocation()

    const dispatch = useDispatch()

  
@@ -48,6 +69,19 @@ 

      dispatch(toggleLandingPageModal(modalState))

    }

  

+   const handleClick = (lang) => {

+     i18n.changeLanguage(lang)

+     localStorage.setItem("locale", lang)

+     setLang(lang)

+   }

+ 

+   useEffect(() => {

+     const language = localStorage.getItem("locale")

+     setLang(language)

+   }, [])

+ 

+   const toggle = () => setDropdownOpen((prevState) => !prevState)

+ 

    return (

      <Navbar className="masthead">

        <Container>
@@ -56,6 +90,7 @@ 

              <img src={logo} alt="" />

            </Link>

          </NavbarBrand>

+ 

          <div>

            {api_call_status() === API_CALL_STATUS_VALUES.STARTED ||

            api_call_status() === API_CALL_STATUS_VALUES.RETRYING ? (
@@ -65,7 +100,7 @@ 

                    <span className="fa-lg mr-1 text-danger">

                      <i className="fas fa-exclamation-triangle"></i>

                    </span>

-                   <span className="mr-3">Retrying</span>

+                   <span className="mr-3">{t("Retrying")}</span>

                  </>

                )}

                <span className="fa-lg mr-3">
@@ -78,7 +113,7 @@ 

                <span className="fa-lg mr-1">

                  <i class="fas fa-exclamation-triangle"></i>

                </span>

-               <span className="mr-3">Failed to fetch data!</span>

+               <span className="mr-3">{t("Failed_to_fetch_data")}</span>

                {handleRetry && (

                  <Button outline color="danger" size="sm" onClick={handleRetry}>

                    Retry
@@ -86,6 +121,16 @@ 

                )}

              </>

            )}

+ 

+           <ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>

+             <DropdownToggle caret>{lang ? lang : t("select_language")}</DropdownToggle>

+             <DropdownMenu>

+               {language.map((item) => (

+                 <DropdownItem  key={item} onClick={() => handleClick(item.lang)}>{item.name}</DropdownItem>

+               ))}

+             </DropdownMenu>

+           </ButtonDropdown>

+ 

            {ROUTE.LANDING_PAGE === location.pathname && (

              <Button color="primary" onClick={toggleModal}>

                <i className="fas fa-cog"></i>

file modified
+1
@@ -66,6 +66,7 @@ 

            showModal: action.payload,

          },

        }

+ 

      default:

        return {

          ...state,

file modified
+14 -4
@@ -1,6 +1,7 @@ 

  import React from "react"

  import { CollapsableCard } from "./components"

  import { Col } from "reactstrap"

+ import { useTranslation } from "react-i18next"

  

  export default (props) => {

    return (
@@ -15,6 +16,7 @@ 

  }

  

  const EasyfixSection = (props) => {

+   const { t } = useTranslation()

    var title = props.title

    var subsections = Object.keys(props.data)

  
@@ -27,19 +29,23 @@ 

        )

  

        return (

-         <CollapsableCard key={k} title={title} expand_class="primary" expand_text="See!">

+         <CollapsableCard key={k} title={title} expand_class="primary" expand_text={t("See")}>

            <EasyfixLinksList data={props.data[k]} />

          </CollapsableCard>

        )

      })

      title = (

        <span>

-         <b>{title}</b> - Is a group containing several projects. Expand to see more.

+         <b>{title}</b> - {t("is_a_group")}

        </span>

      )

  

      return (

-       <CollapsableCard key={title} title={title} expand_class="warning" expand_text="Expand!">

+       <CollapsableCard

+         key={title}

+         title={title}

+         expand_class="warning"

+         expand_text={t("Expand!")}>

          {subsections}

        </CollapsableCard>

      )
@@ -63,7 +69,11 @@ 

      ))

  

      return (

-       <CollapsableCard key={title} title={title} expand_class="primary" expand_text="See!">

+       <CollapsableCard

+         key={title}

+         title={title}

+         expand_class="primary"

+         expand_text={t("See")}>

          {links}

        </CollapsableCard>

      )

file modified
+119 -79
@@ -1,129 +1,169 @@ 

  import React from "react"

  import { CollapsableBadge, ModalBadge } from "./components"

+ import { Trans, useTranslation } from "react-i18next"

  

  export default (props) => {

+   const { t } = useTranslation()

+   const sudo_dnf="sudo dnf update --refresh"

+   const sudo_dnf_install="sudo dnf install fedora-easy-karma"

+   const dnf="dnf --enablerepo=updates-testing list --refresh --upgrades"

+   const sudo_dnf_enablepo="sudo dnf --enablerepo=updates-testing update PACKAGE_NAME"

+   const fedora_easy_karma="fedora-easy-karma --fas-username=FAS_USERNAME"

+   const sudo_dnf_distro ="sudo dnf distro-sync"

+ 

    if (props.data === undefined) return null

    else

      return (

        <div>

-         <h1>What is Karma</h1>

-         Before a new version of a package is pushed to the Fedora&apos;s Updates repository, it

-         needs to be tested and proved functional.{" "}

-         <CollapsableBadge expand_text="Tell me more about the process!">

-           The updates are kept in{" "}

-           <a target="_blank" rel="noopener noreferrer" href="https://bodhi.fedoraproject.org/">

-             Bodhi

-           </a>

-           , which acts as a gatekeeper between new package releases and the stable repositories.{" "}

-           Users (or automated systems) can then provide feedback in form of positive/negative

-           Karma, marking the update as working (or not) within the scope of their expectations. An

-           update can (and usually does) consist of several packages (rpms), that are going through

-           the acceptance process together.

+         <h1>{t("What_is_Karma")}</h1>

+         {t("Before_a_new_version_of_a_package")}{" "}

+         <CollapsableBadge expand_text={t("Tell_me_more_about")}>

+           <Trans

+             i18nKey="What_is_Karma_Text">

+             The updates are kept in{" "}

+             <a target="_blank" rel="noopener noreferrer" href="https://bodhi.fedoraproject.org/">

+               Bodhi

+             </a>

+             , which acts as a gatekeeper between new package releases and the stable repositories.{" "}

+             Users (or automated systems) can then provide feedback in form of positive/negative

+             Karma, marking the update as working (or not) within the scope of their expectations.

+             An update can (and usually does) consist of several packages (rpms), that are going

+             through the acceptance process together.

+           </Trans>

          </CollapsableBadge>

-         <h1 style={{ marginTop: 1 + "em" }}>Sure, let me do it!</h1>

+         <h1 style={{ marginTop: 1 + "em" }}>{t("sure_let_me_do_it")}</h1>

          <ol className="steps">

            <li>

-             Fedora Accounts System (FAS) account is required.{" "}

-             <CollapsableBadge expand_text="Don&#39;t have one yet?">

+             {t("Fedora_Accounts_System")}{" "}

+             <CollapsableBadge expand_text={t("Dont_have_one_yet")}>

                <ul>

                  <li>

-                   Visit{" "}

+                   {t("Visit")}{" "}

                    <a

                      target="_blank"

                      rel="noopener noreferrer"

                      href="https://admin.fedoraproject.org/accounts/user/new">

                      FAS Sign-up page

                    </a>{" "}

-                   and create it.

+                   {t("and_create_it")}

                  </li>

-                 <li>Note the username and password, you will need it later on.</li>

+                 <li>{t("note_the_user")}</li>

                </ul>

              </CollapsableBadge>

            </li>

            <li>

-             Make sure your system is up-to-date: <code>sudo dnf update --refresh</code>

+             <Trans i18nKey="Make_sure_you">

+               Make sure your system is up-to-date: <code>{{sudo_dnf}}</code>

+             </Trans>

            </li>

            <li>

-             Install fedora-easy-karma tool: <code>sudo dnf install fedora-easy-karma</code>

+             <Trans i18nKey="Install_fedora_easy_karma_tool">

+               Install fedora-easy-karma tool: <code>{{sudo_dnf_install}}</code>

+             </Trans>

            </li>

            <li>

-             Choose an update to test{" "}

-             <CollapsableBadge expand_text="Not sure how?">

-               Have a look at the available packages in <code>updates-testing</code> repo, by

-               running <code>dnf --enablerepo=updates-testing list --refresh --upgrades</code> and

-               choose a package you know.

+             {t("choose_an_update")}{" "}

+             <CollapsableBadge expand_text={t("Not_sure_how")}>

+               <Trans i18nKey="Have_a_look">

+                 Have a look at the available packages in <code>updates-testing</code> repo, by

+                 running <code>{{dnf}}</code> and

+                 choose a package you know.

+               </Trans>

              </CollapsableBadge>

            </li>

            <li>

-             Install the package{" "}

-             <code>sudo dnf --enablerepo=updates-testing update PACKAGE_NAME</code>, and test

-             whether it works, as you would expect.

-             <br />

-             <strong>Note:</strong> Other packages from <code>updates-testing</code> repo may be

-             installed as dependencies (shown during the installation process). Try to test those

-             too, if possible.{" "}

-             <CollapsableBadge expand_text="Need some tips?">

-               Sometimes, the update associated with the package you just installed fixes some

-               specific bugs, or has testcases associated with it.

+             <Trans i18nKey="Install_the_packages">

+               Install the package{" "}

+               <code>{{sudo_dnf_enablepo}}</code>, and test

+               whether it works, as you would expect.

                <br />

-               Run <code>fedora-easy-karma --fas-username=FAS_USERNAME</code>, and look for{" "}

-               <code>Bugs</code>, <code>Test Cases</code>, and/or <code>Notes</code> sections in the

-               detailed output.{" "}

-               <ModalBadge expand_text="Want something a bit nicer?">

-                 We already mentioned Bodhi, several times. Instead of using the{" "}

-                 <code>fedora-easy-karma</code> interface for submitting Karma and/or learning about

-                 the Update, you can visit Bodhi directly.

-                 <br />

-                 <code>fedora-easy-karma</code> shows the URL of the relevant update near the bottom

-                 of the text output - look for URL like{" "}

-                 <code>https://bodhi.fedoraproject.org/updates/FEDORA-2019-00870e8bfc</code>.

+               <strong>Note:</strong> Other packages from <code>updates-testing</code> repo may be

+               installed as dependencies (shown during the installation process). Try to test those

+               too, if possible.{" "}

+             </Trans>

+             <CollapsableBadge expand_text={t("Need_some_tips")}>

+               <Trans

+                 i18nKey="Sometimes_the_update">

+                 Sometimes, the update associated with the package you just installed fixes some

+                 specific bugs, or has testcases associated with it.

                  <br />

-                 You can have a look at other people's comments, the afore-mentioned Bugs or Test

-                 Cases, and even submit the Karma directly. Just use your FAS credentials to log-in.

+                 Run <code>{{fedora_easy_karma}}</code>, and look for{" "}

+                 <code>Bugs</code>, <code>Test Cases</code>, and/or <code>Notes</code> sections in

+                 the detailed output.{" "}

+               </Trans>

+               <ModalBadge expand_text={t("Want_something_a_bit_nicer")}>

+                 <Trans i18nKey="We_already_mentioned_bodhi">

+                   We already mentioned Bodhi, several times. Instead of using the{" "}

+                   <code>fedora-easy-karma</code> interface for submitting Karma and/or learning

+                   about the Update, you can visit Bodhi directly.

+                   <br />

+                   <code>fedora-easy-karma</code> shows the URL of the relevant update near the

+                   bottom of the text output - look for URL like{" "}

+                   <code>https://bodhi.fedoraproject.org/updates/FEDORA-2019-00870e8bfc</code>.

+                   <br />

+                   You can have a look at other people's comments, the afore-mentioned Bugs or Test

+                   Cases, and even submit the Karma directly. Just use your FAS credentials to

+                   log-in.

+                 </Trans>

                </ModalBadge>

              </CollapsableBadge>

            </li>

            <li>

-             Run <code>fedora-easy-karma --fas-username=FAS_USERNAME</code> and report what you

-             found out.{" "}

-             <CollapsableBadge expand_text="New to fedora-easy-karma?">

-               It identifies the packages installed from the <code>updates-testing</code>{" "}

-               repository, and matches them to the updates in Bodhi.

-               <br />

-               You are then presented with the relevant updates one-by-one, to submit Karma and a

-               comment.{" "}

-               <ModalBadge expand_text="Not sure what Karma means?">

+             <Trans i18nKey="Run_fedora_easy_karam">

+               Run <code>{{fedora_easy_karma}}</code> and report what you

+               found out.{" "}

+             </Trans>

+             <CollapsableBadge expand_text={t("New_to_fedora")}>

+               <Trans i18nKey="It_identifies_installed">

+                 It identifies the packages installed from the <code>updates-testing</code>{" "}

+                 repository, and matches them to the updates in Bodhi.

+                 <br />

+                 You are then presented with the relevant updates one-by-one, to submit Karma and a

+                 comment.{" "}

+               </Trans>

+               <ModalBadge expand_text={t("Not_sure_what_Karma_means")}>

                  <ol>

                    <li>

-                     Enter <code>1</code> to mark positive karma (the update works just fine, as far

-                     as you can tell), or <code>-1</code> to mark the package as broken. <br />

-                     Not sure you can judge the package's state? Have a look at the{" "}

-                     <a

-                       target="_blank"

-                       href="https://fedoraproject.org/wiki/QA:Update_feedback_guidelines"

-                       rel="noopener noreferrer">

-                       Update Feedback Guidelines

-                     </a>

-                     <br />

-                     Still not sure? Just press <code>Enter</code> to skip it.

+                     <Trans

+                       i18nKey="Enter_to_mark_positive">

+                       Enter <code>1</code> to mark positive karma (the update works just fine, as

+                       far as you can tell), or <code>-1</code> to mark the package as broken.{" "}

+                       <br />

+                       Not sure you can judge the package's state? Have a look at the{" "}

+                       <a

+                         target="_blank"

+                         href="https://fedoraproject.org/wiki/QA:Update_feedback_guidelines"

+                         rel="noopener noreferrer">

+                         Update Feedback Guidelines

+                       </a>

+                       <br />

+                       Still not sure? Just press <code>Enter</code> to skip it.

+                     </Trans>

                    </li>

                    <li>

-                     Add a comment - even if it works, try to describe what you tested. It can be as

-                     easy as <code>I tried openning and editing a document, and it worked.</code>{" "}

-                     when you test a text-editor, or{" "}

-                     <code>I opened a couple of tabs, and browsed random pages.</code> for a

-                     web-browser.

-                     <br />

-                     Absolutely make sure to provide reasonable amount of detail, when submitting

-                     negative karma - ideally, you should also create a bugreport, and reference it

-                     in the comment.

+                     <Trans

+                       i18nKey="Add_a_comment_even_if">

+                       Add a comment - even if it works, try to describe what you tested. It can be

+                       as easy as{" "}

+                       <code>I tried openning and editing a document, and it worked.</code> when you

+                       test a text-editor, or{" "}

+                       <code>I opened a couple of tabs, and browsed random pages.</code> for a

+                       web-browser.

+                       <br />

+                       Absolutely make sure to provide reasonable amount of detail, when submitting

+                       negative karma - ideally, you should also create a bugreport, and reference

+                       it in the comment.

+                     </Trans>

                    </li>

                  </ol>

                </ModalBadge>

              </CollapsableBadge>

            </li>

            <li>

-             Restore the stable-packages on your system by running <code>sudo dnf distro-sync</code>

+             <Trans i18nKey="Restore_the_stable">

+               Restore the stable-packages on your system by running{" "}

+               <code>{{sudo_dnf_distro}}</code>

+             </Trans>{" "}

            </li>

          </ol>

        </div>

file modified
+204 -153
@@ -1,6 +1,8 @@ 

  import React, { useState } from "react"

+ import ReactDOMServer from "react-dom/server"

  import { Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap"

  import { CollapsableCard, ModalBadge } from "./components"

+ import { Trans, useTranslation } from "react-i18next"

  

  export default (props) => {

    let sections = Object.keys(props.data).map((k) => (
@@ -22,6 +24,7 @@ 

  }

  

  export function FedoraManualTestingItemsListSub1(props) {

+   const { t } = useTranslation()

    var subsections = Object.keys(props.data).map((k) => (

      <li key={"li" + k}>

        <span>{k}</span>
@@ -35,64 +38,72 @@ 

      case "Installation":

        l1 = (

          <div>

-           The <strong>Installation</strong> testcases generally deal with a part of the

-           installation procedure.

-           <br />

-           You will certainly need an installation ISO, and either a Virtual or Bare-metal machine

-           to run the test.

-           <br />

-           <i>Note:</i> some (not that many, though) of these testcases require Bare-metal machine.

-           Be sure to read the Description of the testcase carefully.

+           <Trans i18nKey="Installation_text">

+             The <strong>Installation</strong> testcases generally deal with a part of the

+             installation procedure. You will certainly need an installation ISO, and either a

+             Virtual or Bare-metal machine to run the test.

+             <br />

+             <i>Note:</i> some (not that many, though) of these testcases require Bare-metal

+             machine. Be sure to read the Description of the testcase carefully.

+           </Trans>

          </div>

        )

        break

      case "Desktop":

        l1 = (

          <div>

-           The <strong>Desktop</strong> testcases cover basic functionality of the desktop

-           environment.

-           <br />

-           You can either install Fedora onto clean Virtual or Bare-metal machine, or use a Live

-           image instead.

+           <Trans i18nKey="Desktop_Text">

+             The <strong>Desktop</strong> testcases cover basic functionality of the desktop

+             environment.

+             <br />

+             You can either install Fedora onto clean Virtual or Bare-metal machine, or use a Live

+             image instead.

+           </Trans>

          </div>

        )

        break

      case "Base":

        l1 = (

          <div>

-           The <strong>Base</strong> testcases cover the system&#x27;s basic functionality just

-           after a clean installation.

-           <br />

-           Most times, you will be asked to perform a clean Fedora installation. You can use either

-           Virtual or Bare-metal machine.

-           <br />

-           <i>Pro tip:</i> using a snapshot of cleanly installed Virtual machine is just fine. No

-           need to reinstall for every testcase.

+           <Trans i18nKey="Base_Text">

+             The <strong>Base</strong> testcases cover the system&#x27;s basic functionality just

+             after a clean installation.

+             <br />

+             Most times, you will be asked to perform a clean Fedora installation. You can use

+             either Virtual or Bare-metal machine.

+             <br />

+             <i>Pro tip:</i> using a snapshot of cleanly installed Virtual machine is just fine. No

+             need to reinstall for every testcase.

+           </Trans>

          </div>

        )

        break

      case "Server":

        l1 = (

          <div>

-           The <strong>Server</strong> testcases usually require multiple machines to test the

-           server-client behaviour, and might feel a bit advanced.

+           <Trans i18nKey="Server_Text">

+             The <strong>Server</strong> testcases usually require multiple machines to test the

+             server-client behaviour, and might feel a bit advanced.

+           </Trans>

          </div>

        )

        break

      case "Cloud":

        l1 = (

          <div>

-           Even thought the <strong>Cloud</strong> testcases are best done in the specific

-           environments like EC2 or Openstack, you can also perform them locally using Testcloud.

-           <br />

-           Have a look at the{" "}

-           <a

-             target="_blank"

-             rel="noopener noreferrer"

-             href="https://fedoraproject.org/wiki/Test_Results:Fedora_Current_Cloud#Cloud_Provider_Setup">

-             Cloud provider setup

-           </a>{" "}

-           guides for more details.

+           <Trans i18nKey="Cloud_Text">

+             Even thought the <strong>Cloud</strong> testcases are best done in the specific

+             environments like EC2 or Openstack, you can also perform them locally using Testcloud.

+             <br />

+             Have a look at the{" "}

+             <a

+               target="_blank"

+               rel="noopener noreferrer"

+               href="https://fedoraproject.org/wiki/Test_Results:Fedora_Current_Cloud#Cloud_Provider_Setup">

+               Cloud provider setup

+             </a>{" "}

+             guides for more details.

+           </Trans>

          </div>

        )

        break
@@ -101,7 +112,7 @@ 

    }

  

    return (

-     <CollapsableCard title={l1} expand_text="See" expand_class="primary">

+     <CollapsableCard title={l1} expand_text={t("See")} expand_class="primary">

        {subsections}

      </CollapsableCard>

    )
@@ -115,32 +126,34 @@ 

  

    const matrix_url = extra_data.matrix_url

    var environment_examples = undefined

+   const { t } = useTranslation()

    switch (extra_data.testtype) {

      case "Installation":

        environment_examples = (

          <span>

-           <code>x86_64</code> or <code>ARM</code>

+           <code>x86_64</code> {t("or")} <code>ARM</code>

          </span>

        )

        break

      case "Base":

        environment_examples = (

          <span>

-           <code>Workstation</code>, <code>Server</code>, <code>Xfce</code> or <code>Minimal</code>

+           <code>Workstation</code>, <code>Server</code>, <code>{t("or")}</code> or{" "}

+           <code>Minimal</code>

          </span>

        )

        break

      case "Desktop":

        environment_examples = (

          <span>

-           <code>Workstation</code> or <code>KDE</code>

+           <code>Workstation</code> {t("or")} <code>KDE</code>

          </span>

        )

        break

      case "Server":

        environment_examples = (

          <span>

-           <code>x86_64</code> or <code>aarch64</code>

+           <code>x86_64</code> {t("or")} <code>aarch64</code>

          </span>

        )

        break
@@ -149,62 +162,84 @@ 

    }

  

    const testtype = extra_data.testtype

- 

+   const length = extra_data.envs.length > 1 ? "environments are" : "environment is"

+   const join = extra_data.envs.join(", ")

+   const environment_variables = {__html: ReactDOMServer.renderToString(environment_examples)}

+   const success_variables = {__html: ReactDOMServer.renderToString(<>&#123;&#123;result|pass|YOUR_NAME_HERE|&#125;&#125;</>) }

+   const fail_variables = {__html: ReactDOMServer.renderToString(<>&#123;&#123;result|fail|YOUR_NAME_HERE|BUG_NUMBER|&#125;&#125;</>)}

+   

    return (

      <ModalInfo buttonLabel={name}>

        <ol className="steps">

          <li>

-           Identify the testcase and `environment` in our{" "}

-           <a target="_blank" rel="noopener noreferrer" href={matrix_url}>

-             Tescase matrix

-           </a>{" "}

-           <ModalBadge expand_text="Not sure what that means?">

+           <Trans i18nKey="Identify_The_Testcase">

+             Identify the testcase and `environment` in our{" "}

+             <a target="_blank" rel="noopener noreferrer" href={matrix_url}>

+               Tescase matrix{" "}

+             </a>

+           </Trans>

+           <ModalBadge expand_text={t("Not_sure_what_that_means")}>

              <ul>

                <li>

-                 Have a look at the matrix. The rows are the testcases, and the columns are the

-                 environments. Most of the time, these are {environment_examples} for the {testtype}{" "}

-                 testcases, but you can also encouter a generic <code>Result</code> column, which

-                 usually means you can use any media/architecture available.

+                 <Trans i18nKey="Have_a_look_at_the_matrix">

+                   Have a look at the matrix. The rows are the testcases, and the columns are the

+                   environments. Most of the time, these are <span dangerouslySetInnerHTML={environment_variables}></span>

+                   for the {{ testtype }} testcases, but you can also encouter a generic{" "}

+                   <code>Result</code> column, which usually means you can use any

+                   media/architecture available.

+                 </Trans>

                </li>

                <li>

-                 For this particular testcase, <code>{extra_data.envs.join(", ")}</code>{" "}

-                 {extra_data.envs.length > 1 ? "environments are" : "environment is"} missing

-                 results.

+                 <Trans i18nKey="for_this_particular">

+                   For this particular testcase, <code>{{ join }}</code> {{ length }} missing

+                   results.

+                 </Trans>

                </li>

              </ul>

            </ModalBadge>

          </li>

  

          <li>

-           Read the{" "}

-           <a target="_blank" rel="noopener noreferrer" href={tc_url}>

-             Testcase

-           </a>{" "}

-           briefly, just to have a general idea of what you will be doing.{" "}

-           <ModalBadge expand_text="Not making much sense?">

-             The testcases are generally split into four sections:

+           <Trans i18nKey="Read_the_TestCase">

+             Read the{" "}

+             <a target="_blank" rel="noopener noreferrer" href={tc_url}>

+               Testcase

+             </a>{" "}

+             briefly, just to have a general idea of what you will be doing.

+           </Trans>

+           <ModalBadge expand_text={t("Not_making_much_sense")}>

+             {t("The_testcases_are_generally_split_into_four_sections")}

              <ul>

                <li>

-                 <strong>Description</strong> should give you a general idea of what is being tested

+                 <Trans i18nKey="Description_Text">

+                   <strong>Description</strong> should give you a general idea of what is being

+                   tested

+                 </Trans>

                </li>

                <li>

-                 <strong>Setup</strong> describes the steps to take before you begin working on the

-                 testcase

+                 <Trans i18nKey="Setup_Text">

+                   <strong>Setup</strong> describes the steps to take before you begin working on

+                   the testcase

+                 </Trans>

                </li>

                <li>

-                 <strong>How to test</strong> contains the individual steps to take in order to

-                 perform the testcase

+                 <Trans i18nKey="How_to_Test">

+                   <strong>How to test</strong> contains the individual steps to take in order to

+                   perform the testcase

+                 </Trans>

                </li>

                <li>

-                 <strong>Expected results</strong> describe what you should check while testing in

-                 order to decide whether it Passed of Failed

+                 <Trans i18nKey="Expected_Results">

+                   <strong>Expected results</strong> describe what you should check while testing in

+                   order to decide whether it Passed of Failed

+                 </Trans>

                </li>

              </ul>

            </ModalBadge>

          </li>

  

          <li>

-           Based on the enviromnent, select and download and appropriate ISO{" "}

+           {t("based_on_the")}{" "}

            <a

              target="_blank"

              rel="noopener noreferrer"
@@ -212,26 +247,27 @@ 

              here

            </a>

            .{" "}

-           <ModalBadge expand_text="Not sure how?">

+           <ModalBadge expand_text={t("Not_sure_how")}>

              <ul>

+               <li>{t("Most_of_the_time")}</li>

                <li>

-                 Most of the time Workstation Live, or Server DVD are fine, but sometimes there are

-                 specific products (e.g. Xfce) to be tested

-               </li>

-               <li>

-                 Make sure to read about identifying the environment above.{" "}

-                 <ModalBadge expand_text="See">

+                 {t("Make_sure_to")}{" "}

+                 <ModalBadge expand_text={t("See")}>

                    <ul>

                      <li>

-                       Have a look at the matrix. The rows are the testcases, and the columns are

-                       the environments. Most of the time, these are {environment_examples} for the{" "}

-                       {testtype} testcases, but you can also encouter a generic <code>Result</code>{" "}

-                       column, which usually means you can use any media/architecture available.

+                       <Trans i18nKey="Have_a_look_at_the_matrix">

+                   Have a look at the matrix. The rows are the testcases, and the columns are the

+                   environments. Most of the time, these are <span dangerouslySetInnerHTML={environment_variables}></span>

+                   for the {{ testtype }} testcases, but you can also encouter a generic{" "}

+                   <code>Result</code> column, which usually means you can use any

+                   media/architecture available.

+                 </Trans>

                      </li>

                      <li>

-                       For this particular testcase, <code>{extra_data.envs.join(", ")}</code>{" "}

-                       {extra_data.envs.length > 1 ? "environments are" : "environment is"} missing

-                       results.

+                       <Trans i18nKey="for_this_particular">

+                         For this particular testcase, <code>{{ join }}</code> {{ length }} missing

+                         results.

+                       </Trans>

                      </li>

                    </ul>

                  </ModalBadge>
@@ -241,107 +277,122 @@ 

          </li>

  

          <li>

-           Study the{" "}

-           <a target="_blank" rel="noopener noreferrer" href={tc_url}>

-             Testcase

-           </a>{" "}

-           thoroughly, to be sure you know what to do.{" "}

-           <ModalBadge expand_text="Feeling a bit lost?">

+           <Trans i18nKey="study_the_testcase">

+             Study the{" "}

+             <a target="_blank" rel="noopener noreferrer" href={tc_url}>

+               Testcase

+             </a>{" "}

+             thoroughly, to be sure you know what to do.{" "}

+           </Trans>

+           <ModalBadge expand_text={t("Feeling_a_bit_lost")}>

              <ul>

                <li>

-                 The testcase structure is not making sense?{" "}

-                 <ModalBadge expand_text="Click here">

-                   The testcases are generally split into four sections:

+                 {t("The_testcase_structure_is_not_making_sense")}{" "}

+                 <ModalBadge expand_text={t("See")}>

+                   {t("The_testcases_are_generally_split_into_four_sections")}

                    <ul>

                      <li>

-                       <strong>Description</strong> should give you a general idea of what is being

-                       tested

+                       <Trans i18nKey="Description_Text">

+                         <strong>Description</strong> should give you a general idea of what is

+                         being tested

+                       </Trans>

                      </li>

                      <li>

-                       <strong>Setup</strong> describes the steps to take before you begin working

-                       on the testcase

+                       <Trans i18nKey="Setup_Text">

+                         <strong>Setup</strong> describes the steps to take before you begin working

+                         on the testcase

+                       </Trans>

                      </li>

                      <li>

-                       <strong>How to test</strong> contains the individual steps to take in order

-                       to perform the testcase

+                       <Trans i18nKey="How_to_Test">

+                         <strong>How to test</strong> contains the individual steps to take in order

+                         to perform the testcase

+                       </Trans>

                      </li>

                      <li>

-                       <strong>Expected results</strong> describe what you should check while

-                       testing in order to decide whether it Passed of Failed

+                       <Trans i18nKey="Expected_Results">

+                         <strong>Expected results</strong> describe what you should check while

+                         testing in order to decide whether it Passed of Failed

+                       </Trans>

                      </li>

                    </ul>

                  </ModalBadge>

                </li>

                <li>

-                 Maybe you are stuck, or just do not understand something? Feel free to ask on our

-                 IRC channel #fedora-qa at freenode.net{" "}

-                 <ModalBadge expand_text="Don&#39;t have an IRC client?">

-                   If you are not that familiar with IRC, you can use the{" "}

-                   <a target="_blank" rel="noopener noreferrer" href="http://webchat.freenode.net">

-                     web-interface

-                   </a>{" "}

-                   just enter a Nickname of your choice, #fedora-qa (including the hash sign) in the

-                   Channels field, and click Connect.

+                 {t("Maybe_you_are_stuck")}{" "}

+                 <ModalBadge expand_text={t("dont_have_an")}>

+                 <Trans i18nKey="Have_a_look_at_the_matrix">

+                   Have a look at the matrix. The rows are the testcases, and the columns are the

+                   environments. Most of the time, these are <span dangerouslySetInnerHTML={environment_variables}></span>

+                   for the {{ testtype }} testcases, but you can also encouter a generic{" "}

+                   <code>Result</code> column, which usually means you can use any

+                   media/architecture available.

+                 </Trans>

                  </ModalBadge>

                </li>

              </ul>

            </ModalBadge>

          </li>

  

-         <li>Get your hands dirty, and test the hell out of it!</li>

+         <li>{t("Get_your_hands")}</li>

          <li>

-           <ModalBadge expand_class="success" expand_text="Everything went well" type="btn">

-             Great! Either use <code>relval report-results</code> on command line (make sure to

-             install the <code>relval</code> package first), or modify the{" "}

-             <a target="_blank" rel="noopener noreferrer" href={matrix_url}>

-               matrix

-             </a>{" "}

-             directly by clicking on the <code>Edit</code> link next to the Matrice's header, and

-             put <code>&#123;&#123;result|pass|YOUR_NAME_HERE|&#125;&#125;</code> in the appropriate

-             spot.

+           <ModalBadge

+             expand_class="success"

+             expand_text={t("Everything_went_well")}

+             type="btn">

+             <Trans

+               i18nKey="Great_either_use"

+               >

+               Great! Either use <code>relval report-results</code> on command line (make sure to

+               install the <code>relval</code> package first), or modify the{" "}

+               <a target="_blank" rel="noopener noreferrer" href={matrix_url}>

+                 matrix

+               </a>{" "}

+               directly by clicking on the <code>Edit</code> link next to the Matrice's header, and

+               put <code dangerouslySetInnerHTML={success_variables}></code> in the

+               appropriate spot.

+             </Trans>

            </ModalBadge>

  

-           <ModalBadge expand_class="danger" expand_text="I found a bug!" type="btn">

-             Awesome! Ideally read up on https://fedoraproject.org/wiki/How_to_file_a_bug_report

-             <br />

-             If you don't feel like reading a wall of text, at least pot together a small document

-             containing:

+           <ModalBadge expand_class="danger" expand_text={t("I_found_a_bug")} type="btn">

+             <Trans i18nKey="Awesome_ideally_read">

+               Awesome! Ideally read up on <a target="_blank" rel="noopener noreferrer" href="https://fedoraproject.org/wiki/How_to_file_a_bug_report">How_to_file_a_bug_report</a>

+               <br />

+               If you don't feel like reading a wall of text, at least pot together a small document

+               containing:

+             </Trans>

              <ul>

+               <li>{t("brief_description_of_what")}</li>

                <li>

-                 Brief description of what went wrong (e.g. "QA:Testcase_dualboot_with_windows -

-                 Bootloader does not show the Windows option")

+                 {t("the_name_of")} (e.g. "Fedora-Server-netinst-i386-Rawhide-20181227.n.0.iso")

                </li>

+               <li>{t("note_what_you_did")}</li>

+               <li>{t("try_to_reproduce_the")}</li>

                <li>

-                 The name of the ISO image you used (e.g.

-                 "Fedora-Server-netinst-i386-Rawhide-20181227.n.0.iso")

-               </li>

-               <li>

-                 Note what you did, as precisely as possible, in a step-by-step fashion. Even

-                 details like "Chose Polish as the languae for the installation process" can matter.

-               </li>

-               <li>

-                 Try to reproduce the same state again based on the steps above (you can also

-                 experiment a bit, and try to come up with just the critical steps)

-               </li>

-               <li>

-                 Share your notes on the internet (you can use fpaste), and ask for help with filing

-                 the bug report on our IRC channel #fedora-qa at freenode.net{" "}

-                 <ModalBadge expand_text="Don&#39;t have an IRC client?">

-                   If you are not that familiar with IRC, you can use the web-interface[link] just

-                   enter a Nickname of your choice, #fedora-qa (including the hash sign) in the

-                   Channels field, and click Connect.

-                 </ModalBadge>

+                 <Trans i18nKey="Share_your_notes">

+                   Share your notes on the internet (you can use fpaste), and ask for help with

+                   filing the bug report on our IRC channel #fedora-qa at freenode.net{" "}

+                   </Trans>

+                   <ModalBadge expand_text={t("dont_have_an")}>

+                     <Trans i18nKey="If_you_are_not_familiar">

+                     If you are not that familiar with IRC, you can use the <a target="_blank" rel="noopener noreferrer" noreferrer href="http://webchat.freenode.net">web-interface </a>

+                     just enter a Nickname of your choice, #fedora-qa (including the hash sign) in the Channels field, and click Connect

+                     </Trans>

+                   </ModalBadge>

                </li>

              </ul>

-             Once you get the Bug reported, make sure to also submit the result into the testing

-             matrix. Either use <code>relval report-results</code> on command line (make sure to

-             install the <code>relval</code> package first), or modify the{" "}

-             <a target="_blank" rel="noopener noreferrer" href={matrix_url}>

-               matrix

-             </a>{" "}

-             directly by clicking on the <code>Edit</code> link next to the Matrice's header, and

-             put <code>&#123;&#123;result|fail|YOUR_NAME_HERE|BUG_NUMBER|&#125;&#125;</code> in the

-             appropriate spot.

+             <Trans

+               i18nKey="Once_you_get_the_bug">

+               Once you get the Bug reported, make sure to also submit the result into the testing

+               matrix. Either use <code>relval report-results</code> on command line (make sure to

+               install the <code>relval</code> package first), or modify the{" "}

+               <a target="_blank" rel="noopener noreferrer" href={matrix_url}>

+                 matrix

+               </a>{" "}

+               directly by clicking on the <code>Edit</code> link next to the Matrice's header, and

+               put <code dangerouslySetInnerHTML={fail_variables}></code> in

+               the appropriate spot.

+             </Trans>

            </ModalBadge>

          </li>

        </ol>
@@ -362,7 +413,7 @@ 

    }

  

    const project = props.buttonLabel.split(":")[0]

-   const ticket = props.buttonLabel.split(":")[1] //strip whitespace?

+   const ticket = props.buttonLabel.split(":")[1]

  

    return (

      <div>

file modified
+40 -41
@@ -3,51 +3,50 @@ 

  import queryString from "query-string"

  

  import Tab from "./manualTesting/Tab"

+ import { useTranslation } from "react-i18next"

  

- const data = [

-   {

-     title: "Preperation",

-     description:

-       " Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISOLorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO",

-   },

-   {

-     title: "Installation",

-     description:

-       " Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISOLorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO",

-   },

-   {

-     title: "Testing",

-     description:

-       " Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISOLorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO",

-   },

-   {

-     title: "Reporting",

-     description:

-       " Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISOLorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO Lorem ipsum some clever text where to get ISO",

-   },

- ]

+ const Manual = (props) => {

+   const { t } = useTranslation()

  

- const addDetailsToData = (data) => {

-   return data.map(({ description, title }, index) => {

-     return {

-       title,

-       description,

-       id: `box${index + 1}`,

-       nextBox: data.length === index + 1 ? "final" : `box${index + 2}`,

-     }

-   })

- }

+   const data = [

+     {

+       title: t("Preperation"),

+       description: t("Preperation_text"),

+     },

+     {

+       title: t("Installation"),

+       description: t("Installation_text0"),

+     },

+     {

+       title: t("Testing"),

+       description: t("testing_text"),

+     },

+     {

+       title: t("Reporting"),

+       description: t("reporting_text"),

+     },

+   ]

  

- const createVisibilityObject = (data) => {

-   const detailedData = addDetailsToData(data)

-   const visibility = {}

-   detailedData.forEach((item) => {

-     visibility[item.id] = 0

-   })

-   return visibility

- }

+   const addDetailsToData = (data) => {

+     return data.map(({ description, title }, index) => {

+       return {

+         title,

+         description,

+         id: `box${index + 1}`,

+         nextBox: data.length === index + 1 ? "final" : `box${index + 2}`,

+       }

+     })

+   }

+ 

+   const createVisibilityObject = (data) => {

+     const detailedData = addDetailsToData(data)

+     const visibility = {}

+     detailedData.forEach((item) => {

+       visibility[item.id] = 0

+     })

+     return visibility

+   }

  

- const Manual = (props) => {

    const [check, setCheck] = useState([])

    const tabs = addDetailsToData(data) || []

    const [visibility, setVisibility] = useState(createVisibilityObject(data) || {})

file modified
+3 -1
@@ -7,8 +7,10 @@ 

  import WizardStepper from "./WizardStepper"

  import { useParams } from "react-router"

  import WizardNavigation from "./WizardNavigation"

+ import { useTranslation } from "react-i18next"

  

  const Wizard = (props) => {

+   const { t } = useTranslation()

    const { step } = props

    const query = useParams()

    const selectAction = (state) => state.wizard.api_call_status
@@ -35,7 +37,7 @@ 

              {query.issues || query.provider === "fedora_easy_karma" ? (

                <Col md="12">

                  <h5 className="padded text-center">

-                   None of the above looks interesting to you? We'd be happy if you looked around at{" "}

+                   {t("None_of_the_above_looks_interesting_to_you")}{" "}

                    <a href="https://whatcanidoforfedora.org/">https://whatcanidoforfedora.org/</a>!

                  </h5>

                </Col>

@@ -4,10 +4,11 @@ 

  import { Link } from "react-router-dom"

  import { useSelector, shallowEqual } from "react-redux"

  import * as R from "ramda"

+ import { useTranslation } from "react-i18next"

  

  function WizardNavigation(props) {

    const query = useParams()

- 

+   const { t } = useTranslation()

    const { step } = props

  

    const selectAction = (state) => state.wizard.all_actions
@@ -59,7 +60,7 @@ 

      createBreadcrumbItem(

        "Duration",

        step.slice(-1) > "2" ? "enable" : "disabled",

-       query.duration === "few_hours" ? "Few Hours" : "Several Days"

+       query.duration === "few_hours" ? t("Few_hours") : t("Several_days")

      ),

      createBreadcrumbItem(

        "Provider",
@@ -76,7 +77,7 @@ 

        query.action === "manual_testing"

          ? "Manual Testing"

          : query.action === "beginner_guide"

-         ? "Beginner Guide"

+         ? t("Beginner_Guide")

          : query.action

          ? getTags().filter((a) => a.toLowerCase() === decodeURIComponent(query.action))[0] ||

            query.action.charAt(0).toUpperCase() + query.action.slice(1)

file modified
+1 -1
@@ -59,7 +59,7 @@ 

          <ModalBody>{children}</ModalBody>

          <ModalFooter>

            <Button color="primary" onClick={toggleModal}>

-             Close <i class="fas fa-times-circle"></i>

+             Close <i className="fas fa-times-circle"></i>

            </Button>

          </ModalFooter>

        </Modal>

file modified
+6 -4
@@ -1,8 +1,10 @@ 

  import React, { useState } from "react"

+ import { useTranslation } from "react-i18next"

  import { useHistory } from "react-router-dom"

  import { Card, CardText, Col, Row } from "reactstrap"

  

  const Step1 = (props) => {

+   const { t } = useTranslation()

    const [selectedItem, setItem] = useState()

    const history = useHistory()

    const handleStep = (option) => {
@@ -23,9 +25,9 @@ 

              handleStep("few_hours")

            }}>

            <h1 className="padded">

-             Few Hours <i className="fas fa-calendar-day"></i>

+             {t("Few_hours")} <i className="fas fa-calendar-day"></i>

            </h1>

-           <CardText>Task that can take up to Few Hours </CardText>

+           <CardText>{t("Task_that_can_take_up_to_Few_Hours")} </CardText>

          </Card>

        </Col>

        <Col sm="6">
@@ -40,9 +42,9 @@ 

              handleStep("several_days")

            }}>

            <h1 className="padded">

-             Several Days <i className="fas fa-calendar-week"></i>

+             {t("Several_days")} <i className="fas fa-calendar-week"></i>

            </h1>

-           <CardText>Task that can take up to Several Days </CardText>

+           <CardText>{t("Task_that_can_take_up_to_Several_Days")} </CardText>

          </Card>

        </Col>

      </Row>

file modified
+6 -4
@@ -5,9 +5,11 @@ 

  import FedoraEasyKarma from "../FedoraEasyKarma"

  import * as R from "ramda"

  import { useHistory } from "react-router"

+ import { useTranslation } from "react-i18next"

  

  const Step3 = (props) => {

    const { query } = props

+   const { t } = useTranslation()

  

    const [selectedItem, setItem] = useState()

    const history = useHistory()
@@ -60,8 +62,8 @@ 

                  handleStep("beginner_guide")

                }}>

                <CardBody>

-                 <h1 className="padded">I'm a complete beginner</h1>

-                 <CardText> please guide to me this </CardText>

+                 <h1 className="padded">{t("Im_a_complete_beginner")}</h1>

+                 <CardText> {t("please_guide_to_me_this")} </CardText>

                </CardBody>

              </Card>

            </Col>
@@ -72,8 +74,8 @@ 

                  handleStep("manual_testing")

                }}>

                <CardBody>

-                 <h1 className="padded">I've already done this</h1>

-                 <CardText>Show me the test cases </CardText>

+                 <h1 className="padded">{t("Ive_already_done_this")}</h1>

+                 <CardText>{t("Show_me_the_test_cases")} </CardText>

                </CardBody>

              </Card>

            </Col>

file modified
+46 -34
@@ -4,6 +4,7 @@ 

  import * as R from "ramda"

  import { useHistory } from "react-router-dom"

  import Manual from "../Manual"

+ import { Trans } from "react-i18next"

  

  const Step4 = (props) => {

    const { query } = props
@@ -88,64 +89,75 @@ 

        case "Installation":

          return (

            <div className="text-left">

-             The <strong>Installation</strong> testcases generally deal with a part of the

-             installation procedure.

-             <br />

-             You will certainly need an installation ISO, and either a Virtual or Bare-metal machine

-             to run the test.

-             <br />

-             <i>Note:</i> some (not that many, though) of these testcases require Bare-metal

-             machine. Be sure to read the Description of the testcase carefully.

+             <Trans

+               i18nKey="Installation_text">

+               The <strong>Installation</strong> testcases generally deal with a part of the

+               installation procedure. You will certainly need an installation ISO, and either a

+               Virtual or Bare-metal machine to run the test.

+               <br />

+               <i>Note:</i> some (not that many, though) of these testcases require Bare-metal

+               machine. Be sure to read the Description of the testcase carefully.

+             </Trans>

            </div>

          )

  

        case "Desktop":

          return (

            <div className="text-left">

-             The <strong>Desktop</strong> testcases cover basic functionality of the desktop

-             environment.

-             <br />

-             You can either install Fedora onto clean Virtual or Bare-metal machine, or use a Live

-             image instead.

+             <Trans i18nKey="Desktop_Text">

+               The <strong>Desktop</strong> testcases cover basic functionality of the desktop

+               environment.

+               <br />

+               You can either install Fedora onto clean Virtual or Bare-metal machine, or use a Live

+               image instead.

+             </Trans>

            </div>

          )

  

        case "Base":

          return (

            <div className="text-left">

-             The <strong>Base</strong> testcases cover the system&#x27;s basic functionality just

-             after a clean installation.

-             <br />

-             Most times, you will be asked to perform a clean Fedora installation. You can use

-             either Virtual or Bare-metal machine.

-             <br />

-             <i>Pro tip:</i> using a snapshot of cleanly installed Virtual machine is just fine. No

-             need to reinstall for every testcase.

+             <Trans i18nKey="Base_Text">

+               The <strong>Base</strong> testcases cover the system&#x27;s basic functionality just

+               after a clean installation.

+               <br />

+               Most times, you will be asked to perform a clean Fedora installation. You can use

+               either Virtual or Bare-metal machine.

+               <br />

+               <i>Pro tip:</i> using a snapshot of cleanly installed Virtual machine is just fine.

+               No need to reinstall for every testcase.

+             </Trans>

            </div>

          )

  

        case "Server":

          return (

            <div className="text-left">

-             The <strong>Server</strong> testcases usually require multiple machines to test the

-             server-client behaviour, and might feel a bit advanced.

+             <Trans i18nKey="Server_Text">

+               The <strong>Server</strong> testcases usually require multiple machines to test the

+               server-client behaviour, and might feel a bit advanced.

+             </Trans>

            </div>

          )

  

        case "Cloud":

          return (

            <div className="text-left">

-             Even thought the <strong>Cloud</strong> testcases are best done in the specific

-             environments like EC2 or Openstack, you can also perform them locally using Testcloud.

-             <br />

-             Have a look at the{" "}

-             <a

-               target="_blank"

-               rel="noopener noreferrer"

-               href="https://fedoraproject.org/wiki/Test_Results:Fedora_Current_Cloud#Cloud_Provider_Setup">

-               Cloud provider setup

-             </a>{" "}

-             guides for more details.

+             <Trans

+               i18nKey="Cloud_Text">

+               Even thought the <strong>Cloud</strong> testcases are best done in the specific

+               environments like EC2 or Openstack, you can also perform them locally using

+               Testcloud.

+               <br />

+               Have a look at the{" "}

+               <a

+                 target="_blank"

+                 rel="noopener noreferrer"

+                 href="https://fedoraproject.org/wiki/Test_Results:Fedora_Current_Cloud#Cloud_Provider_Setup">

+                 Cloud provider setup

+               </a>{" "}

+               guides for more details.

+             </Trans>

            </div>

          )

  

file modified
+69 -4
@@ -849,9 +849,9 @@ 

    dependencies:

      regenerator-transform "^0.14.2"

  

- "@babel/plugin-transform-reserved-words@^7.12.13", "@babel/plugin-transform-reserved-words@^7.8.3":

+ "@babel/plugin-transform-reserved-^7.12.13", "@babel/plugin-transform-reserved-^7.8.3":

    version "7.12.13"

-   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.12.13.tgz#7d9988d4f06e0fe697ea1d9803188aa18b472695"

+   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved--/plugin-transform-reserved-7.12.13.tgz#7d9988d4f06e0fe697ea1d9803188aa18b472695"

    integrity sha512-xhUPzDXxZN1QfiOy/I5tyye+TRz6lA7z6xaT4CLOjPRMVg1ldRf0LHw0TDBpYL4vG78556WuHdyO9oi5UmzZBg==

    dependencies:

      "@babel/helper-plugin-utils" "^7.12.13"
@@ -977,7 +977,7 @@ 

      "@babel/plugin-transform-parameters" "^7.8.7"

      "@babel/plugin-transform-property-literals" "^7.8.3"

      "@babel/plugin-transform-regenerator" "^7.8.7"

-     "@babel/plugin-transform-reserved-words" "^7.8.3"

+     "@babel/plugin-transform-reserved- "^7.8.3"

      "@babel/plugin-transform-shorthand-properties" "^7.8.3"

      "@babel/plugin-transform-spread" "^7.8.3"

      "@babel/plugin-transform-sticky-regex" "^7.8.3"
@@ -1055,7 +1055,7 @@ 

      "@babel/plugin-transform-parameters" "^7.14.2"

      "@babel/plugin-transform-property-literals" "^7.12.13"

      "@babel/plugin-transform-regenerator" "^7.13.15"

-     "@babel/plugin-transform-reserved-words" "^7.12.13"

+     "@babel/plugin-transform-reserved- "^7.12.13"

      "@babel/plugin-transform-shorthand-properties" "^7.12.13"

      "@babel/plugin-transform-spread" "^7.13.0"

      "@babel/plugin-transform-sticky-regex" "^7.12.13"
@@ -1136,6 +1136,13 @@ 

    dependencies:

      regenerator-runtime "^0.13.4"

  

+ "@babel/runtime@^7.12.0", "@babel/runtime@^7.14.5", "@babel/runtime@^7.14.6":

+   version "7.14.8"

+   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.8.tgz#7119a56f421018852694290b9f9148097391b446"

+   integrity sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg==

+   dependencies:

+     regenerator-runtime "^0.13.4"

+ 

  "@babel/template@^7.12.13", "@babel/template@^7.4.0", "@babel/template@^7.8.6":

    version "7.12.13"

    resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.13.tgz#530265be8a2589dbb37523844c5bcb55947fb327"
@@ -3273,6 +3280,13 @@ 

      safe-buffer "^5.0.1"

      sha.js "^2.4.8"

  

+ cross-fetch@3.1.4:

+   version "3.1.4"

+   resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.4.tgz#9723f3a3a247bf8b89039f3a380a9244e8fa2f39"

+   integrity sha512-1eAtFWdIubi6T4XPy6ei9iUFoKpUkIF971QLN8lIvvvwueI65+Nw5haMNKUwfJxabqlIIDODJKGrQ66gxC0PbQ==

+   dependencies:

+     node-fetch "2.6.1"

+ 

  cross-spawn@7.0.1:

    version "7.0.1"

    resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.1.tgz#0ab56286e0f7c24e153d04cc2aa027e43a9a5d14"
@@ -5145,6 +5159,13 @@ 

      relateurl "^0.2.7"

      terser "^4.6.3"

  

+ html-parse-stringify@^3.0.1:

+   version "3.0.1"

+   resolved "https://registry.yarnpkg.com/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz#dfc1017347ce9f77c8141a507f233040c59c55d2"

+   integrity sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==

+   dependencies:

+     void-elements "3.1.0"

+ 

  html-webpack-plugin@4.0.0-beta.11:

    version "4.0.0-beta.11"

    resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-4.0.0-beta.11.tgz#3059a69144b5aecef97708196ca32f9e68677715"
@@ -5244,6 +5265,32 @@ 

    resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"

    integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=

  

+ i18n-js@^3.8.0:

+   version "3.8.0"

+   resolved "https://registry.yarnpkg.com/i18n-js/-/i18n-js-3.8.0.tgz#b8fd6b12e1d88cb71f9806c29bca7c31c012e504"

+   integrity sha512-hDsGgPuvw/2P+lXSbOafAwspK8Ste8YrwuuUg17W3wEcO1JkQxBlPgsN1t2+852nTnz4YSYTjZc/1nAA2PC/nw==

+ 

+ i18next-browser-languagedetector@^6.1.2:

+   version "6.1.2"

+   resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-6.1.2.tgz#68565a28b929cbc98ab6a56826ef2faf0e927ff8"

+   integrity sha512-YDzIGHhMRvr7M+c8B3EQUKyiMBhfqox4o1qkFvt4QXuu5V2cxf74+NCr+VEkUuU0y+RwcupA238eeolW1Yn80g==

+   dependencies:

+     "@babel/runtime" "^7.14.6"

+ 

+ i18next-http-backend@^1.3.0:

+   version "1.3.0"

+   resolved "https://registry.yarnpkg.com/i18next-http-backend/-/i18next-http-backend-1.3.0.tgz#fcafb9583cf2942a9c669bd1868ec84a11410536"

+   integrity sha512-49Sf7Dt6GHeFYlCcCTwD39bkaiw7ld8RlGCXw6ZERabN7SXaLM6qRGnd+XbFdPhJHNMHvt/38XiRtJcEgu5Arg==

+   dependencies:

+     cross-fetch "3.1.4"

+ 

+ i18next@^20.3.5:

+   version "20.3.5"

+   resolved "https://registry.yarnpkg.com/i18next/-/i18next-20.3.5.tgz#14308b79a3f1cafb24fdcd8e182d3673baf1e979"

+   integrity sha512-//MGeU6n4TencJmCgG+TCrpdgAD/NDEU/KfKQekYbJX6QV7sD/NjWQdVdBi+bkT0snegnSoB7QhjSeatrk3a0w==

+   dependencies:

+     "@babel/runtime" "^7.12.0"

+ 

  iconv-lite@0.4.24, iconv-lite@^0.4.24:

    version "0.4.24"

    resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -7075,6 +7122,11 @@ 

      lower-case "^2.0.2"

      tslib "^2.0.3"

  

+ node-fetch@2.6.1:

+   version "2.6.1"

+   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"

+   integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==

+ 

  node-forge@^0.10.0:

    version "0.10.0"

    resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.10.0.tgz#32dea2afb3e9926f02ee5ce8794902691a676bf3"
@@ -8725,6 +8777,14 @@ 

    resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"

    integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==

  

+ react-i18next@^11.11.4:

+   version "11.11.4"

+   resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.11.4.tgz#f6f9a1c827e7a5271377de2bf14db04cb1c9e5ce"

+   integrity sha512-ayWFlu8Sc7GAxW1PzMaPtzq+yiozWMxs0P1WeITNVzXAVRhC0Httkzw/IiODBta6seJRBCLrtUeFUSXhAIxlRg==

+   dependencies:

+     "@babel/runtime" "^7.14.5"

+     html-parse-stringify "^3.0.1"

+ 

  react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:

    version "16.13.1"

    resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -10634,6 +10694,11 @@ 

    resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"

    integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==

  

+ void-elements@3.1.0:

+   version "3.1.0"

+   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"

+   integrity sha1-YU9/v42AHwu18GYfWy9XhXUOTwk=

+ 

  w3c-hr-time@^1.0.1:

    version "1.0.2"

    resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"

@lbrabec, the project is now translatable please have a look!

This seems to be a small leftover from development, please remove it.

Please use i18n for this as well.

Same for all expand_text props.

Please investigate if i18n supports JSX so we can put formatted text there.

Sure thing I'll implement all the changes, did a bit of research and found that i18n doesn't support JSX.

Is there a library in npm that would add support?

Does this needs to be split into three separate phrases?

Does this needs to be split into three separate phrases?

No, I'll change it.

Does this needs to be split into three separate phrases?

No, I'll change it.

Thanks, please also make sure that other similar "splits" (if any) are fixed.

Does this needs to be split into three separate phrases?

No, I'll change it.

Thanks, please also make sure that other similar "splits" (if any) are fixed.

Yes will make sure

Is there a library in npm that would add support?

I looked around and didn't find any library which supports JSX.

I just realized that we can put JSX into the Manual.js itself and use i18n for the strings only, formatting will be probably the same for every language. So no problem here I guess...

1 new commit added

  • fixed splits phrases and formatted strings
2 years ago

I just realized that we can put JSX into the Manual.js itself and use i18n for the strings only, formatting will be probably the same for every language. So no problem here I guess...

Yes I guess so too,
I have implemented all the changes please have a look.

Could you please move the "language" button closer to "settings" button.

Also I think it would be nicer to change the label from "Select language" to currently selected language, for English it will be "en" (see ISO 639-1).

Any comments @jskladan?

OKay great, I'll implement the changes

1 new commit added

  • selected language is added to the label
2 years ago

The label is now showing the selected language, @lbrabec please have a look!

@manishakanyal After looking at the PR for quite some time, I must say I'm not the biggest fan of how the code is prepared for the translations.

Even putting aside the fact, that preparing phrases for translations before all the texts are finished is pretty premature, I don't like the way the phrases are split up quite a lot. Take, for example, this:

-                       Have a look at the matrix. The rows are the testcases, and the columns are
-                       the environments. Most of the time, these are {environment_examples} for the{" "}
-                       {testtype} testcases, but you can also encouter a generic <code>Result</code>{" "}
-                       column, which usually means you can use any media/architecture available.


+                       {i18n.t("phrases.Have_a_look")} {environment_examples}{" "}
+                       {i18n.t("words.for_the")} {testtype}{" "}
+                       {i18n.t("phrases.testcases_but_you_can")}{" "}
+                       <code>{i18n.t("words.Result")}</code>{" "}
+                       {i18n.t("phrases.Column_which_usually")}

as an example. Changing this in the future will be an absolute PITA, and the way the text is split up does not really make much (if any) sense for languages with different sentence structure than english.

Sadly, preparing code to be translated can rarely be done by an automated tool - which I'm almost certain u used, based bits like these throughout the code:

-             Make sure your system is up-to-date: <code>sudo dnf update --refresh</code>

+             {i18n.t("phrases.make_sure_your")}
+             <code>{i18n.t("phrases.sudo_dnf_update_refresh")}</code>

I guess most of this can be attributed to the automated tool and the fact that we need to deal with JSX, as you have briefly touched on here:

Is there a library in npm that would add support [for JSX]?

I looked around and didn't find any library which supports JSX.

I understand that google searches are quite personalized, but nevertheless, this: https://react.i18next.com/ is what I had as a second link on the first page of a Goole search for "jsx i18n" [https://www.google.com/search?q=jsx+i18n]. It seems to be solving all the issues here - e.g. https://react.i18next.com/guides/the-drawbacks-of-other-i18n-solutions#can-you-translate-combined-jsx-nodes-in-one-sentence

Shold we go forward with preparing the code for translations now, I'd much prefer you used this. The resulting code is much more readable, and the translations of (what will be) a very tag-heavy strings will make much more sense at least on a sentece-level (if not a paragraph-level) availble with the i18next library.

@lbrabec tagged for notice ^^

1 new commit added

  • removed splits
2 years ago

@jskladan, @lbrabec, I have removed splits, please have a look.

I don't think that tag attributes (target=, rel=, href= etc..) belong in translation. Also the tag <1> is closed with </a> instead of </1>

<code></code> should be replaced with "number tag" as others.

I believe that we shouldn't translate words such as "beta" and "final", they are technical terms.

Reducers should be pure functions, settings an item in local storage is a side effect thus making the reducer impure. Please move it to action creator.

Also, I don't see any i18-next initialization (such as this https://react.i18next.com/getting-started#basic-sample)

It seems like you're not using i18next at all, and still using i18n-js

1 new commit added

  • implemented react-i18next
2 years ago

@jskladan, @lbrabec I have implemented the changes please have a look

1 new commit added

  • moved translation to public folder
2 years ago

@jskladan, @lbrabec I have implemented the changes please have a look

This string seems to be wrong. If you change the key to something non existent, there will be debug output in console with correct string, which is:
We already mentioned Bodhi, several times. Instead of using the <2>fedora-easy-karma</2> interface for submitting Karma and/or learning about the Update, you can visit Bodhi directly.<br/><5>fedora-easy-karma</5> shows the URL of the relevant update near the bottom of the text output - look for URL like <8>https://bodhi.fedoraproject.org/updates/FEDORA-2019-00870e8bfc</8>.<br/>You can have a look at other people's comments, the afore-mentioned Bugs or Test Cases, and even submit the Karma directly. Just use your FAS credentials to log-in.

Please go through all the strings and make sure they are correct, incorrect string can cause missing words.

I also noticed these warnings in console:

i18next::translator: missingKey undefined translation None_of_the_above_looks_interesting_to_you None_of_the_above_looks_interesting_to_you
i18next.js:22 i18next::translator: missingKey undefined translation source source
i18next.js:22 i18next::translator: missingKey undefined translation .on_Pagure .on_Pagure
i18next.js:22 i18next::translator: missingKey undefined translation version version
i18next::translator: missingKey en translation .on_Pagure .on_Pagure

This also doesn't look right:

i18next.js:22 i18next::translator: key "None_of_the_above_looks_interesting_to_you" for languages "en" won't get resolved as namespace "translation" was not yet loaded This means something IS WRONG in your setup. You access the t function before i18next.init / i18next.loadNamespace / i18next.changeLanguage was done. Wait for the callback or Promise to resolve before accessing it!!!

1 new commit added

  • removed warnings
2 years ago

@jskladan, @lbrabec I have implemented the changes and removed warnings please have a look

Thanks for removing the warnings. However We_already_mentioned_bodhi still renders wrong, because <code>fedora-easy-karma</code> has wrong "number tag" in translation string.

1 new commit added

  • changed number tag of We_already_mentioned_bodhi
2 years ago

@lbrabec, I have corrected the number tag, please have a look.

In FedoraManualTesting.js there is double "or" in:

case "Base":
      environment_examples = (
        <span>
          <code>Workstation</code>, <code>Server</code>, <code>{t("or")}</code> or{" "}
          <code>Minimal</code>
        </span>
      )
      break

Please remove the one in <code> a use translation for the plain text one.

Curly braces are not rendered properly, the tooltip shows &#123;&#123;result|pass|YOUR_NAME_HERE|&#125;&#125;, same for key Once_you_get_the_bug

After a quick look at the changes, I can only point out that the translation.json file is polluted with dead strings never used anywhere in the code. Please make sure the file only contains what is necessary, so I can have a proper look at how it's structured now.

Thanks.

1 new commit added

  • removed dead strings
2 years ago

@jskladan, @lbrabec I have implemented the changes and removed dead strings please have a look

@manishakanyal I'm not sure if I was not clear enough, but looking at the code, there is still a lot of strings in the translation.json file, that are not used at all.

Picking just randomly (know that these are absolutely not all of them):
* https://pagure.io/fedora-qa/landingpage/pull-request/84#_4__3 (yes, it is the first line of the translation.json file)
* https://pagure.io/fedora-qa/landingpage/pull-request/84#_4__21
* https://pagure.io/fedora-qa/landingpage/pull-request/84#_4__52
* https://pagure.io/fedora-qa/landingpage/pull-request/84#_4__71

... and the list goes on.

Please, make sure all the unused strings in the translation.json file are not present. I understand that this might seem tedious, but right now, the file is next to unuseable, and the quality of the prep-work for the translation can not really be judged seriously without me spending insurmountable amount of time on it.

Let this be a lesson for when you next use an automated tool to do something instead of you - automated tools have their uses, but the base on which the tools work must be precise, and the results of the tools must be scrutinized, not just blindly used.

1 new commit added

  • removed unused strings
2 years ago

@jskladan I don't know how I missed those. Probably because the file is huge.
Thanks for pointing it out. I've removed the unused strings and pushed the code again.

Also, I want to mention the fact that I didn't use any script to generate the strings but did on my own.

The left unused strings that you are misunderstanding as script generated are because I had implemented translation using i18n and not react-i18n. There were strings for every split which we later removed by using Trans of react-i18n.
The split's strings were left by mistake.

Also, I want to mention the fact that I didn't use any script to generate the strings but did on my own.

OK, good to know. Since you created the translations manually, could you explain the benefits of having the expand_class attribute translatable here: https://pagure.io/fedora-qa/landingpage/pull-request/84#_21__428 or here: https://pagure.io/fedora-qa/landingpage/pull-request/84#_21__450 ?

These are, of course, just a couple examples I randomly found just scrolling through the code. It looked like an autogeneration-caused error, but I guess I'm missing something important here, since this was (by your own words) a concious choice on your part.

OK, good to know. Since you created the translations manually, could you explain the benefits of having the expand_class attribute translatable here: https://pagure.io/fedora-qa/landingpage/pull-request/84#_21__428 or here: https://pagure.io/fedora-qa/landingpage/pull-request/84#_21__450 ?

These are, of course, just a couple of examples I randomly found just scrolling through the code. It looked like an autogeneration-caused error, but I guess I'm missing something important here since this was (by your own words) a conscious choice on your part.

@jskladan, that's totally my fault I'm sorry, as @lbrabec told me to use react-18n for the texts inside expand_text I didn't notice whenexpand_text and expand_class seem the same to me.

I'll do the changes.

1 new commit added

  • removed unused strings
2 years ago