Merge pull request openshift#1159 from kyoto/react-closing-tags

frontend: Prevent closing tags for components with no children
christianaranda · Nov 22, 2016 · ca20f35 · ca20f35
2 parents 471b7aa + 3fb87e4
commit ca20f35
Show file tree

Hide file tree

Showing 17 changed files with 38 additions and 37 deletions.
diff --git a/frontend/.eslintrc b/frontend/.eslintrc
@@ -31,7 +31,8 @@
  "wrap-iife": [2, "inside"],
  "import/no-unresolved": ["error", {"ignore": ["./dist/templates"] }],
  "react/jsx-uses-react": "error",
- "react/jsx-uses-vars": "error"
+ "react/jsx-uses-vars": "error",
+ "react/self-closing-comp": ["error", {"component": true, "html": false}]
  },
  "parserOptions": {
  "sourceType": "module",

diff --git a/frontend/public/components/RBAC/edit-rule.jsx b/frontend/public/components/RBAC/edit-rule.jsx
@@ -388,7 +388,7 @@ class EditRule_ extends PromiseComponent {
  </p>
 
  <HelpText>
- <input type="text" value={APIGroups} className="form-control text-input" onChange={e => this.setApiGroups(e.target.value)}  />
+ <input type="text" value={APIGroups} className="form-control text-input" onChange={e => this.setApiGroups(e.target.value)} />
  <br/>
  Comma separated list of the api groups for the selected resources.
  </HelpText>

diff --git a/frontend/public/components/RBAC/rules.jsx b/frontend/public/components/RBAC/rules.jsx
@@ -124,7 +124,7 @@ const RuleCog = ({name, namespace, i}) => {
  EditRule,
  DeleteRule,
  ].map(f => f(name, namespace, i));
- return <Cog options={options} size="small" anchor="left"></Cog>;
+ return <Cog options={options} size="small" anchor="left" />;
 };
 
 const Rule = ({resources, nonResourceURLs, verbs, apiGroups, name, namespace, i}) => <div className="rbac-rule">

diff --git a/frontend/public/components/configmap.jsx b/frontend/public/components/configmap.jsx
@@ -8,7 +8,7 @@ import {Cog, LabelList, ResourceIcon, Timestamp} from './utils';
 const ConfigMapCog = ({configMap}) => {
  const kind = angulars.kinds.CONFIGMAP;
  const {factory: {ModifyLabels, Delete}} = Cog;
- return <Cog options={[ModifyLabels, Delete].map(f => f(kind, configMap))} size="small" anchor="left"></Cog>;
+ return <Cog options={[ModifyLabels, Delete].map(f => f(kind, configMap))} size="small" anchor="left" />;
 };
 
 const ConfigMapHeader = () => <div className="row co-m-table-grid__head">
@@ -23,8 +23,8 @@ const ConfigMapRow = ({obj: configMap}) => {
 
  return <div className="row co-resource-list__item">
  <div className="col-md-4">
- <ConfigMapCog configMap={configMap}></ConfigMapCog>
- <ResourceIcon kind="configmap"></ResourceIcon>
+ <ConfigMapCog configMap={configMap} />
+ <ResourceIcon kind="configmap" />
  <a href={`ns/${configMap.metadata.namespace}/configmaps/${configMap.metadata.name}/details`} title={configMap.metadata.uid}>{configMap.metadata.name}</a>
  </div>
  <div className="col-md-4">{data}</div>

diff --git a/frontend/public/components/daemonset.jsx b/frontend/public/components/daemonset.jsx
@@ -7,7 +7,7 @@ import {Cog, LabelList, ResourceIcon, Selector, Timestamp, detailsPage} from './
 const DaemonSetCog = ({daemonset}) => {
  const kind = angulars.kinds.DAEMONSET;
  const {factory: {ModifyLabels, Delete}} = Cog;
- return <Cog options={[ModifyLabels, Delete].map(f => f(kind, daemonset))} size="small" anchor="left"></Cog>;
+ return <Cog options={[ModifyLabels, Delete].map(f => f(kind, daemonset))} size="small" anchor="left" />;
 };
 
 const DaemonSetHeader = () => <div className="row co-m-table-grid__head">
@@ -19,22 +19,22 @@ const DaemonSetHeader = () => <div className="row co-m-table-grid__head">
 
 const DaemonSetRow = ({obj: daemonset}) => <div className="row co-resource-list__item">
  <div className="col-lg-3 col-md-3 col-sm-3 col-xs-12">
- <DaemonSetCog daemonset={daemonset}></DaemonSetCog>
- <ResourceIcon kind="daemonset"></ResourceIcon>
+ <DaemonSetCog daemonset={daemonset} />
+ <ResourceIcon kind="daemonset" />
  <a href={`ns/${daemonset.metadata.namespace}/daemonsets/${daemonset.metadata.name}/details`} title={daemonset.metadata.uid}>
  {daemonset.metadata.name}
  </a>
  </div>
  <div className="col-lg-3 col-md-3 col-sm-5 col-xs-6">
- <LabelList kind="daemonset" labels={daemonset.metadata.labels}  />
+ <LabelList kind="daemonset" labels={daemonset.metadata.labels} />
  </div>
  <div className="col-lg-3 col-md-3 col-sm-4 hidden-xs">
  <a href={`ns/${daemonset.metadata.namespace}/daemonsets/${daemonset.metadata.name}/pods`} title="pods">
  {daemonset.status.currentNumberScheduled} of {daemonset.status.desiredNumberScheduled} pods
  </a>
  </div>
  <div className="col-lg-3 col-md-3 hidden-sm hidden-xs">
- <Selector selector={daemonset.spec.selector.matchLabels}></Selector>
+ <Selector selector={daemonset.spec.selector.matchLabels} />
  </div>
 </div>;
 

diff --git a/frontend/public/components/events.jsx b/frontend/public/components/events.jsx
@@ -55,7 +55,7 @@ class SysEvent extends React.Component {
  <div className="co-sysevent__main-message">{this.props.message}</div>
  </div>
  <div className="co-sysevent__meta-box">
- <div><Timestamp timestamp={this.props.lastTimestamp}/></div>
+ <div><Timestamp timestamp={this.props.lastTimestamp} /></div>
  <small className="co-sysevent__meta-source">
  Generated from <span>{this.props.source.component}</span>
  {this.props.source.component === 'kubelet' &&

diff --git a/frontend/public/components/horizontal-pod-autoscaler.jsx b/frontend/public/components/horizontal-pod-autoscaler.jsx
@@ -33,7 +33,7 @@ const HorizontalPodAutoscalerCog = ({hpa}) => {
  const kind = angulars.kinds.HORIZONTALPODAUTOSCALER;
  const {factory: {Delete, ModifyLabels}} = Cog;
  const options = [ModifyHpaTargets, ModifyHpaReplicas, ModifyLabels, Delete].map(f => f(kind, hpa));
- return <Cog options={options} size="small" anchor="center"></Cog>;
+ return <Cog options={options} size="small" anchor="center" />;
 };
 
 const ScaleRef = ({hpa}) => <div>
@@ -52,13 +52,13 @@ const HorizontalPodAutoscalerRow = ({obj: hpa}) => <div className="row co-resour
  </a>
  </div>
  <div className="col-lg-3 col-md-3 col-sm-3 col-xs-6">
- <LabelList kind="horizontalpodautoscaler" labels={hpa.metadata.labels}  />
+ <LabelList kind="horizontalpodautoscaler" labels={hpa.metadata.labels} />
  </div>
  <div className="col-lg-3 col-md-3 col-sm-3 hidden-xs">
  {hpa.status.currentReplicas || 0} of {hpa.status.desiredReplicas}
  </div>
  <div className="col-lg-3 col-md-3 col-sm-3 hidden-xs">
- <ScaleRef hpa={hpa}/>
+ <ScaleRef hpa={hpa} />
  </div>
 </div>;
 

diff --git a/frontend/public/components/job.jsx b/frontend/public/components/job.jsx
@@ -16,7 +16,7 @@ const JobCog = ({job}) => {
  const kind = angulars.kinds.JOB;
  const {factory: {Delete, ModifyLabels, ModifyJobParallelism, ModifyPodSelector}} = Cog;
  const options = [ModifyJobParallelism, ModifyPodSelector, ModifyLabels, Delete].map(f => f(kind, job));
- return <Cog options={options} size="small" anchor="left"></Cog>;
+ return <Cog options={options} size="small" anchor="left" />;
 };
 
 const getJobTypeAndCompletions = (o) => {
@@ -42,13 +42,13 @@ const JobRow = ({obj: job}) => {
  <div className="row co-resource-list__item">
  <div className="col-lg-2 col-md-2 col-sm-3 col-xs-6">
  <JobCog job={job} />
- <ResourceIcon kind={angulars.kinds.JOB.id}></ResourceIcon>
+ <ResourceIcon kind={angulars.kinds.JOB.id} />
  <a href={`ns/${job.metadata.namespace}/jobs/${job.metadata.name}/details`} title={job.metadata.uid}>
  {job.metadata.name}
  </a>
  </div>
  <div className="col-lg-3 col-md-3 col-sm-3 col-xs-6">
- <LabelList kind={angulars.kinds.JOB.id} labels={job.metadata.labels}  />
+ <LabelList kind={angulars.kinds.JOB.id} labels={job.metadata.labels} />
  </div>
  <div className="col-lg-2 col-md-2 col-sm-3 hidden-xs">
  <a href={`ns/${job.metadata.namespace}/jobs/${job.metadata.name}/pods`} title="pods">
@@ -59,7 +59,7 @@ const JobRow = ({obj: job}) => {
  {type}
  </div>
  <div className="col-lg-3 col-md-3 hidden-sm hidden-xs">
- <Selector selector={job.spec.selector}></Selector>
+ <Selector selector={job.spec.selector} />
  </div>
  </div>
  );

diff --git a/frontend/public/components/modals/configure-yaml-field-modal.jsx b/frontend/public/components/modals/configure-yaml-field-modal.jsx
@@ -108,7 +108,7 @@ class ConfigureYamlFieldModal extends PromiseComponent {
  <ModalTitle>{this.props.modalTitle}</ModalTitle>
  <ModalBody>
  <p>{this.props.modalText}</p>
- { this.state.resourceLoading && <p><LoadingInline></LoadingInline></p> }
+ { this.state.resourceLoading && <p><LoadingInline /></p> }
  { (this.props.inputType === 'textarea' || this.props.inputType !== 'input') && <textarea value={this.state.value} onChange={this._handleChange} className="form-control" rows="18" disabled={this.state.resourceLoading} /> }
  { this.props.inputType === 'input' && <input value={this.state.value} onChange={this._handleChange} className="form-control" disabled={this.state.resourceLoading} /> }
  </ModalBody>

diff --git a/frontend/public/components/namespace.jsx b/frontend/public/components/namespace.jsx
@@ -24,7 +24,7 @@ const FullRow = ({obj: namespace}) => <div className="row co-resource-list__item
  </a>
  </div>
  <div className="col-xs-4">
- <LabelList kind={angulars.kinds.NAMESPACE.id} labels={namespace.metadata.labels}  />
+ <LabelList kind={angulars.kinds.NAMESPACE.id} labels={namespace.metadata.labels} />
  </div>
  <div className="col-xs-4">
  {namespace.status.phase}

diff --git a/frontend/public/components/node.jsx b/frontend/public/components/node.jsx
@@ -28,7 +28,7 @@ const HeaderSearch = () => <div className="row co-m-table-grid__head">
 
 const NodeCog = ({node}) => {
  const options = [Cog.factory.ModifyLabels].map(f => f(angulars.kinds.NODE, node));
- return <Cog options={options} size="small" anchor="left"></Cog>;
+ return <Cog options={options} size="small" anchor="left" />;
 };
 
 const NodeLink = ({node}) => <a href={`nodes/${node.metadata.name}`} title={node.metadata.uid}>{node.metadata.name}</a>;

diff --git a/frontend/public/components/pod.jsx b/frontend/public/components/pod.jsx
@@ -68,7 +68,7 @@ const PodRow = ({obj: pod}) => {
  <a href={`ns/${pod.metadata.namespace}/pods/${pod.metadata.name}/details`} title={pod.metadata.uid}>{pod.metadata.name}</a>
  </div>
  <div className="col-lg-3 col-md-3 col-sm-4 col-xs-6">
- <LabelList kind="pod" labels={pod.metadata.labels}  />
+ <LabelList kind="pod" labels={pod.metadata.labels} />
  </div>
 
  <div className="col-lg-2 col-md-2 col-sm-2 hidden-xs">{status}</div>
@@ -167,13 +167,13 @@ const Details = (pod) => {
  <div className="co-sparkline-wrapper">
  <div className="row no-gutter">
  <div className="col-md-4">
- <SparklineWidget heading="RAM" query={`pod_name:container_memory_usage_bytes:sum{pod_name='${pod.metadata.name}'}`} limit={limits.memory} units="binaryBytes"></SparklineWidget>
+ <SparklineWidget heading="RAM" query={`pod_name:container_memory_usage_bytes:sum{pod_name='${pod.metadata.name}'}`} limit={limits.memory} units="binaryBytes" />
  </div>
  <div className="col-md-4">
- <SparklineWidget heading="CPU Shares" query={`pod_name:container_spec_cpu_shares:sum{pod_name='${pod.metadata.name}'} * 1000000`} limit={limits.cpu} units="numeric"></SparklineWidget>
+ <SparklineWidget heading="CPU Shares" query={`pod_name:container_spec_cpu_shares:sum{pod_name='${pod.metadata.name}'} * 1000000`} limit={limits.cpu} units="numeric" />
  </div>
  <div className="col-md-4">
- <SparklineWidget heading="Filesystem" query={`pod_name:container_fs_usage_bytes:sum{pod_name='${pod.metadata.name}'}`} units="decimalBytes"></SparklineWidget>
+ <SparklineWidget heading="Filesystem" query={`pod_name:container_fs_usage_bytes:sum{pod_name='${pod.metadata.name}'}`} units="decimalBytes" />
  </div>
  </div>
  </div>

diff --git a/frontend/public/components/secret.jsx b/frontend/public/components/secret.jsx
@@ -10,7 +10,7 @@ import classnames from 'classnames';
 const SecretCog = ({secret}) => {
  const kind = angulars.kinds.SECRET;
  const {factory: {ModifyLabels, Delete}} = Cog;
- return <Cog options={[ModifyLabels, Delete].map(f => f(kind, secret))} size="small" anchor="left"></Cog>;
+ return <Cog options={[ModifyLabels, Delete].map(f => f(kind, secret))} size="small" anchor="left" />;
 };
 
 const SecretHeader = () => <div className="row co-m-table-grid__head">
@@ -25,8 +25,8 @@ const SecretRow = ({obj: secret}) => {
 
  return <div className="row co-resource-list__item">
  <div className="col-md-4">
- <SecretCog secret={secret}></SecretCog>
- <ResourceIcon kind="secret"></ResourceIcon>
+ <SecretCog secret={secret} />
+ <ResourceIcon kind="secret" />
  <a href={`ns/${secret.metadata.namespace}/secrets/${secret.metadata.name}/details`} title={secret.metadata.uid}>{secret.metadata.name}</a>
  </div>
  <div className="col-md-4">{data}</div>
@@ -82,7 +82,7 @@ const withSecretsList = (Row) => {
  <Row {...this.props} />
  {
  this.state.open && secrets &&
- <SecretsList namespace={namespace} filters={filters}></SecretsList>
+ <SecretsList namespace={namespace} filters={filters} />
  }
  </div>
  );

diff --git a/frontend/public/components/service-account.jsx b/frontend/public/components/service-account.jsx
@@ -15,7 +15,7 @@ const ServiceAccountCog = ({serviceaccount}) => {
  const kind = angulars.kinds.SERVICEACCOUNT;
  const {factory: {Delete}} = Cog;
  const options = [Delete].map(f => f(kind, serviceaccount));
- return <Cog options={options} size="small" anchor="left"></Cog>;
+ return <Cog options={options} size="small" anchor="left" />;
 };
 
 const ServiceAccountRow = ({obj: serviceaccount}) => {
@@ -25,7 +25,7 @@ const ServiceAccountRow = ({obj: serviceaccount}) => {
  <div className="row co-resource-list__item">
  <div className="col-xs-4">
  <ServiceAccountCog serviceaccount={serviceaccount} />
- <ResourceIcon kind={angulars.kinds.SERVICEACCOUNT.id}></ResourceIcon>
+ <ResourceIcon kind={angulars.kinds.SERVICEACCOUNT.id} />
  <a href={`ns/${namespace}/${angulars.kinds.SERVICEACCOUNT.plural}/${name}/details`} title={uid}>
  {serviceaccount.metadata.name}
  </a>
@@ -64,7 +64,7 @@ const Details = (serviceaccount) => {
  <h1 className="co-section-title">Secrets</h1>
  </div>
  </div>
- <SecretsList namespace={namespace} filters={filters}></SecretsList>
+ <SecretsList namespace={namespace} filters={filters} />
  </div>
  </div>
  );

diff --git a/frontend/public/components/utils/details-page.jsx b/frontend/public/components/utils/details-page.jsx
@@ -16,7 +16,7 @@ detailsPage.factory = {
  href: 'pods',
  name: 'Pods',
  component: ({metadata: {namespace}, spec: {selector}, selectorRequired = true}) => <div>
- <PodsPage className="" canCreate={false} namespace={namespace} selector={selector} selectorRequired={selectorRequired}></PodsPage>
+ <PodsPage className="" canCreate={false} namespace={namespace} selector={selector} selectorRequired={selectorRequired} />
  </div>
  }),
  'yaml': () => ({

diff --git a/frontend/public/components/utils/nav-title.jsx b/frontend/public/components/utils/nav-title.jsx
@@ -18,7 +18,7 @@ const Yaml = (props) => <span className="pull-right co-m-page-title__obj">
 export const NavTitle = (props) => <div className={classNames('row', {'co-m-nav-title__detail': props.detail}, {'co-m-nav-title': !props.detail})}>
  <div className="col-xs-12">
  <h1 className={classNames('co-m-page-title', {'co-m-page-title--detail': props.detail})}>
- {props.kind && <ResourceIcon kind={props.kind} className="co-m-page-title__icon"></ResourceIcon>}
+ {props.kind && <ResourceIcon kind={props.kind} className="co-m-page-title__icon" />}
  <span>{props.title}</span>
  {props.loaded && Yaml(props.yamlData || props.data)}
  </h1>

diff --git a/frontend/public/components/workloads.jsx b/frontend/public/components/workloads.jsx
@@ -15,7 +15,7 @@ const cogOfKind = (kind) => ({o}) => {
  const {factory: {Edit, Delete, ModifyLabels, ModifyCount, ModifyPodSelector}} = Cog;
  const options = [ModifyCount, ModifyPodSelector, ModifyLabels, Edit, Delete].map(f => f(kind, o));
 
- return <Cog options={options} size="small" anchor="left"></Cog>;
+ return <Cog options={options} size="small" anchor="left" />;
 };
 
 const rowOfKindstring = (name) => {
@@ -27,7 +27,7 @@ const rowOfKindstring = (name) => {
  <div className="row co-resource-list__item">
  <div className="col-lg-3 col-md-3 col-sm-3 col-xs-6">
  <CogOfKind o={o} />
- <ResourceIcon kind={kind.id}></ResourceIcon>
+ <ResourceIcon kind={kind.id} />
  <a href={`ns/${o.metadata.namespace}/${kind.plural}/${o.metadata.name}/details`} title={o.metadata.uid}>{o.metadata.name}</a>
  </div>
  <div className="col-lg-3 col-md-3 col-sm-5 col-xs-6">