Merge pull request #10006 from strapi/fix/sticky-header

Fix sticky header and select the first locale for copy

packages/strapi-admin/admin/src/containers/Admin/Wrapper.js

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 const Wrapper = styled.div`
   display: flex;
   overflow-x: hidden;
-  height: 100vh;
+
   p,
   span {
     font-family: Lato;

packages/strapi-helper-plugin/lib/src/components/ModalConfirm/styledComponents.js

@@ -16,6 +16,8 @@ const HeaderWrapper = styled.div`
   padding-top: 17px;
   padding-bottom: 22px;
   background-color: ${props => props.theme.main.colors.lightGrey};
+  border-top-left-radius: ${({ theme }) => theme.main.sizes.borderRadius};
+  border-top-right-radius: ${({ theme }) => theme.main.sizes.borderRadius};
   border: 0;
 `;
 
@@ -41,6 +43,8 @@ const Footer = styled.div`
   justify-content: space-between;
   background-color: ${props => props.theme.main.colors.strapi['gray-light']};
   padding: 15px 30px 17px 30px;
+  border-bottom-left-radius: ${({ theme }) => theme.main.sizes.borderRadius};
+  border-bottom-right-radius: ${({ theme }) => theme.main.sizes.borderRadius};
   > button {
     padding: 0 30px;
   }

packages/strapi-plugin-i18n/admin/src/components/CMEditViewCopyLocale/index.js

@@ -17,13 +17,23 @@ import {
 import { getTrad } from '../../utils';
 import { cleanData, generateOptions } from './utils';
 
-const CMEditViewCopyLocale = ({ appLocales, currentLocale, localizations, readPermissions }) => {
+const CMEditViewCopyLocale = props => {
+  if (!props.localizations.length) {
+    return null;
+  }
+
+  return <Content {...props} />;
+};
+
+const Content = ({ appLocales, currentLocale, localizations, readPermissions }) => {
+  const options = generateOptions(appLocales, currentLocale, localizations, readPermissions);
+
   const { formatMessage } = useIntl();
   const dispatch = useDispatch();
   const { allLayoutData, slug } = useContentManagerEditViewDataManager();
   const [isLoading, setIsLoading] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
-  const [value, setValue] = useState(null);
+  const [value, setValue] = useState(options[0]);
   const theme = useTheme();
 
   const handleConfirmCopyLocale = async () => {
@@ -73,12 +83,6 @@ const CMEditViewCopyLocale = ({ appLocales, currentLocale, localizations, readPe
     setIsOpen(prev => !prev);
   };
 
-  if (!localizations.length) {
-    return null;
-  }
-
-  const options = generateOptions(appLocales, currentLocale, localizations, readPermissions);
-
   const styles = selectStyles(theme);
 
   return (
@@ -127,8 +131,8 @@ const CMEditViewCopyLocale = ({ appLocales, currentLocale, localizations, readPe
               aria-labelledby="select-locale"
               components={{ DropdownIndicator }}
               isSearchable={false}
+              defaultValue={options[0]}
               onChange={handleChange}
-              options={options}
               styles={{
                 ...styles,
                 control: (base, state) => ({
@@ -157,6 +161,10 @@ const CMEditViewCopyLocale = ({ appLocales, currentLocale, localizations, readPe
 };
 
 CMEditViewCopyLocale.propTypes = {
+  localizations: PropTypes.array.isRequired,
+};
+
+Content.propTypes = {
   appLocales: PropTypes.arrayOf(
     PropTypes.shape({
       code: PropTypes.string.isRequired,

packages/strapi-plugin-i18n/admin/src/components/CMEditViewCopyLocale/utils/generateOptions.js

@@ -4,7 +4,8 @@ const generateOptions = (appLocales, currentLocale, localizations, permissions)
   return appLocales
     .filter(({ code }) => {
       return (
-        code !== currentLocale && localizations.findIndex(({ locale }) => locale === code) !== -1
+        code !== currentLocale &&
+        (localizations || []).findIndex(({ locale }) => locale === code) !== -1
       );
     })
     .filter(({ code }) => {