fixes profile page route, moves source files out of packs folder, restructure React app architecture [fixes SCI-1622]

app/javascript/packs/app/dom_routes.js

@@ -1,3 +0,0 @@
-// Settings page
-export const SETTINGS_TEAMS_ROUTE = "/settings/teams";
-export const SETTINGS_TEAM_ROUTE = "/settings/teams/:id";

app/javascript/packs/index.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "../src/";
+
+document.addEventListener("DOMContentLoaded", () => {
+  ReactDOM.render(<App />, document.getElementById("root"));
+});

app/javascript/packs/shared/navigation/components/NotificationImage.jsx

@@ -1,13 +0,0 @@
-import React from 'react';
-
-const NotificationImage = ({type_of}) => {
-  return(
-    <div className="text-center">
-      <span className="assignment">
-        <i className="fa fa-newspaper-o" />
-      </span>
-    </div>
-  )
-}
-
-export default NotificationImage;

app/javascript/packs/src/settings/app.jsx

@@ -1,42 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import { BrowserRouter } from "react-router-dom";
-import { Provider } from "react-redux";
-import { IntlProvider, addLocaleData } from "react-intl";
-import enLocaleData from "react-intl/locale-data/en";
-
-import Spinner from "../../shared/Spinner";
-import { flattenMessages } from "../../locales/utils";
-import store from "../../app/store";
-import messages from "../../locales/messages";
-
-import MainNav from "./components/MainNav";
-import ModalsContainer from "../../shared/modals_container";
-
-addLocaleData([...enLocaleData]);
-const locale = "en-US";
-
-const SettingsPage = () =>
-  <div>
-    <MainNav />
-    <ModalsContainer />
-    <Spinner />
-  </div>;
-
-document.addEventListener("DOMContentLoaded", () => {
-  ReactDOM.render(
-    <Provider store={store}>
-      <IntlProvider
-        locale={locale}
-        messages={flattenMessages(messages[locale])}
-      >
-        <div>
-          <BrowserRouter>
-            <SettingsPage />
-          </BrowserRouter>
-        </div>
-      </IntlProvider>
-    </Provider>,
-    document.getElementById("root")
-  );
-});

app/javascript/packs/src/settings/components/account/SettingsAccount.jsx

@@ -1,46 +0,0 @@
-import React, { Component } from "react";
-import { Route, Switch } from "react-router-dom";
-import styled from "styled-components";
-
-import SettingsLeftTab from "./SettingsLeftTab";
-import SettingsProfile from "./profile/SettingsProfile";
-import SettingsPreferences from "./preferences/SettingsPreferences";
-
-import { BORDER_LIGHT_COLOR } from "../../../../app/constants/colors";
-import {
-  SETTINGS_ACCOUNT_PREFERENCES_PATH,
-  SETTINGS_ACCOUNT_PROFILE_PATH
-} from "../../../../app/routes";
-
-const Wrapper = styled.div`
-  background: white;
-  box-sizing: border-box;
-  border: 1px solid ${BORDER_LIGHT_COLOR};
-  border-top: none;
-  margin: 0;
-  padding: 16px 0 50px 0;
-`;
-
-class SettingsAccount extends Component {
-  render() {
-    return (
-      <Wrapper className="row">
-        <div className="col-xs-12 col-sm-3">
-          <SettingsLeftTab />
-        </div>
-        <Switch>
-          <Route
-            path={SETTINGS_ACCOUNT_PROFILE_PATH}
-            component={SettingsProfile}
-          />
-          <Route
-            path={SETTINGS_ACCOUNT_PREFERENCES_PATH}
-            component={SettingsPreferences}
-          />
-        </Switch>
-      </Wrapper>
-    );
-  }
-}
-
-export default SettingsAccount;

app/javascript/packs/styles.scss

@@ -0,0 +1 @@
+@import "../src/styles/main";

app/javascript/src/components/ModalsContainer/modals/LeaveTeamModal.jsx

@@ -3,9 +3,9 @@ import PropTypes, { bool, number, string, func } from "prop-types";
 import { Modal, Button, Alert, Glyphicon } from "react-bootstrap";
 import { FormattedMessage, FormattedHTMLMessage } from "react-intl";
 import { connect } from "react-redux";
-import axios from "../../../app/axios";
+import axios from "../../../config/axios";
 
-import { LEAVE_TEAM_PATH } from "../../../app/routes";
+import { LEAVE_TEAM_PATH } from "../../../config/api_endpoints";
 import { addTeamsData, setCurrentTeam, leaveTeamModalShow } from "../../actions/TeamsActions";
 
 class LeaveTeamModal extends Component {

app/javascript/src/components/Navigation/components/ActivityDateElement.jsx

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import Moment from "react-moment";
 import styled from "styled-components";
 
-import { WHITE_COLOR } from "../../../app/constants/colors"
+import { WHITE_COLOR } from "../../../config/constants/colors"
 
 const StyledLi = styled.li`
   margin-bottom: 1em;

app/javascript/src/components/Navigation/components/ActivityElement.jsx

@@ -7,7 +7,7 @@ import {
   WHITE_COLOR,
   COLOR_CONCRETE,
   BORDER_GRAY_COLOR
-} from "../../../app/constants/colors";
+} from "../../../config/constants/colors";
 
 const StyledLi = styled.li`
   border-radius: .25em;

app/javascript/src/components/Navigation/components/GlobalActivitiesModal.jsx

@@ -14,7 +14,7 @@ import {
   COLOR_CONCRETE,
   COLOR_MINE_SHAFT,
   COLOR_GRAY_LIGHT_YADCF
-} from "../../../app/constants/colors";
+} from "../../../config/constants/colors";
 
 const StyledBottom = styled(Button)`
   display: inline-block;

app/javascript/src/components/Navigation/components/InfoDropdown.jsx

@@ -7,7 +7,7 @@ import {
   RELEASE_NOTES_LINK,
   PREMIUM_LINK,
   CONTACT_US_LINK
-} from "../../../app/routes";
+} from "../../../config/routes";
 
 const InfoDropdown = () =>
   <NavDropdown

app/javascript/src/components/Navigation/components/NotificationImage.jsx

@@ -0,0 +1,8 @@
+import React from "react";
+
+export default ({ type_of }) =>
+  <div className="text-center">
+    <span className="assignment">
+      <i className="fa fa-newspaper-o" />
+    </span>
+  </div>;

app/javascript/src/components/Navigation/components/NotificationsDropdown.jsx

@@ -4,12 +4,12 @@ import { FormattedMessage } from "react-intl";
 import axios from "axios";
 import styled from "styled-components";
 
-import { RECENT_NOTIFICATIONS_PATH } from "../../../app/routes";
+import { RECENT_NOTIFICATIONS_PATH } from "../../../config/routes";
 import {
   MAIN_COLOR_BLUE,
   WILD_SAND_COLOR,
   MYSTIC_COLOR
-} from "../../../app/constants/colors";
+} from "../../../config/constants/colors";
 
 import NotificationItem from "./NotificationItem";
 import Spinner from "../../Spinner";

app/javascript/src/components/Navigation/components/SearchDropdown.jsx

@@ -8,8 +8,8 @@ import {
 } from "react-bootstrap";
 import styled from "styled-components";
 import { FormattedMessage } from "react-intl";
-import { SEARCH_PATH } from "../../../app/routes";
+import { SEARCH_PATH } from "../../../config/routes";
-import { ENTER_KEY_CODE } from "../../../app/constants/numeric";
+import { ENTER_KEY_CODE } from "../../../config/constants/numeric";
 
 const StyledFormGroup = styled(FormGroup)`
   margin-bottom: 0px;

app/javascript/src/components/Navigation/components/TeamSwitch.jsx

@@ -6,7 +6,7 @@ import { NavDropdown, MenuItem, Glyphicon } from "react-bootstrap";
 import styled from "styled-components";
 import _ from "lodash";
 
-import { BORDER_GRAY_COLOR } from "../../../app/constants/colors";
+import { BORDER_GRAY_COLOR } from "../../../config/constants/colors";
 import { changeTeam } from "../../actions/TeamsActions";
 import { getTeamsList } from "../../actions/TeamsActions";
 

app/javascript/src/components/Navigation/index.jsx

@@ -8,7 +8,7 @@ import {
   MAIN_COLOR_BLUE,
   WHITE_COLOR,
   BORDER_GRAY_COLOR
-} from "../../app/constants/colors";
+} from "../../config/constants/colors";
 import { getActivities, destroyActivities } from "../actions/ActivitiesActions";
 import TeamSwitch from "./components/TeamSwitch";
 import GlobalActivitiesModal from "./components/GlobalActivitiesModal";
@@ -43,7 +43,6 @@ class Navigation extends Component {
     super(props);
     this.state = {
       showActivitesModal: false,
-      page: "",
       current_team: { id: 0 }
     };
     this.selectItemCallback = this.selectItemCallback.bind(this);

app/javascript/src/components/actions/ActivitiesActions.js

@@ -1,11 +1,11 @@
-import axios from "../../app/axios";
+import axios from "../../config/axios";
-import { ACTIVITIES_PATH } from "../../app/routes";
+import { ACTIVITIES_PATH } from "../../config/api_endpoints";
 import {
   GLOBAL_ACTIVITIES_DATA,
   DESTROY_GLOBAL_ACTIVITIES_DATA,
   SPINNER_ON,
   SPINNER_OFF
-} from "../../app/action_types";
+} from "../../config/action_types";
 
 function addActivitiesData(data) {
   return {

app/javascript/src/components/actions/TeamsActions.js

@@ -1,11 +1,11 @@
-import axios from "../../app/axios";
+import axios from "../../config/axios";
 import _ from "lodash";
-import { TEAMS_PATH, CHANGE_TEAM_PATH } from "../../app/routes";
+import { TEAMS_PATH, CHANGE_TEAM_PATH } from "../../config/api_endpoints";
 import {
   GET_LIST_OF_TEAMS,
   SET_CURRENT_TEAM,
   SHOW_LEAVE_TEAM_MODAL
-} from "../../app/action_types";
+} from "../../config/action_types";
 
 export function leaveTeamModalShow(show = false, team = {}) {
   return {

app/javascript/src/components/actions/UsersActions.js

@@ -1,4 +1,4 @@
-import axios from "../../app/axios";
+import axios from "../../config/axios";
 
 import {
   CHANGE_USER_FULL_NAME_PATH,
@@ -12,7 +12,7 @@ import {
   CHANGE_USER_RECENT_NOTIFICATION_PATH,
   CHANGE_USER_RECENT_NOTIFICATION_EMAIL_PATH,
   CHANGE_USER_SYSTEM_MESSAGE_NOTIFICATION_EMAIL_PATH
-} from "../../app/routes";
+} from "../../config/api_endpoints";
 
 import {
   SET_CURRENT_USER,
@@ -27,7 +27,7 @@ import {
   CHANGE_RECENT_NOTIFICATION,
   CHANGE_RECENT_NOTIFICATION_EMAIL,
   CHANGE_SYSTEM_MESSAGE_NOTIFICATION_EMAIL
-} from "../../app/action_types";
+} from "../../config/action_types";
 
 function addCurrentUser(data) {
   return {
@@ -108,7 +108,7 @@ export function changeEmail(email) {
       .then(({ data }) => {
         dispatch(saveEmail(data));
       })
-      .catch(err => console.log(err));
+      .catch(err => console.log(err));app
   };
 }
 

app/javascript/src/components/data_grid/index.jsx

@@ -5,7 +5,7 @@ import styled from "styled-components";
 import {
   WHITE_COLOR,
   COLOR_GRAY
-} from "../../app/constants/colors";
+} from "../../config/constants/colors";
 
 const StyledReactDataGrid = styled(ReactDataGrid)`
   background-color: inherit;

app/javascript/src/components/data_table/index.jsx

@@ -7,7 +7,7 @@ import {
   COLOR_GRAY,
   COLOR_ALTO,
   COLOR_ALABASTER
-} from "../../app/constants/colors";
+} from "../../config/constants/colors";
 
 const StyledBootstrapTable = styled(BootstrapTable)`
   thead {

app/javascript/src/components/reducers/ActivitiesReducers.js

@@ -3,7 +3,7 @@ import {
   DESTROY_GLOBAL_ACTIVITIES_DATA,
   SPINNER_OFF,
   SPINNER_ON
-} from "../../app/action_types";
+} from "../../config/action_types";
 
 const initialStateu = { more: true, activities: [], spinner_on: false };
 

app/javascript/src/components/reducers/TeamReducers.js

@@ -2,7 +2,7 @@ import {
   SET_CURRENT_TEAM,
   GET_LIST_OF_TEAMS,
   SHOW_LEAVE_TEAM_MODAL
-} from "../../app/action_types";
+} from "../../config/action_types";
 
 export const setCurrentTeam = (
   state = { name: "", id: 0, current_team: true },

app/javascript/src/components/reducers/UsersReducer.js

@@ -11,7 +11,7 @@ import {
   CHANGE_RECENT_NOTIFICATION,
   CHANGE_RECENT_NOTIFICATION_EMAIL,
   CHANGE_SYSTEM_MESSAGE_NOTIFICATION_EMAIL
-} from "../../app/action_types";
+} from "../../config/action_types";
 
 export function currentUser(
   state = {

app/javascript/src/config/api_endpoints.js

@@ -1,5 +1,3 @@
-export const ROOT_PATH = "/";
-
 // activities
 export const ACTIVITIES_PATH = "/client_api/activities";
 
@@ -55,6 +53,4 @@ export const UPDATE_USER_TEAM_ROLE_PATH = "/client_api/users/update_role";
 export const REMOVE_USER_FROM_TEAM_PATH = "/client_api/users/remove_user";
 
 // settings
-export const SETTINGS_ACCOUNT_PROFILE = "/settings/account/profile";
-export const SETTINGS_ACCOUNT_PREFERENCES = "/settings/account/preferences";
 export const SETTINGS_TEAMS = "/settings/teams";

app/javascript/src/config/reducers.js

@@ -3,9 +3,9 @@ import {
   setCurrentTeam,
   getListOfTeams,
   showLeaveTeamModal,
-} from "../shared/reducers/TeamReducers";
+} from "../components/reducers/TeamReducers";
-import { globalActivities } from "../shared/reducers/ActivitiesReducers";
+import { globalActivities } from "../components/reducers/ActivitiesReducers";
-import { currentUser } from "../shared/reducers/UsersReducer";
+import { currentUser } from "../components/reducers/UsersReducer";
 
 export default combineReducers({
   current_team: setCurrentTeam,

app/javascript/src/config/routes.js

@@ -0,0 +1,8 @@
+export const ROOT_PATH = "/";
+
+
+// Settings page
+export const SETTINGS_TEAMS_ROUTE = "/settings/teams";
+export const SETTINGS_TEAM_ROUTE = "/settings/teams/:id";
+export const SETTINGS_ACCOUNT_PROFILE = "/settings/account/profile";
+export const SETTINGS_ACCOUNT_PREFERENCES = "/settings/account/preferences";

app/javascript/src/index.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { BrowserRouter } from "react-router-dom";
+import { Provider } from "react-redux";
+import { IntlProvider, addLocaleData } from "react-intl";
+import enLocaleData from "react-intl/locale-data/en";
+import { flattenMessages } from "./config/locales/utils";
+import messages from "./config/locales/messages";
+import store from "./config/store";
+
+import Spinner from "./components/Spinner";
+import ModalsContainer from "./components/ModalsContainer";
+import SettingsPage from "./scenes/SettingsPage";
+import Navigation from "./components/Navigation";
+
+addLocaleData([...enLocaleData]);
+const locale = "en-US";
+
+export default () =>
+  <Provider store={store}>
+    <IntlProvider locale={locale} messages={flattenMessages(messages[locale])}>
+      <div>
+        <BrowserRouter>
+          <div>
+            <Navigation />
+            <SettingsPage />
+          </div>
+        </BrowserRouter>
+
+        <ModalsContainer />
+        <Spinner />
+      </div>
+    </IntlProvider>
+  </Provider>;

app/javascript/src/scenes/SettingsPage/index.jsx

@@ -3,29 +3,26 @@ import { Route, Switch, Redirect } from "react-router-dom";
 import { LinkContainer } from "react-router-bootstrap";
 import { Nav, NavItem } from "react-bootstrap";
 import { FormattedMessage } from "react-intl";
-import Navigation from "../../../shared/navigation";
-
-import {
-  SETTINGS_TEAMS_ROUTE,
-  SETTINGS_TEAM_ROUTE
-} from "../../../app/dom_routes";
 
 import {
   ROOT_PATH,
+  SETTINGS_TEAMS_ROUTE,
+  SETTINGS_TEAM_ROUTE,
+  SETTINGS_ACCOUNT_PROFILE
+} from "../../config/routes";
+
+import {
   SETTINGS_PATH,
-  SETTINGS_ACCOUNT_PATH,
-  SETTINGS_TEAMS_PATH,
-  SETTINGS_ACCOUNT_PROFILE,
   SETTINGS_TEAMS,
   SETTINGS_ACCOUNT_PROFILE_PATH
-} from "../../../app/routes";
+} from "../../config/api_endpoints";
 
-import NotFound from "../../../shared/404/NotFound";
+import NotFound from "../../components/404/NotFound";
-import SettingsAccount from "./account/SettingsAccount";
+import SettingsAccount from "./scenes/account/SettingsAccount";
-import SettingsTeams from "./teams/SettingsTeams";
+import SettingsTeams from "./scenes/teams";
-import SettingsTeamPageContainer from "./team/SettingsTeamPageContainer";
+import SettingsTeam from "./scenes/team";
 
-export default class MainNav extends Component {
+export default class SettingsPage extends Component {
   constructor(props) {
     super(props);
 
@@ -43,7 +40,6 @@ export default class MainNav extends Component {
   render() {
     return (
       <div>
-        <Navigation page="Settings" />
         <div className="container">
           <Nav bsStyle="tabs" activeKey="1" onSelect={this.handleSelect}>
             <LinkContainer
@@ -68,13 +64,18 @@ export default class MainNav extends Component {
             <Route
               exact
               path={SETTINGS_PATH}
-              render={() => <Redirect to={SETTINGS_ACCOUNT_PROFILE_PATH} />}
+              render={() =>
-            />
+                <Redirect
-            <Route
+                  to={SETTINGS_ACCOUNT_PROFILE_PATH}
-              path={SETTINGS_TEAM_ROUTE}
+                  component={SettingsAccount}
-              component={SettingsTeamPageContainer}
+                />}
             />
+            <Route path={SETTINGS_TEAM_ROUTE} component={SettingsTeam} />
             <Route path={SETTINGS_TEAMS_ROUTE} component={SettingsTeams} />
+            <Route
+              to={SETTINGS_ACCOUNT_PROFILE_PATH}
+              component={SettingsAccount}
+            />
             <Route component={NotFound} />
           </Switch>
         </div>

app/javascript/src/scenes/SettingsPage/scenes/account/InputEnabled.jsx

@@ -4,8 +4,8 @@ import styled from "styled-components";
 import { FormattedMessage } from "react-intl";
 import { FormGroup, FormControl, ControlLabel, Button } from "react-bootstrap";
 
-import { BORDER_LIGHT_COLOR } from "../../../../app/constants/colors";
+import { BORDER_LIGHT_COLOR } from "../../../../config/constants/colors";
-import { ENTER_KEY_CODE } from "../../../../app/constants/numeric";
+import { ENTER_KEY_CODE } from "../../../../config/constants/numeric";
 
 const StyledInputEnabled = styled.div`
   border: 1px solid ${BORDER_LIGHT_COLOR};

app/javascript/src/scenes/SettingsPage/scenes/account/SettingsAccount.jsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { Route, Switch } from "react-router-dom";
+import styled from "styled-components";
+
+import SettingsLeftTab from "./SettingsLeftTab";
+import SettingsProfile from "./profile/SettingsProfile";
+import SettingsPreferences from "./preferences/SettingsPreferences";
+
+import { BORDER_LIGHT_COLOR } from "../../../../config/constants/colors";
+import {
+  SETTINGS_ACCOUNT_PREFERENCES_PATH,
+  SETTINGS_ACCOUNT_PROFILE_PATH
+} from "../../../../config/api_endpoints";
+
+const Wrapper = styled.div`
+  background: white;
+  box-sizing: border-box;
+  border: 1px solid ${BORDER_LIGHT_COLOR};
+  border-top: none;
+  margin: 0;
+  padding: 16px 0 50px 0;
+`;
+
+export default () =>
+  <Wrapper className="row">
+    <div className="col-xs-12 col-sm-3">
+      <SettingsLeftTab />
+    </div>
+    <Switch>
+      <Route path={SETTINGS_ACCOUNT_PROFILE_PATH} component={SettingsProfile} />
+      <Route
+        path={SETTINGS_ACCOUNT_PREFERENCES_PATH}
+        component={SettingsPreferences}
+      />
+    </Switch>
+  </Wrapper>;

app/javascript/src/scenes/SettingsPage/scenes/account/SettingsLeftTab.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React from "react";
 import { Nav, NavItem } from "react-bootstrap";
 import { LinkContainer } from "react-router-bootstrap";
 import styled from "styled-components";
@@ -7,12 +7,12 @@ import { FormattedMessage } from "react-intl";
 import {
   SETTINGS_ACCOUNT_PROFILE,
   SETTINGS_ACCOUNT_PREFERENCES
-} from "../../../../app/routes";
+} from "../../../../config/routes";
 
 import {
   SIDEBAR_HOVER_GRAY_COLOR,
   LIGHT_BLUE_COLOR
-} from "../../../../app/constants/colors";
+} from "../../../../config/constants/colors";
 
 const MyLinkContainer = styled(LinkContainer)`
   a {
@@ -44,7 +44,7 @@ const MyLinkContainer = styled(LinkContainer)`
   }
 `;
 
-const SettingsLeftTab = () =>
+export default () =>
   <Nav bsStyle="pills" stacked activeKey={1}>
     <MyLinkContainer to={SETTINGS_ACCOUNT_PROFILE}>
       <NavItem>
@@ -57,5 +57,3 @@ const SettingsLeftTab = () =>
       </NavItem>
     </MyLinkContainer>
   </Nav>;
-
-export default SettingsLeftTab;

app/javascript/src/scenes/SettingsPage/scenes/account/preferences/InputTimezone.jsx

@@ -6,7 +6,7 @@ import TimezonePicker from "react-bootstrap-timezone-picker";
 import "react-bootstrap-timezone-picker/dist/react-bootstrap-timezone-picker.min.css";
 import { FormattedMessage } from "react-intl";
 
-import { BORDER_LIGHT_COLOR } from "../../../../../app/constants/colors";
+import { BORDER_LIGHT_COLOR } from "../../../../../config/constants/colors";
 
 const Wrapper = styled.div`
   border: 1px solid ${BORDER_LIGHT_COLOR};

app/javascript/src/scenes/SettingsPage/scenes/account/preferences/NotificationsGroup.jsx

@@ -4,7 +4,7 @@ import styled from "styled-components";
 import { FormattedMessage } from "react-intl";
 
 import NotificationsSwitchGroup from "./NotificationsSwitchGroup";
-import { WHITE_COLOR } from "../../../../../app/constants/colors";
+import { WHITE_COLOR } from "../../../../../config/constants/colors";
 
 const Wrapper = styled.div`margin-bottom: 6px;`;
 

app/javascript/src/scenes/SettingsPage/scenes/account/preferences/NotificationsSwitch.jsx

@@ -7,7 +7,7 @@ import {
   WHITE_COLOR,
   NOTIFICATION_YES,
   NOTIFICATION_YES_BORDER
-} from "../../../../../app/constants/colors";
+} from "../../../../../config/constants/colors";
 
 const Wrapper = styled.div`margin-top: 13px;`;
 

app/javascript/src/scenes/SettingsPage/scenes/account/preferences/NotificationsSwitchGroup.jsx

@@ -16,7 +16,7 @@ import {
   changeRecentNotification,
   changeRecentNotificationEmail,
   changeSystemMessageNotificationEmail
-} from "../../../../../shared/actions/UsersActions";
+} from "../../../../../components/actions/UsersActions";
 
 class NotificationsSwitchGroup extends Component {
   constructor(props) {

app/javascript/src/scenes/SettingsPage/scenes/account/preferences/SettingsPreferences.jsx

@@ -4,10 +4,10 @@ import PropTypes from "prop-types";
 import styled from "styled-components";
 import { FormattedMessage } from "react-intl";
 
-import axios from "../../../../../app/axios";
+import axios from "../../../../../config/axios";
 import InputDisabled from "../InputDisabled";
 import InputTimezone from "./InputTimezone";
-import { changeTimezone } from "../../../../../shared/actions/UsersActions";
+import { changeTimezone } from "../../../../../components/actions/UsersActions";
 import NotificationsGroup from "./NotificationsGroup";
 
 import {
@@ -20,7 +20,7 @@ import {
   MAIN_COLOR_BLUE,
   ICON_GREEN_COLOR,
   BORDER_LIGHT_COLOR
-} from "../../../../../app/constants/colors";
+} from "../../../../../config/constants/colors";
 
 const WrapperInputDisabled = styled.div`
   margin: 20px 0;

app/javascript/src/scenes/SettingsPage/scenes/account/profile/Avatar.jsx

@@ -6,7 +6,7 @@ import { FormattedMessage } from "react-intl";
 import {
   WHITE_COLOR,
   DARK_GRAY_COLOR
-} from "../../../../../app/constants/colors";
+} from "../../../../../config/constants/colors";
 
 const AvatarWrapper = styled.div`
   width: 100px;

app/javascript/src/scenes/SettingsPage/scenes/account/profile/MyProfile.jsx

@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import styled from "styled-components";
 import { FormattedMessage } from "react-intl";
 
-import axios from "../../../../../app/axios";
+import axios from "../../../../../config/axios";
 import Avatar from "./Avatar";
 import InputDisabled from "../InputDisabled";
 import InputEnabled from "../InputEnabled";
@@ -15,7 +15,7 @@ import {
   changeEmail,
   changePassword,
   changeAvatar
-} from "../../../../../shared/actions/UsersActions";
+} from "../../../../../components/actions/UsersActions";
 
 const AvatarLabel = styled.h4`
   margin-top: 15px;

app/javascript/src/scenes/SettingsPage/scenes/account/profile/MyStatistics.jsx

@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import styled from "styled-components";
 import { FormattedMessage } from "react-intl";
 
-import axios from "../../../../../app/axios";
+import axios from "../../../../../config/axios";
 import MyStatisticsBox from "./MyStatisticsBox";
 
 const Wrapper = styled.div`

app/javascript/src/scenes/SettingsPage/scenes/account/profile/MyStatisticsBox.jsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
 
-import { MAIN_COLOR_BLUE } from "../../../../../app/constants/colors";
+import { MAIN_COLOR_BLUE } from "../../../../../config/constants/colors";
 
 const Box = styled.div`
   width: 100px;

app/javascript/src/scenes/SettingsPage/scenes/team/components/RemoveUserModal.jsx

@@ -3,9 +3,9 @@ import { bool, number, string, func, shape } from "prop-types";
 import { Modal, Button, Alert, Glyphicon } from "react-bootstrap";
 import { FormattedMessage, FormattedHTMLMessage } from "react-intl";
 
-import axios from "../../../../../app/axios";
+import axios from "../../../../../config/axios";
 
-import { REMOVE_USER_FROM_TEAM_PATH } from "../../../../../app/routes";
+import { REMOVE_USER_FROM_TEAM_PATH } from "../../../../../config/routes";
 
 class RemoveUserModal extends Component {
   constructor(props) {

app/javascript/src/scenes/SettingsPage/scenes/team/components/TeamsMembers.jsx

@@ -8,11 +8,11 @@ import {
   MenuItem
 } from "react-bootstrap";
 import { FormattedMessage } from "react-intl";
-import axios from "../../../../../app/axios";
+import axios from "../../../../../config/axios";
 
 import RemoveUserModal from "./RemoveUserModal";
-import DataTable from "../../../../../shared/data_table";
+import DataTable from "../../../../../components/data_table";
-import { UPDATE_USER_TEAM_ROLE_PATH } from "../../../../../app/routes";
+import { UPDATE_USER_TEAM_ROLE_PATH } from "../../../../../config/api_endpoints";
 
 const initalUserToRemove = {
   userName: "",

app/javascript/src/scenes/SettingsPage/scenes/team/components/UpdateTeamDescriptionModal.jsx

@@ -11,11 +11,11 @@ import {
 import { FormattedMessage } from "react-intl";
 import _ from "lodash";
 import styled from "styled-components";
-import axios from "../../../../../app/axios";
+import axios from "../../../../../config/axios";
 
-import { TEXT_MAX_LENGTH } from "../../../../../app/constants/numeric";
+import { TEXT_MAX_LENGTH } from "../../../../../config/constants/numeric";
-import { TEAM_UPDATE_PATH } from "../../../../../app/routes";
+import { TEAM_UPDATE_PATH } from "../../../../../config/api_endpoints";
-import { COLOR_APPLE_BLOSSOM } from "../../../../../app/constants/colors";
+import { COLOR_APPLE_BLOSSOM } from "../../../../../config/constants/colors";
 
 const StyledHelpBlock = styled(HelpBlock)`
   color: ${COLOR_APPLE_BLOSSOM}

app/javascript/src/scenes/SettingsPage/scenes/team/components/UpdateTeamNameModal.jsx

@@ -11,11 +11,11 @@ import {
 import { FormattedMessage } from "react-intl";
 import _ from "lodash";
 import styled from "styled-components";
-import axios from "../../../../../app/axios";
+import axios from "../../../../../config/axios";
 
-import { NAME_MAX_LENGTH } from "../../../../../app/constants/numeric";
+import { NAME_MAX_LENGTH } from "../../../../../config/constants/numeric";
-import { TEAM_UPDATE_PATH } from "../../../../../app/routes";
+import { TEAM_UPDATE_PATH } from "../../../../../config/api_endpoints";
-import { COLOR_APPLE_BLOSSOM } from "../../../../../app/constants/colors";
+import { COLOR_APPLE_BLOSSOM } from "../../../../../config/constants/colors";
 
 const StyledHelpBlock = styled(HelpBlock)`
   color: ${COLOR_APPLE_BLOSSOM}

app/javascript/src/scenes/SettingsPage/scenes/team/index.jsx

@@ -6,10 +6,10 @@ import { Row, Col, Glyphicon, Well } from "react-bootstrap";
 import { FormattedHTMLMessage, FormattedMessage } from "react-intl";
 import moment from "moment";
 import prettysize from "prettysize";
-import axios from "../../../../app/axios";
+import axios from "../../../../config/axios";
 
-import { TEAM_DETAILS_PATH, SETTINGS_TEAMS } from "../../../../app/routes";
+import { TEAM_DETAILS_PATH, SETTINGS_TEAMS } from "../../../../config/api_endpoints";
-import { BORDER_LIGHT_COLOR } from "../../../../app/constants/colors";
+import { BORDER_LIGHT_COLOR } from "../../../../config/constants/colors";
 
 import TeamsMembers from "./components/TeamsMembers";
 import UpdateTeamDescriptionModal from "./components/UpdateTeamDescriptionModal";
@@ -60,7 +60,7 @@ const StyledH3 = styled.h3`
 
 const StyledOl = styled.ol`padding: 15px;`;
 
-class SettingsTeamPageContainer extends Component {
+class SettingsTeam extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -230,8 +230,8 @@ class SettingsTeamPageContainer extends Component {
   }
 }
 
-SettingsTeamPageContainer.PropTypes = {
+SettingsTeam.PropTypes = {
   match: ReactRouterPropTypes.match.isRequired
 };
 
-export default SettingsTeamPageContainer;
+export default SettingsTeam;

app/javascript/src/scenes/SettingsPage/scenes/teams/components/TeamsDataTable.jsx

@@ -4,9 +4,9 @@ import { connect } from "react-redux";
 import { Button } from "react-bootstrap";
 import { Link } from "react-router-dom";
 import { FormattedMessage } from "react-intl";
-import { leaveTeamModalShow } from "../../../../../shared/actions/TeamsActions";
+import { leaveTeamModalShow } from "../../../../../components/actions/TeamsActions";
-import DataTable from "../../../../../shared/data_table";
+import DataTable from "../../../../../components/data_table";
-import { SETTINGS_TEAMS_ROUTE } from "../../../../../app/dom_routes";
+import { SETTINGS_TEAMS_ROUTE } from "../../../../../config/routes";
 
 class TeamsDataTable extends Component {
   constructor(props) {

app/javascript/src/scenes/SettingsPage/scenes/teams/index.jsx

@@ -7,7 +7,7 @@ import { FormattedMessage } from "react-intl";
 import {
   BORDER_LIGHT_COLOR,
   COLOR_CONCRETE
-} from "../../../../app/constants/colors";
+} from "../../../../config/constants/colors";
 
 import TeamsPageDetails from "./components/TeamsPageDetails";
 import TeamsDataTable from "./components/TeamsDataTable";

app/views/client_api/settings/index.html.erb

@@ -1 +1 @@
-<%= javascript_pack_tag 'src/settings/app' %>
+<%= javascript_pack_tag 'index' %>

app/views/layouts/application_client_api.html.erb

@@ -7,7 +7,7 @@
     <%= csrf_meta_tags %>
     <%= stylesheet_link_tag 'bootstrap/css/bootstrap.min'  %>
     <%= stylesheet_link_tag 'font-awesome/css/font-awesome.min' %>
-    <%= stylesheet_pack_tag 'styles/main' %>
+    <%= stylesheet_pack_tag 'styles' %>
     <%= favicon_link_tag "favicon.ico" %>
     <%= favicon_link_tag "favicon-16.png", type: "image/png", size: "16x16" %>
     <%= favicon_link_tag "favicon-32.png", type: "image/png", size: "32x32" %>