diff --git a/frontend/web/components/FeatureRow.js b/frontend/web/components/FeatureRow.js index 5c609d44e63f..3004faccd197 100644 --- a/frontend/web/components/FeatureRow.js +++ b/frontend/web/components/FeatureRow.js @@ -141,20 +141,20 @@ class TheComponent extends Component { const changeRequestsEnabled = Utils.changeRequestsEnabled( environment && environment.minimum_change_request_approvals, ) - const onChange = ()=> { - if(disableControls) { - return; - } - if ( - projectFlag?.multivariate_options?.length || - Utils.changeRequestsEnabled( - environment.minimum_change_request_approvals, - ) - ) { - this.editFeature(projectFlag, environmentFlags[id]) - return - } - this.confirmToggle() + const onChange = () => { + if (disableControls) { + return + } + if ( + projectFlag?.multivariate_options?.length || + Utils.changeRequestsEnabled( + environment.minimum_change_request_approvals, + ) + ) { + this.editFeature(projectFlag, environmentFlags[id]) + return + } + this.confirmToggle() } const isCompact = getViewMode() === 'compact' if (this.props.condensed) { diff --git a/frontend/web/components/PasswordRequirements.js b/frontend/web/components/PasswordRequirements.js index 0e0454025cbf..828f352eaf96 100644 --- a/frontend/web/components/PasswordRequirements.js +++ b/frontend/web/components/PasswordRequirements.js @@ -1,39 +1,56 @@ -import React, { useEffect } from 'react'; -import PropTypes from 'prop-types'; +import React, { useEffect } from 'react' +import PropTypes from 'prop-types' import { close, checkmark } from 'ionicons/icons' import { IonIcon } from '@ionic/react' -const PasswordRequirements = ({ password, onRequirementsMet}) => { +const PasswordRequirements = ({ password, onRequirementsMet }) => { const requirements = [ { label: 'At least 8 characters', test: password.length >= 8 }, { label: 'Contains a number', test: /\d/.test(password) }, - { label: 'Contains a special character', test: /[!@#$%^&*(),.?":{}|<>[\]\\\/_+=-]/.test(password) }, + { + label: 'Contains a special character', + test: /[!@#$%^&*(),.?":{}|<>[\]\\\/_+=-]/.test(password), + }, { label: 'Contains an uppercase letter', test: /[A-Z]/.test(password) }, { label: 'Contains a lowercase letter', test: /[a-z]/.test(password) }, - ]; + ] - const allRequirementsMet = requirements.every(req => req.test); + const allRequirementsMet = requirements.every((req) => req.test) useEffect(() => { - onRequirementsMet(allRequirementsMet); - }, [allRequirementsMet, onRequirementsMet]); + onRequirementsMet(allRequirementsMet) + }, [allRequirementsMet, onRequirementsMet]) return (
-
- ); -}; + ) +} PasswordRequirements.propTypes = { - password: PropTypes.string.isRequired, - onRequirementsMet: PropTypes.func.isRequired, - }; + password: PropTypes.string.isRequired, + onRequirementsMet: PropTypes.func.isRequired, +} -export default PasswordRequirements; +export default PasswordRequirements diff --git a/frontend/web/components/modals/CreateFlag.js b/frontend/web/components/modals/CreateFlag.js index 0944af419e66..fad5f01ac568 100644 --- a/frontend/web/components/modals/CreateFlag.js +++ b/frontend/web/components/modals/CreateFlag.js @@ -45,7 +45,7 @@ import ExternalResourcesLinkTab from 'components/ExternalResourcesLinkTab' import { saveFeatureWithValidation } from 'components/saveFeatureWithValidation' import PlanBasedBanner from 'components/PlanBasedAccess' import FeatureHistory from 'components/FeatureHistory' -import WarningMessage from 'components/WarningMessage'; +import WarningMessage from 'components/WarningMessage' const CreateFlag = class extends Component { static displayName = 'CreateFlag' @@ -400,17 +400,20 @@ const CreateFlag = class extends Component { }, }) } -parseError = (error)=>{ + parseError = (error) => { const { projectFlag } = this.props - let featureError = error?.message || error?.name?.[0] || error - let featureWarning = '' - //Treat multivariate no changes as warnings - if(featureError?.includes?.("no changes") && projectFlag?.multivariate_options?.length) { - featureWarning = `Your feature contains no changes to its value, enabled state or environment weights. If you have adjusted any variation values this will have been saved for all environments.` - featureError = '' + let featureError = error?.message || error?.name?.[0] || error + let featureWarning = '' + //Treat multivariate no changes as warnings + if ( + featureError?.includes?.('no changes') && + projectFlag?.multivariate_options?.length + ) { + featureWarning = `Your feature contains no changes to its value, enabled state or environment weights. If you have adjusted any variation values this will have been saved for all environments.` + featureError = '' + } + return { featureError, featureWarning } } - return {featureError, featureWarning} -} drawChart = (data) => { return data?.length ? ( @@ -719,131 +722,134 @@ parseError = (error)=>{ ) const Value = (error, projectAdmin, createFeature, hideValue) => { - const {featureError, featureWarning}= this.parseError(error) + const { featureError, featureWarning } = this.parseError(error) return ( - <> - {!!isEdit && ( - - )} - {!isEdit && ( - - (this.input = e)} - data-test='featureID' - inputProps={{ - className: 'full-width', - maxLength: FEATURE_ID_MAXLENGTH, - name: 'featureID', - readOnly: isEdit, - }} - value={name} - onChange={(e) => { - const newName = Utils.safeParseEventValue(e).replace(/ /g, '_') - this.setState({ - name: caseSensitive ? newName.toLowerCase() : newName, - }) - }} - isValid={!!name && regexValid} - type='text' + <> + {!!isEdit && ( + + )} + {!isEdit && ( + + (this.input = e)} + data-test='featureID' + inputProps={{ + className: 'full-width', + maxLength: FEATURE_ID_MAXLENGTH, + name: 'featureID', + readOnly: isEdit, + }} + value={name} + onChange={(e) => { + const newName = Utils.safeParseEventValue(e).replace( + / /g, + '_', + ) + this.setState({ + name: caseSensitive ? newName.toLowerCase() : newName, + }) + }} + isValid={!!name && regexValid} + type='text' + title={ + <> + - - - {isEdit ? 'ID / Name' : 'ID / Name*'} - - - - } - > - The ID that will be used by SDKs to retrieve the feature - value and enabled state. This cannot be edited once the - feature has been created. - - {!!regex && !isEdit && ( -
- {' '} - - {' '} - This must conform to the regular expression{' '} - 
{regex}
- -
- )} - - } - placeholder='E.g. header_size' - /> - - )} - - - {identity && description && ( - - - this.setState({ description: Utils.safeParseEventValue(e) }) + + + {isEdit ? 'ID / Name' : 'ID / Name*'} + + + } - type='text' - title={identity ? 'Description' : 'Description (optional)'} - placeholder='No description' - /> - - )} - {!hideValue && ( -
- { - this.setState({ identityVariations, valueChanged: true }) - }} - environmentFlag={this.props.environmentFlag} - projectFlag={projectFlag} - onValueChange={(e) => { - const initial_value = Utils.getTypedValue( - Utils.safeParseEventValue(e), - ) - this.setState({ initial_value, valueChanged: true }) - }} - onCheckedChange={(default_enabled) => - this.setState({ default_enabled }) - } - /> -
- )} - {!isEdit && - !identity && - Settings(projectAdmin, createFeature, featureContentType)} - + > + The ID that will be used by SDKs to retrieve the feature + value and enabled state. This cannot be edited once the + feature has been created. + + {!!regex && !isEdit && ( +
+ {' '} + + {' '} + This must conform to the regular expression{' '} + 
{regex}
+ +
+ )} + + } + placeholder='E.g. header_size' + /> + + )} + + + {identity && description && ( + + + this.setState({ description: Utils.safeParseEventValue(e) }) + } + type='text' + title={identity ? 'Description' : 'Description (optional)'} + placeholder='No description' + /> + + )} + {!hideValue && ( +
+ { + this.setState({ identityVariations, valueChanged: true }) + }} + environmentFlag={this.props.environmentFlag} + projectFlag={projectFlag} + onValueChange={(e) => { + const initial_value = Utils.getTypedValue( + Utils.safeParseEventValue(e), + ) + this.setState({ initial_value, valueChanged: true }) + }} + onCheckedChange={(default_enabled) => + this.setState({ default_enabled }) + } + /> +
+ )} + {!isEdit && + !identity && + Settings(projectAdmin, createFeature, featureContentType)} + ) } return ( @@ -1036,9 +1042,7 @@ parseError = (error)=>{ project.total_features, project.max_features_allowed, ) - const {featureError, featureWarning}= this.parseError(error) - - + const { featureError, featureWarning } = this.parseError(error) return ( { return ( <> - - {this.props.isDisableAccountText && ( -
-
-

- {this.props.isDisableAccountText}{' '} - - support@flagsmith.com - -

-
-
- -
-
- )} - -
-
- Pay Yearly (Save 10%) -
- { - this.setState({ yearly: !this.state.yearly }); - }} - /> -
- Pay Monthly -
-
- - -
-
- - -

Start-Up

- - -
$
-

- {this.state.yearly ? '40' : '45'}

/mo
- - - {!viewOnly ? ( - <> - - {plan.includes('startup') ? 'Purchased' : '14 Day Free Trial'} - - - {plan.includes('startup') ? 'Purchased' : '14 Day Free Trial'} - - - ) : null} -
-
- -
- All from Free, plus -
-
    -
  • - - - - -
    - Up to - 1,000,000 Requests per month -
    -     -
    • -
  • - - - - -
    - 3 Team members -
    -     -
    • -
  • - - - - -
    Unlimited projects
    -     -
    • - -
  • - - - - -
    Email technical support
    -     -
    • +
    + + {this.props.isDisableAccountText && ( +
    +
    +

    + {this.props.isDisableAccountText}{' '} + + support@flagsmith.com + +

    +
    +
    + +
    +
    + )} +     +
    +
    + Pay Yearly (Save 10%) +
    + { + this.setState({ yearly: !this.state.yearly }) + }} + /> +
    + Pay Monthly +
    +
    + + +
    +
    + + +

    Start-Up

    +     + +
    $
    +

    + {this.state.yearly ? '40' : '45'}{' '} +

    /mo
    + +     + {!viewOnly ? ( + <> + + {plan.includes('startup') + ? 'Purchased' + : '14 Day Free Trial'} + + + {plan.includes('startup') + ? 'Purchased' + : '14 Day Free Trial'} + + + ) : null} +
    +
    +
    + All from Free,{' '} + plus +
    +
      +
    • + + + + +
      + Up to + 1,000,000 Requests per month +
      +       +
      • +
    • + + + + +
      + 3 Team members +
      +       +
      • +
    • + + + + +
      Unlimited projects
      +       +
      • -
    • - - - - -
      Scheduled flags
      -       -
      • -
    • - - - - -
      Two-factor authentication (2FA)
      -       -
      • +
    • + + + + +
      + Email technical support +
      +       +
      • -
    -
    +
  • + + + + +
    Scheduled flags
    +     +
    • +
  • + + + + +
    + Two-factor authentication (2FA) +
    +     +
    • +
- - -
-
- - Optional On Premise or Private Cloud Install - - - -

Enterprise

- - - -
- Maximum security and control -
- {!viewOnly ? ( - - ) : null} +
+ + +
+
+ + Optional{' '} + + On Premise + {' '} + or{' '} + + Private Cloud + {' '} + Install + + + +

Enterprise

+ + +
+ Maximum security and control
-
-
- All from Start-Up, plus -
-
    -
  • - - - - -
    - 5,000,000+ requests per month -
    -     -
    • -
  • - - - - -
    - 20+ Team members -
    -     -
    • - -
  • - - - - -
    - Advanced hosting options -
    -     -
    • -
  • - - - - -
    - Priority real time technical support with the engineering team over Slack or Discord -
    -     -
    • -
  • - - - - -
    - Governance features – roles, permissions, change requests, audit logs -
    -     -
    • + {!viewOnly ? ( + + ) : null} +
+
+
+ All from{' '} + Start-Up, plus +
+
    +
  • + + + + +
    + 5,000,000+ requests per month +
    +     +
    • +
  • + + + + +
    + 20+ Team members +
    +     +
    • -
  • - - - - -
    - Features for maximum security -
    -     -
    • -
  • - - - - -
    - Optional on premises installation -
    -     -
    • -
  • - - - - -
    - Onboarding & training -
    -     -
    • +
  • + + + + +
    + Advanced hosting options +
    +     +
    • +
  • + + + + +
    + Priority real time technical support with the + engineering team over Slack or Discord +
    +     +
    • +
  • + + + + +
    + Governance features – roles, permissions, change + requests, audit logs +
    +     +
    • -
-
+
  • + + + + +
    + Features for maximum security +
    +     +
    • +
  • + + + + +
    + Optional on premises installation +
    +     +
    • +
  • + + + + +
    Onboarding & training
    +     +
    • +
    - - -
    - *Need something in-between our Enterprise plan for users or API limits? -
    - Reach out to us and we'll - help you out
    + + +
    + *Need something in-between our Enterprise plan for users or + API limits? +
    + + Reach out + {' '} + to us and we'll help you out
    +
    ) }} @@ -392,15 +414,15 @@ const Payment = class extends Component { } } -Payment.propTypes = {}; +Payment.propTypes = {} export const onPaymentLoad = () => { if (!Project.chargebee?.site) { - return; + return } - const planId = API.getCookie('plan'); - let link; + const planId = API.getCookie('plan') + let link if (planId && Utils.getFlagsmithHasFeature('payments_enabled')) { - ;(function() { + ;(function () { // Create a link element with data-cb-plan-id attribute link = document.createElement('a') link.setAttribute('data-cb-type', 'checkout') diff --git a/frontend/web/components/mv/VariationValue.js b/frontend/web/components/mv/VariationValue.js index ea80c0ee60cc..68a3e88ed29b 100644 --- a/frontend/web/components/mv/VariationValue.js +++ b/frontend/web/components/mv/VariationValue.js @@ -19,7 +19,9 @@ const VariationValue = ({ noMargin component={
    {AccountStore.model.auth_type === 'EMAIL' && ( -
    - - this.setState({ - first_name: Utils.safeParseEventValue(e), - }) - } - type='text' - name='Email Address' - /> -
    - -
    +
    + + this.setState({ + first_name: Utils.safeParseEventValue(e), + }) + } + type='text' + name='Email Address' + /> +
    +
    +
    )} { this.setState({ - use_identity_overrides_in_local_eval: !!env.use_identity_overrides_in_local_eval, + use_identity_overrides_in_local_eval: + !!env.use_identity_overrides_in_local_eval, allow_client_traits: !!env.allow_client_traits, banner_colour: env.banner_colour || Constants.tagColors[0], banner_text: env.banner_text, @@ -688,18 +690,18 @@ const EnvironmentSettingsPage = class extends Component {
    { - this.setState( - { - use_identity_composite_key_for_hashing: v, - }, - this.saveEnv, - ); - }} - title={`Use consistent hashing`} - description={ -
    + checked={use_identity_composite_key_for_hashing} + onChange={(v) => { + this.setState( + { + use_identity_composite_key_for_hashing: v, + }, + this.saveEnv, + ) + }} + title={`Use consistent hashing`} + description={ +
    Enabling this setting will ensure that multivariate and percentage split evaluations made by the API are consistent @@ -718,20 +720,24 @@ const EnvironmentSettingsPage = class extends Component { } />
    - {Utils.getFlagsmithHasFeature("use_identity_overrides_in_local_eval") && ( -
    - { - this.setState( - { use_identity_overrides_in_local_eval: v }, - this.saveEnv, - ); - }} - /> -
    + {Utils.getFlagsmithHasFeature( + 'use_identity_overrides_in_local_eval', + ) && ( +
    + { + this.setState( + { + use_identity_overrides_in_local_eval: v, + }, + this.saveEnv, + ) + }} + /> +
    )}
    diff --git a/frontend/web/components/pages/HomePage.js b/frontend/web/components/pages/HomePage.js index 4199c071e72e..dcaaa42e8eda 100644 --- a/frontend/web/components/pages/HomePage.js +++ b/frontend/web/components/pages/HomePage.js @@ -15,9 +15,9 @@ import { informationCircleOutline } from 'ionicons/icons' import { IonIcon } from '@ionic/react' import classNames from 'classnames' import freeEmailDomains from 'free-email-domains' -import InfoMessage from 'components/InfoMessage'; -const freeEmail = (value)=>{ - const domain = value?.split("@")?.[1] +import InfoMessage from 'components/InfoMessage' +const freeEmail = (value) => { + const domain = value?.split('@')?.[1] return freeEmailDomains.includes(domain) } const HomePage = class extends React.Component { @@ -46,8 +46,8 @@ const HomePage = class extends React.Component { allRequirementsMet: false, } - this.handlePasswordChange = this.handlePasswordChange.bind(this); - this.handleRequirementsMet = this.handleRequirementsMet.bind(this); + this.handlePasswordChange = this.handlePasswordChange.bind(this) + this.handleRequirementsMet = this.handleRequirementsMet.bind(this) } addAlbacross() { @@ -146,11 +146,11 @@ const HomePage = class extends React.Component { } handlePasswordChange(e) { - this.setState({ password: e.target.value }); + this.setState({ password: e.target.value }) } handleRequirementsMet(allRequirementsMet) { - this.setState({ allRequirementsMet }); + this.setState({ allRequirementsMet }) } showForgotPassword = (e) => { @@ -613,10 +613,12 @@ const HomePage = class extends React.Component { name='email' id='email' /> - {freeEmail(email) &&( - - Signing up with a work email makes it easier for co-workers to join your Flagsmith organisation. - + {freeEmail(email) && ( + + Signing up with a work email makes it + easier for co-workers to join your + Flagsmith organisation. + )}