Merge remote-tracking branch 'fork/PR3-add-join-leave-ui-buttons'

Author: haydnli-shopify

frontend/src/pages/Project/Details/Settings/index.tsx

@@ -225,74 +225,55 @@ export const ProjectSettings: React.FC = () => {
 
                     <GatewaysTable gateways={gatewaysData} />
 
-                    <ProjectMembers
-                        onChange={debouncedMembersHandler}
-                        members={data.members}
-                        readonly={!isProjectManager(data)}
-                        isAdmin={isProjectAdmin(data)}
-                        project={data}
-                    />
+                    {isProjectAdmin(data) && (
+                        <Container header={<Header variant="h2">{t('projects.edit.members')}</Header>}>
+                            <ProjectMembers
+                                members={data.members}
+                                project={data}
+                                onChange={debouncedMembersHandler}
+                            />
+                        </Container>
+                    )}
 
                     <Container header={<Header variant="h2">{t('common.danger_zone')}</Header>}>
                         <SpaceBetween size="l">
-                            <div className={styles.dangerSectionGrid}>
-                                {isAvailableProjectManaging && (
-                                    <>
-                                        <Box variant="h5" color="text-body-secondary">
-                                            {t('projects.edit.project_visibility')}
-                                        </Box>
-
-                                        <div className={styles.dangerSectionField}>
-                                            <SelectCSD
-                                                options={[
-                                                    { label: t('common.public'), value: 'public' },
-                                                    { label: t('common.private'), value: 'private' },
-                                                ]}
-                                                selectedOption={
-                                                    data.isPublic
-                                                        ? { label: t('common.public'), value: 'public' }
-                                                        : { label: t('common.private'), value: 'private' }
-                                                }
-                                                onChange={(e) => changeVisibilityHandler(e.detail.selectedOption.value === 'public')}
-                                                disabled={!isProjectManager(data)}
-                                            />
-                                        </div>
-
-                                        <Box variant="h5" color="text-body-secondary">
-                                            {t('projects.edit.delete_this_project')}
-                                        </Box>
-
-                                        <div>
-                                            <ButtonWithConfirmation
-                                                variant="danger-normal"
-                                                disabled={isDisabledButtons}
-                                                formAction="none"
-                                                onClick={deleteProjectHandler}
-                                                confirmTitle={t('projects.edit.delete_project_confirm_title')}
-                                                confirmContent={t('projects.edit.delete_project_confirm_message')}
-                                            >
-                                                {t('common.delete')}
-                                            </ButtonWithConfirmation>
-                                        </div>
-                                    </>
-                                )}
-
-                                <Box variant="h5" color="text-body-secondary">
-                                    {t('projects.edit.owner')}
+                            <SpaceBetween size="xs">
+                                <Header variant="h3">{t('projects.edit.project_visibility')}</Header>
+                                <Box>
+                                    <p>{t('projects.edit.project_visibility_description')}</p>
+                                </Box>
+                                <div className={styles.select}>
+                                    <SelectCSD
+                                        options={[
+                                            { label: 'Public', value: 'public' },
+                                            { label: 'Private', value: 'private' },
+                                        ]}
+                                        selectedOption={{
+                                            label: data.isPublic ? 'Public' : 'Private',
+                                            value: data.isPublic ? 'public' : 'private',
+                                        }}
+                                        onChange={(e) => changeVisibilityHandler(e.detail.selectedOption.value === 'public')}
+                                        disabled={!isProjectManager(data)}
+                                    />
+                                </div>
+                            </SpaceBetween>
+                            <SpaceBetween size="xs">
+                                <Header variant="h3">{t('projects.delete.title')}</Header>
+                                <Box>
+                                    <p>{t('projects.delete.description')}</p>
                                 </Box>
-
                                 <div>
-                                    <div className={styles.dangerSectionField}>
-                                        <SelectCSD
-                                            disabled
-                                            options={[currentOwner]}
-                                            selectedOption={currentOwner}
-                                            expandToViewport={true}
-                                            filteringType="auto"
-                                        />
-                                    </div>
+                                    <ButtonWithConfirmation
+                                        variant="danger-normal"
+                                        confirmContent={t('projects.delete.confirm_button')}
+                                        disabled={isDisabledButtons}
+                                        loading={isDeleting}
+                                        onClick={deleteProjectHandler}
+                                    >
+                                        {t('projects.delete.button')}
+                                    </ButtonWithConfirmation>
                                 </div>
-                            </div>
+                            </SpaceBetween>
                         </SpaceBetween>
                     </Container>
                 </SpaceBetween>