Switch from ReactJSS to styled-components in ui-webapp

2025-11-12 08:25:44 +01:00 · 2019-10-09 16:17:02 +02:00
parent 01ef497d07
commit 004b6e5340
23 changed files with 544 additions and 675 deletions
--- a/scm-ui/ui-webapp/src/admin/containers/AdminDetails.js
+++ b/scm-ui/ui-webapp/src/admin/containers/AdminDetails.js
@@ -1,83 +1,95 @@
 // @flow
 import React from "react";
-import {connect} from "react-redux";
-import injectSheet from "react-jss";
-import {translate} from "react-i18next";
-import classNames from "classnames";
-import {Image, Loading, Subtitle, Title} from "@scm-manager/ui-components";
-import {getAppVersion} from "../../modules/indexResource";
+import { connect } from "react-redux";
+import { translate } from "react-i18next";
+import styled from "styled-components";
+import { Image, Loading, Subtitle, Title } from "@scm-manager/ui-components";
+import { getAppVersion } from "../../modules/indexResource";

 type Props = {
  loading: boolean,
  error: Error,
-
  version: string,

  // context props
-  classes: any,
  t: string => string
 };

-const styles = {
-  boxShadow: {
-    boxShadow: "0 2px 3px rgba(40, 177, 232, 0.1), 0 0 0 2px rgb(40, 177, 232, 0.2)"
-  },
-  boxTitle: {
-    fontWeight: "500 !important"
-  },
-  imagePadding: {
-    padding: "0.2rem 0.4rem"
-  }
-};
+const BoxShadowBox = styled.div`
+  box-shadow: 0 2px 3px rgba(40, 177, 232, 0.1),
+    0 0 0 2px rgba(40, 177, 232, 0.2);
+`;
+
+const ImageWrapper = styled.div`
+  padding: 0.2rem 0.4rem;
+`;

 class AdminDetails extends React.Component<Props> {
  render() {
-    const {loading, classes, t} = this.props;
+    const { loading, t } = this.props;

    if (loading) {
-      return <Loading/>;
+      return <Loading />;
    }

    return (
      <>
-        <Title title={t("admin.info.currentAppVersion")}/>
-        <Subtitle subtitle={this.props.version}/>
-        <div className={classNames("box", classes.boxShadow)}>
+        <Title title={t("admin.info.currentAppVersion")} />
+        <Subtitle subtitle={this.props.version} />
+        <BoxShadowBox className="box">
          <article className="media">
-            <div className={classNames("media-left", classes.imagePadding)}>
+            <ImageWrapper className="media-left">
              <Image
                src="/images/iconCommunitySupport.png"
                alt={t("admin.info.communityIconAlt")}
              />
-            </div>
+            </ImageWrapper>
            <div className="media-content">
              <div className="content">
-                <h3 className={classes.boxTitle}>{t("admin.info.communityTitle")}</h3>
+                <h3 className="has-text-weight-medium">
+                  {t("admin.info.communityTitle")}
+                </h3>
                <p>{t("admin.info.communityInfo")}</p>
-                <a className="button is-info is-pulled-right" target="_blank"
-                   href="https://scm-manager.org/support/">{t("admin.info.communityButton")}</a>
+                <a
+                  className="button is-info is-pulled-right"
+                  target="_blank"
+                  href="https://scm-manager.org/support/"
+                >
+                  {t("admin.info.communityButton")}
+                </a>
              </div>
            </div>
          </article>
-        </div>
-        <div className={classNames("box", classes.boxShadow)}>
+        </BoxShadowBox>
+        <BoxShadowBox className="box">
          <article className="media">
-            <div className={classNames("media-left", classes.imagePadding)}>
+            <ImageWrapper className="media-left">
              <Image
                src="/images/iconEnterpriseSupport.png"
                alt={t("admin.info.enterpriseIconAlt")}
              />
-            </div>
+            </ImageWrapper>
            <div className="media-content">
              <div className="content">
-                <h3 className={classes.boxTitle}>{t("admin.info.enterpriseTitle")}</h3>
-                <p>{t("admin.info.enterpriseInfo")}<br/><strong>{t("admin.info.enterprisePartner")}</strong></p>
-                <a className="button is-info is-pulled-right is-normal" target="_blank"
-                   href={t("admin.info.enterpriseLink")}>{t("admin.info.enterpriseButton")}</a>
+                <h3 className="has-text-weight-medium">
+                  {t("admin.info.enterpriseTitle")}
+                </h3>
+                <p>
+                  {t("admin.info.enterpriseInfo")}
+                  <br />
+                  <strong>{t("admin.info.enterprisePartner")}</strong>
+                </p>
+                <a
+                  className="button is-info is-pulled-right is-normal"
+                  target="_blank"
+                  href={t("admin.info.enterpriseLink")}
+                >
+                  {t("admin.info.enterpriseButton")}
+                </a>
              </div>
            </div>
          </article>
-        </div>
+        </BoxShadowBox>
      </>
    );
  }
@@ -90,4 +102,4 @@ const mapStateToProps = (state: any) => {
  };
 };

-export default connect(mapStateToProps)(injectSheet(styles)(translate("admin")(AdminDetails)));
+export default connect(mapStateToProps)(translate("admin")(AdminDetails));
--- a/scm-ui/ui-webapp/src/admin/plugins/components/PluginBottomActions.js
+++ b/scm-ui/ui-webapp/src/admin/plugins/components/PluginBottomActions.js
@@ -1,30 +1,21 @@
 // @flow
 import * as React from "react";
-import classNames from "classnames";
-import injectSheet from "react-jss";
-
-const styles = {
-  container: {
-    border: "2px solid #e9f7fd",
-    padding: "1em 1em",
-    marginTop: "2em",
-    display: "flex",
-    justifyContent: "center"
-  }
-};
+import styled from "styled-components";

 type Props = {
-  children?: React.Node,
-
-  // context props
-  classes: any
+  children?: React.Node
 };

-class PluginBottomActions extends React.Component<Props> {
+const ActionWrapper = styled.div`
+  justify-content: center;
+  margin-top: 2em;
+  padding: 1em 1em;
+  border: 2px solid #e9f7df;
+`;
+
+export default class PluginBottomActions extends React.Component<Props> {
  render() {
-    const { children, classes } = this.props;
-    return <div className={classNames(classes.container)}>{children}</div>;
+    const { children } = this.props;
+    return <ActionWrapper className="is-flex">{children}</ActionWrapper>;
  }
 }
-
-export default injectSheet(styles)(PluginBottomActions);
--- a/scm-ui/ui-webapp/src/admin/plugins/components/PluginEntry.js
+++ b/scm-ui/ui-webapp/src/admin/plugins/components/PluginEntry.js
@@ -1,11 +1,11 @@
 //@flow
 import React from "react";
-import injectSheet from "react-jss";
 import { translate } from "react-i18next";
+import classNames from "classnames";
+import styled from "styled-components";
 import type { Plugin } from "@scm-manager/ui-types";
 import { CardColumn, Icon } from "@scm-manager/ui-components";
 import PluginAvatar from "./PluginAvatar";
-import classNames from "classnames";
 import PluginModal from "./PluginModal";

 export const PluginAction = {
@@ -19,7 +19,6 @@ type Props = {
  refresh: () => void,

  // context props
-  classes: any,
  t: string => string
 };

@@ -29,25 +28,24 @@ type State = {
  showUninstallModal: boolean
 };

-const styles = {
-  link: {
-    cursor: "pointer",
-    pointerEvents: "all",
-    marginBottom: "0 !important",
-    padding: "0.5rem",
-    border: "solid 1px #cdcdcd", // $dark-25
-    borderRadius: "4px",
-    "&:hover": {
-      borderColor: "#9a9a9a" // $dark-50
-    }
-  },
-  actionbar: {
-    display: "flex",
-    "& span + span": {
-      marginLeft: "0.5rem"
-    }
+const ActionbarWrapper = styled.div`
+  & span + span {
+    margin-left: 0.5rem;
  }
-};
+`;
+
+const IconWrapper = styled.span`
+  margin-bottom: 0 !important;
+  padding: 0.5rem;
+  border: 1px solid #cdcdcd; // $dark-25
+  border-radius: 4px;
+  cursor: pointer;
+  pointer-events: all;
+
+  &:hover {
+    border-color: #9a9a9a; // $dark-50
+  }
+`;

 class PluginEntry extends React.Component<Props, State> {
  constructor(props: Props) {
@@ -91,34 +89,46 @@ class PluginEntry extends React.Component<Props, State> {
  };

  createActionbar = () => {
-    const { classes, t } = this.props;
+    const { t } = this.props;
    return (
-      <div className={classes.actionbar}>
+      <ActionbarWrapper className="is-flex">
        {this.isInstallable() && (
-          <span
-            className={classNames(classes.link, "level-item")}
+          <IconWrapper
+            className="level-item"
            onClick={() => this.toggleModal("showInstallModal")}
          >
-            <Icon title={t("plugins.modal.install")} name="download" color="info" />
-          </span>
+            <Icon
+              title={t("plugins.modal.install")}
+              name="download"
+              color="info"
+            />
+          </IconWrapper>
        )}
        {this.isUninstallable() && (
-          <span
-            className={classNames(classes.link, "level-item")}
+          <IconWrapper
+            className="level-item"
            onClick={() => this.toggleModal("showUninstallModal")}
          >
-            <Icon title={t("plugins.modal.uninstall")} name="trash" color="info" />
-          </span>
+            <Icon
+              title={t("plugins.modal.uninstall")}
+              name="trash"
+              color="info"
+            />
+          </IconWrapper>
        )}
        {this.isUpdatable() && (
-          <span
-            className={classNames(classes.link, "level-item")}
+          <IconWrapper
+            className="level-item"
            onClick={() => this.toggleModal("showUpdateModal")}
          >
-            <Icon title={t("plugins.modal.update")} name="sync-alt" color="info" />
-          </span>
+            <Icon
+              title={t("plugins.modal.update")}
+              name="sync-alt"
+              color="info"
+            />
+          </IconWrapper>
        )}
-      </div>
+      </ActionbarWrapper>
    );
  };

@@ -157,16 +167,13 @@ class PluginEntry extends React.Component<Props, State> {
  };

  createPendingSpinner = () => {
-    const { plugin, classes } = this.props;
+    const { plugin } = this.props;
    return (
-      <span className={classes.topRight}>
-        <i
-          className={classNames(
-            "fas fa-spinner fa-lg fa-spin",
-            plugin.markedForUninstall ? "has-text-danger" : "has-text-info"
-          )}
-        />
-      </span>
+      <Icon
+        className="fa-spin fa-lg"
+        name="spinner"
+        color={plugin.markedForUninstall ? "danger" : "info"}
+      />
    );
  };

@@ -202,4 +209,4 @@ class PluginEntry extends React.Component<Props, State> {
  }
 }

-export default injectSheet(styles)(translate("admin")(PluginEntry));
+export default translate("admin")(PluginEntry);
--- a/scm-ui/ui-webapp/src/admin/plugins/components/PluginModal.js
+++ b/scm-ui/ui-webapp/src/admin/plugins/components/PluginModal.js
@@ -1,8 +1,8 @@
 //@flow
 import React from "react";
-import { compose } from "redux";
 import { translate } from "react-i18next";
-import injectSheet from "react-jss";
+import classNames from "classnames";
+import styled from "styled-components";
 import type { Plugin } from "@scm-manager/ui-types";
 import {
  apiClient,
@@ -13,7 +13,6 @@ import {
  Modal,
  Notification
 } from "@scm-manager/ui-components";
-import classNames from "classnames";
 import waitForRestart from "./waitForRestart";
 import SuccessNotification from "./SuccessNotification";
 import { PluginAction } from "./PluginEntry";
@@ -25,7 +24,6 @@ type Props = {
  onClose: () => void,

  // context props
-  classes: any,
  t: (key: string, params?: Object) => string
 };

@@ -36,21 +34,16 @@ type State = {
  error?: Error
 };

-const styles = {
-  userLabelAlignment: {
-    textAlign: "left",
-    marginRight: 0
-  },
-  userLabelMarginSmall: {
-    minWidth: "5.5em"
-  },
-  userLabelMarginLarge: {
-    minWidth: "10em"
-  },
-  userFieldFlex: {
-    flexGrow: 4
-  }
-};
+const ListParent = styled.div`
+  margin-right: 0;
+  min-width: ${props =>
+    props.pluginAction === PluginAction.INSTALL ? "5.5em" : "10em"};
+  text-align: left;
+`;
+
+const ListChild = styled.div`
+  flex-grow: 4;
+`;

 class PluginModal extends React.Component<Props, State> {
  constructor(props: Props) {
@@ -151,7 +144,7 @@ class PluginModal extends React.Component<Props, State> {
  };

  renderDependencies() {
-    const { plugin, classes, t } = this.props;
+    const { plugin, t } = this.props;

    let dependencies = null;
    if (plugin.dependencies && plugin.dependencies.length > 0) {
@@ -159,7 +152,7 @@ class PluginModal extends React.Component<Props, State> {
        <div className="media">
          <Notification type="warning">
            <strong>{t("plugins.modal.dependencyNotification")}</strong>
-            <ul className={classes.listSpacing}>
+            <ul>
              {plugin.dependencies.map((dependency, index) => {
                return <li key={index}>{dependency}</li>;
              })}
@@ -206,7 +199,7 @@ class PluginModal extends React.Component<Props, State> {

  render() {
    const { restart } = this.state;
-    const { plugin, pluginAction, onClose, classes, t } = this.props;
+    const { plugin, pluginAction, onClose, t } = this.props;

    const body = (
      <>
@@ -218,88 +211,58 @@ class PluginModal extends React.Component<Props, State> {
        <div className="media">
          <div className="media-content">
            <div className="field is-horizontal">
-              <div
-                className={classNames(
-                  classes.userLabelAlignment,
-                  pluginAction === PluginAction.INSTALL
-                    ? classes.userLabelMarginSmall
-                    : classes.userLabelMarginLarge,
-                  "field-label is-inline-flex"
-                )}
+              <ListParent
+                className={classNames("field-label", "is-inline-flex")}
+                pluginAction={pluginAction}
              >
                {t("plugins.modal.author")}:
-              </div>
-              <div
-                className={classNames(
-                  classes.userFieldFlex,
-                  "field-body is-inline-flex"
-                )}
-              >
+              </ListParent>
+              <ListChild className={classNames("field-body", "is-inline-flex")}>
                {plugin.author}
-              </div>
+              </ListChild>
            </div>
            {pluginAction === PluginAction.INSTALL && (
              <div className="field is-horizontal">
-                <div
-                  className={classNames(
-                    classes.userLabelAlignment,
-                    classes.userLabelMarginSmall,
-                    "field-label is-inline-flex"
-                  )}
+                <ListParent
+                  className={classNames("field-label", "is-inline-flex")}
+                  pluginAction={pluginAction}
                >
                  {t("plugins.modal.version")}:
-                </div>
-                <div
-                  className={classNames(
-                    classes.userFieldFlex,
-                    "field-body is-inline-flex"
-                  )}
+                </ListParent>
+                <ListChild
+                  className={classNames("field-body", "is-inline-flex")}
                >
                  {plugin.version}
-                </div>
+                </ListChild>
              </div>
            )}
            {(pluginAction === PluginAction.UPDATE ||
              pluginAction === PluginAction.UNINSTALL) && (
              <div className="field is-horizontal">
-                <div
-                  className={classNames(
-                    classes.userLabelAlignment,
-                    classes.userLabelMarginLarge,
-                    "field-label is-inline-flex"
-                  )}
+                <ListParent
+                  className={classNames("field-label", "is-inline-flex")}
                >
                  {t("plugins.modal.currentVersion")}:
-                </div>
-                <div
-                  className={classNames(
-                    classes.userFieldFlex,
-                    "field-body is-inline-flex"
-                  )}
+                </ListParent>
+                <ListChild
+                  className={classNames("field-body", "is-inline-flex")}
                >
                  {plugin.version}
-                </div>
+                </ListChild>
              </div>
            )}
            {pluginAction === PluginAction.UPDATE && (
              <div className="field is-horizontal">
-                <div
-                  className={classNames(
-                    classes.userLabelAlignment,
-                    classes.userLabelMarginLarge,
-                    "field-label is-inline-flex"
-                  )}
+                <ListParent
+                  className={classNames("field-label", "is-inline-flex")}
                >
                  {t("plugins.modal.newVersion")}:
-                </div>
-                <div
-                  className={classNames(
-                    classes.userFieldFlex,
-                    "field-body is-inline-flex"
-                  )}
+                </ListParent>
+                <ListChild
+                  className={classNames("field-body", "is-inline-flex")}
                >
                  {plugin.newVersion}
-                </div>
+                </ListChild>
              </div>
            )}
            {this.renderDependencies()}
@@ -333,7 +296,4 @@ class PluginModal extends React.Component<Props, State> {
  }
 }

-export default compose(
-  injectSheet(styles),
-  translate("admin")
-)(PluginModal);
+export default translate("admin")(PluginModal);
--- a/scm-ui/ui-webapp/src/admin/plugins/components/PluginTopActions.js
+++ b/scm-ui/ui-webapp/src/admin/plugins/components/PluginTopActions.js
@@ -1,32 +1,31 @@
 // @flow
 import * as React from "react";
 import classNames from "classnames";
-import injectSheet from "react-jss";
-
-const styles = {
-  container: {
-    display: "flex",
-    justifyContent: "flex-end",
-    alignItems: "center"
-  }
-};
+import styled from "styled-components";

 type Props = {
-  children?: React.Node,
-
-  // context props
-  classes: any
+  children?: React.Node
 };

-class PluginTopActions extends React.Component<Props> {
+const ChildWrapper = styled.div`
+  justify-content: flex-end;
+  align-items: center;
+`;
+
+export default class PluginTopActions extends React.Component<Props> {
  render() {
-    const { children, classes } = this.props;
+    const { children } = this.props;
    return (
-      <div className={classNames(classes.container, "column", "is-one-fifths", "is-mobile-action-spacing")}>
+      <ChildWrapper
+        className={classNames(
+          "column",
+          "is-flex",
+          "is-one-fifths",
+          "is-mobile-action-spacing"
+        )}
+      >
        {children}
-      </div>
+      </ChildWrapper>
    );
  }
 }
-
-export default injectSheet(styles)(PluginTopActions);
--- a/scm-ui/ui-webapp/src/admin/roles/components/AvailableVerbs.js
+++ b/scm-ui/ui-webapp/src/admin/roles/components/AvailableVerbs.js
@@ -1,7 +1,5 @@
 //@flow
 import React from "react";
-import { compose } from "redux";
-import injectSheet from "react-jss";
 import { translate } from "react-i18next";
 import type { RepositoryRole } from "@scm-manager/ui-types";

@@ -9,25 +7,18 @@ type Props = {
  role: RepositoryRole,

  // context props
-  classes: any,
  t: string => string
 };

-const styles = {
-  spacing: {
-    padding: "0 !important"
-  }
-};
-
 class AvailableVerbs extends React.Component<Props> {
  render() {
-    const { role, t, classes } = this.props;
+    const { role, t } = this.props;

    let verbs = null;
    if (role.verbs.length > 0) {
      verbs = (
        <tr>
-          <td className={classes.spacing}>
+          <td className="is-paddingless">
            <ul>
              {role.verbs.map(verb => {
                return (
@@ -43,7 +34,4 @@ class AvailableVerbs extends React.Component<Props> {
  }
 }

-export default compose(
-  injectSheet(styles),
-  translate("plugins")
-)(AvailableVerbs);
+export default translate("plugins")(AvailableVerbs);
--- a/scm-ui/ui-webapp/src/admin/roles/components/SystemRoleTag.js
+++ b/scm-ui/ui-webapp/src/admin/roles/components/SystemRoleTag.js
@@ -1,39 +1,30 @@
 //@flow
 import React from "react";
-import injectSheet from "react-jss";
 import { translate } from "react-i18next";
+import styled from "styled-components";
 import { Tag } from "@scm-manager/ui-components";

 type Props = {
  system?: boolean,

  // context props
-  classes: any,
  t: string => string
 };

-const styles = {
-  tag: {
-    marginLeft: "0.75rem",
-    verticalAlign: "inherit"
-  }
-};
+const LeftMarginTag = styled(Tag)`
+  margin-left: 0.75rem;
+  vertical-align: inherit;
+`;

 class SystemRoleTag extends React.Component<Props> {
  render() {
-    const { system, classes, t } = this.props;
+    const { system, t } = this.props;

    if (system) {
-      return (
-        <Tag
-          className={classes.tag}
-          color="dark"
-          label={t("repositoryRole.system")}
-        />
-      );
+      return <LeftMarginTag color="dark" label={t("repositoryRole.system")} />;
    }
    return null;
  }
 }

-export default injectSheet(styles)(translate("admin")(SystemRoleTag));
+export default translate("admin")(SystemRoleTag);