task: remove display name from environment (#367)

frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx

@@ -18,7 +18,6 @@ const NAME_EXISTS_ERROR = 'Error: Environment';
 const CreateEnvironment = () => {
     const [type, setType] = useState('development');
     const [envName, setEnvName] = useState('');
-    const [envDisplayName, setEnvDisplayName] = useState('');
     const [nameError, setNameError] = useState('');
     const [createSuccess, setCreateSucceess] = useState(false);
     const history = useHistory();
@@ -33,12 +32,8 @@ const CreateEnvironment = () => {
 
     const handleEnvNameChange = (e: React.FormEvent<HTMLInputElement>) => {
         setEnvName(e.currentTarget.value);
-        setEnvDisplayName(e.currentTarget.value);
     };
 
-    const handleEnvDisplayName = (e: React.FormEvent<HTMLInputElement>) =>
-        setEnvDisplayName(e.currentTarget.value);
-
     const goBack = () => history.goBack();
 
     const validateEnvironmentName = async () => {
@@ -67,7 +62,6 @@ const CreateEnvironment = () => {
         if (validName) {
             const environment = {
                 name: envName,
-                displayName: envDisplayName,
                 type,
             };
 
@@ -87,7 +81,6 @@ const CreateEnvironment = () => {
                 show={
                     <CreateEnvironmentSuccess
                         name={envName}
-                        displayName={envDisplayName}
                         type={type}
                     />
                 }
@@ -132,21 +125,6 @@ const CreateEnvironment = () => {
                                     />
                                 </div>
 
-                                <div
-                                    data-loading
-                                    className={
-                                        styles.environmentDetailsContainer
-                                    }
-                                >
-                                    <p>Environment display name.</p>
-                                    <Input
-                                        label="Display name"
-                                        placeholder="Optional name to be displayed in the admin panel"
-                                        className={styles.inputField}
-                                        value={envDisplayName}
-                                        onChange={handleEnvDisplayName}
-                                    />
-                                </div>
                                 <EnvironmentTypeSelector
                                     onChange={handleTypeChange}
                                     value={type}

frontend/src/component/environments/CreateEnvironment/CreateEnvironmentSuccess/CreateEnvironmentSuccess.tsx

@@ -6,13 +6,11 @@ import CreateEnvironmentSuccessCard from './CreateEnvironmentSuccessCard/CreateE
 
 export interface ICreateEnvironmentSuccessProps {
     name: string;
-    displayName: string;
     type: string;
 }
 
 const CreateEnvironmentSuccess = ({
     name,
-    displayName,
     type,
 }: ICreateEnvironmentSuccessProps) => {
     const history = useHistory();
@@ -28,7 +26,6 @@ const CreateEnvironmentSuccess = ({
             <h2 className={styles.subheader}>Environment created</h2>
             <CreateEnvironmentSuccessCard
                 name={name}
-                displayName={displayName}
                 type={type}
             />
             <h2 className={styles.subheader}>Next steps</h2>

frontend/src/component/environments/CreateEnvironment/CreateEnvironmentSuccess/CreateEnvironmentSuccessCard/CreateEnvironmentSuccessCard.tsx

@@ -4,7 +4,6 @@ import { useStyles } from './CreateEnvironmentSuccessCard.styles';
 
 const CreateEnvironmentSuccessCard = ({
     name,
-    displayName,
     type,
 }: ICreateEnvironmentSuccessProps) => {
     const styles = useStyles();
@@ -19,10 +18,6 @@ const CreateEnvironmentSuccessCard = ({
                     <div className={styles.infoTitle}>Id</div>
                     <div>{name}</div>
                 </div>
-                <div className={styles.infoInnerContainer}>
-                    <div className={styles.infoTitle}>Displayname</div>
-                    <div>{displayName}</div>
-                </div>
                 <div className={styles.infoInnerContainer}>
                     <div className={styles.infoTitle}>Type</div>
                     <div>{type}</div>

frontend/src/component/environments/EditEnvironment/EditEnvironment.tsx

@@ -3,7 +3,6 @@ import { useEffect, useState } from 'react';
 import EnvironmentTypeSelector from '../form/EnvironmentTypeSelector/EnvironmentTypeSelector';
 import { useStyles } from './EditEnvironment.styles';
 import { IEnvironment } from '../../../interfaces/environments';
-import Input from '../../common/Input/Input';
 import useEnvironmentApi from '../../../hooks/api/actions/useEnvironmentApi/useEnvironmentApi';
 import useLoading from '../../../hooks/useLoading';
 import useEnvironments from '../../../hooks/api/getters/useEnvironments/useEnvironments';
@@ -24,28 +23,20 @@ const EditEnvironment = ({
 }: IEditEnvironmentProps) => {
     const styles = useStyles();
     const [type, setType] = useState(env.type);
-    const [envDisplayName, setEnvDisplayName] = useState(env.displayName);
     const { updateEnvironment, loading } = useEnvironmentApi();
     const { refetch } = useEnvironments();
     const ref = useLoading(loading);
 
     useEffect(() => {
         setType(env.type);
-        setEnvDisplayName(env.displayName);
+    }, [env.type]);
-    }, [env.type, env.displayName]);
 
     const handleTypeChange = (event: React.FormEvent<HTMLInputElement>) => {
         setType(event.currentTarget.value);
     };
 
-    const handleEnvDisplayName = (e: React.FormEvent<HTMLInputElement>) =>
-        setEnvDisplayName(e.currentTarget.value);
-
     const isDisabled = () => {
-        if (type === env.type && envDisplayName === env.displayName) {
+        return type === env.type;
-            return true;
-        }
-        return false;
     };
 
     const handleCancel = () => {
@@ -57,7 +48,6 @@ const EditEnvironment = ({
         e.preventDefault();
         const updatedEnv = {
             sortOrder: env.sortOrder,
-            displayName: envDisplayName,
             type,
         };
 
@@ -83,7 +73,6 @@ const EditEnvironment = ({
 
     const resetFields = () => {
         setType(env.type);
-        setEnvDisplayName(env.displayName);
     };
 
     return (
@@ -108,19 +97,6 @@ const EditEnvironment = ({
                         onChange={handleTypeChange}
                         value={type}
                     />
-
-                    <h3 className={styles.formHeader} data-loading>
-                        Environment display name
-                    </h3>
-
-                    <Input
-                        label="Display name"
-                        placeholder="Optional name to be displayed in the admin panel"
-                        className={styles.inputField}
-                        value={envDisplayName}
-                        onChange={handleEnvDisplayName}
-                        data-loading
-                    />
                 </form>
             </div>
         </Dialogue>

frontend/src/component/environments/EnvironmentList/EnvironmentDeleteConfirm/EnvironmentDeleteConfirm.tsx

@@ -51,7 +51,6 @@ const EnvironmentDeleteConfirm = ({
             </Alert>
             <CreateEnvironmentSuccessCard
                 name={env?.name}
-                displayName={env?.displayName}
                 type={env?.type}
             />
 

frontend/src/component/environments/EnvironmentList/EnvironmentList.tsx

@@ -24,7 +24,6 @@ const EnvironmentList = () => {
     const defaultEnv = {
         name: '',
         type: '',
-        displayName: '',
         sortOrder: 0,
         createdAt: '',
         enabled: true,

frontend/src/component/environments/EnvironmentList/EnvironmentListItem/EnvironmentListItem.tsx

@@ -147,7 +147,6 @@ const EnvironmentListItem = ({
                         />
                     </>
                 }
-                secondary={env.displayName}
             />
 
             <Tooltip title="Drag to reorder">

frontend/src/component/environments/EnvironmentList/EnvironmentToggleConfirm/EnvironmentToggleConfirm.tsx

@@ -54,7 +54,6 @@ const EnvironmentToggleConfirm = ({
 
             <CreateEnvironmentSuccessCard
                 name={env?.name}
-                displayName={env?.displayName}
                 type={env?.type}
             />
         </Dialogue>

frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx

@@ -36,8 +36,7 @@ const FeatureToggleListNew = ({
 
         return [
             {
-                name: ':global:',
+                name: 'default',
-                displayName: 'Across all environments',
                 enabled: false,
             },
         ];

frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesEnvironments.tsx

@@ -100,11 +100,6 @@ const FeatureStrategiesEnvironments = () => {
                 equal = false;
                 return;
             }
-            // If displayName is different
-            if (env.displayName !== cachedEnv.displayName) {
-                equal = false;
-                return;
-            }
             // If the type of environments are different
             if (env.type !== cachedEnv.type) {
                 equal = false;

frontend/src/interfaces/environments.ts

@@ -2,7 +2,6 @@ export interface IEnvironment {
     name: string;
     type: string;
     createdAt: string;
-    displayName: string;
     sortOrder: number;
     enabled: boolean;
     protected: boolean;
@@ -10,13 +9,11 @@ export interface IEnvironment {
 
 export interface IEnvironmentPayload {
     name: string;
-    displayName: string;
     type: string;
 }
 
 export interface IEnvironmentEditPayload {
     sortOrder: number;
-    displayName: string;
     type: string;
 }