Merge pull request #196 from hemslo/fix-warnings

Fix react warnings on render

Author: hemslo

src/components/NamePathList.js

@@ -14,8 +14,8 @@ function DisplayNamePathList({ items }) {
   return (
     <ul>
       {items &&
-        items.map(item => (
-          <li>
+        items.map((item, i) => (
+          <li key={i}>
             <LinkPath item={item} />
           </li>
         ))}

src/components/SearchBar.js

@@ -17,20 +17,13 @@ function SearchBar({ filterText, handleFilterTextChange, handleSelect, options,
     onToggle();
   }
 
-  function toggleTemplate({ toggleTemplateProps }) {
-    const { text } = toggleTemplateProps;
-    return <React.Fragment>{text}</React.Fragment>;
-  }
-
   if (options !== undefined) {
     const menuItems = options.map(i => (
       <OptionsMenuItem onSelect={onSelect} isSelected={selected === i} id={i} key={i} className="optionsMenuItem">
         {i}
       </OptionsMenuItem>
     ));
-    const menuToggle = (
-      <OptionsMenuToggle onToggle={onToggle} toggleTemplate={toggleTemplate} toggleTemplateProps={{ text: selected }} />
-    );
+    const menuToggle = <OptionsMenuToggle onToggle={onToggle} toggleTemplate={<>{selected}</>} />;
     optionsMenu = (
       <OptionsMenu
         id="options-menu"

src/pages/elements/Namespaces.js

@@ -10,7 +10,7 @@ function Namespaces({ namespaces, users }) {
   const [selected, changeSelected] = useState(options[0]);
   const [filterText, changeFilterText] = useState('');
   if (namespaces.length === 0) {
-    return <p style={{ 'font-style': 'italic' }}>No namespaces.</p>;
+    return <p style={{ fontStyle: 'italic' }}>No namespaces.</p>;
   }
   const headerFormat = value => <Table.Heading>{value}</Table.Heading>;
   const cellFormat = value => <Table.Cell>{value}</Table.Cell>;

src/pages/elements/Report.js

@@ -54,7 +54,7 @@ const Vulnerabilities = ({ vs }) => (
 const ReportVulnerabilities = ({ get_ns, vulnerabilities }) => {
   let reportVulnerabilitiesTable;
   if (vulnerabilities == null) {
-    reportVulnerabilitiesTable = <p style={{ 'font-style': 'italic' }}>No vulnerabilities.</p>;
+    reportVulnerabilitiesTable = <p style={{ fontStyle: 'italic' }}>No vulnerabilities.</p>;
   } else {
     for (let i = 0; i < vulnerabilities.length; i++) {
       vulnerabilities[i].ns = get_ns(vulnerabilities[i].cluster, vulnerabilities[i].namespace);
@@ -423,7 +423,7 @@ const MergeActivities = ({ merge_activities }) => {
 const PostDeployJobs = ({ get_ns, post_deploy_jobs }) => {
   let postDeployJobsTable;
   if (post_deploy_jobs == null) {
-    postDeployJobsTable = <p style={{ 'font-style': 'italic' }}>No post_deploy_jobs.</p>;
+    postDeployJobsTable = <p style={{ fontStyle: 'italic' }}>No post_deploy_jobs.</p>;
   } else {
     for (let i = 0; i < post_deploy_jobs.length; i++) {
       post_deploy_jobs[i].ns = get_ns(post_deploy_jobs[i].cluster, post_deploy_jobs[i].namespace);
@@ -514,7 +514,7 @@ const PostDeployJobs = ({ get_ns, post_deploy_jobs }) => {
 const DeploymentValidations = ({ get_ns, deployment_validations }) => {
   let deploymentValidationTable;
   if (deployment_validations == null) {
-    deploymentValidationTable = <p style={{ 'font-style': 'italic' }}>No deployment_validations.</p>;
+    deploymentValidationTable = <p style={{ fontStyle: 'italic' }}>No deployment_validations.</p>;
   } else {
     for (let i = 0; i < deployment_validations.length; i++) {
       deployment_validations[i].ns = get_ns(deployment_validations[i].cluster, deployment_validations[i].namespace);
@@ -702,7 +702,7 @@ const ServiceSLO = ({ get_ns, service_slo, slo_documents_for_report }) => {
     throw new Error(`No SLO documents found relating to SLOs`);
   }
   if (service_slo == null) {
-    ServiceSLOTable = <p style={{ 'font-style': 'italic' }}>No service_slo.</p>;
+    ServiceSLOTable = <p style={{ fontStyle: 'italic' }}>No service_slo.</p>;
   } else {
     for (let i = 0; i < service_slo.length; i++) {
       const slo_doc = get_doc_for_slo(slo_documents_for_report, service_slo[i]);
@@ -818,7 +818,7 @@ function Report({ report, namespaces, saas_files, slo_documents }) {
     promotionSection = (
       <React.Fragment>
         <h4>Promotions</h4>
-        <p style={{ 'font-style': 'italic' }}>No promotions.</p>
+        <p style={{ fontStyle: 'italic' }}>No promotions.</p>
       </React.Fragment>
     );
   }
@@ -834,7 +834,7 @@ function Report({ report, namespaces, saas_files, slo_documents }) {
     mergeSection = (
       <React.Fragment>
         <h4>Merge Activties</h4>
-        <p style={{ 'font-style': 'italic' }}>No merge_activities.</p>
+        <p style={{ fontStyle: 'italic' }}>No merge_activities.</p>
       </React.Fragment>
     );
   }

src/pages/elements/Service.js

@@ -26,7 +26,7 @@ const booleanFormat = (t, f) => value => (value ? t : f);
 const EscalationPolicy = ({ app }) => {
   let escalationPolicyDefinition;
   if (app.escalationPolicy == null) {
-    escalationPolicyDefinition = <p style={{ 'font-style': 'italic' }}>No Escalation Policy.</p>;
+    escalationPolicyDefinition = <p style={{ fontStyle: 'italic' }}>No Escalation Policy.</p>;
   } else {
     escalationPolicyDefinition = (
       <NonEmptyDefinition
@@ -193,7 +193,7 @@ function Service({ service, reports, saas_files_v2, scorecards }) {
 
   let quayReposTable;
   if (service.quayRepos == null) {
-    quayReposTable = <p style={{ 'font-style': 'italic' }}>No quay repos.</p>;
+    quayReposTable = <p style={{ fontStyle: 'italic' }}>No quay repos.</p>;
   } else {
     const quayRepos = service.quayRepos
       .map(orgGroup =>
@@ -274,7 +274,7 @@ function Service({ service, reports, saas_files_v2, scorecards }) {
   }
   let dependenciesTable;
   if (service.dependencies == null) {
-    dependenciesTable = <p style={{ 'font-style': 'italic' }}>No dependencies.</p>;
+    dependenciesTable = <p style={{ fontStyle: 'italic' }}>No dependencies.</p>;
   } else {
     dependenciesTable = (
       <Table.PfProvider
@@ -357,7 +357,7 @@ function Service({ service, reports, saas_files_v2, scorecards }) {
       </div>
     );
   } else {
-    reportSection = <p style={{ 'font-style': 'italic' }}>No Latest Report.</p>;
+    reportSection = <p style={{ fontStyle: 'italic' }}>No Latest Report.</p>;
   }
 
   // scorecards