Hide delete local units button temporarily

Author: frozenhelium

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitDeleteButton/index.tsx

@@ -11,6 +11,8 @@ import { useLazyRequest } from '#utils/restRequest';
 
 import i18n from './i18n.json';
 
+const hideDelete = true;
+
 interface Props {
     countryId: number;
     localUnitId: number;
@@ -74,6 +76,10 @@ function LocalUnitDeleteButton(props: Props) {
         },
     });
 
+    if (hideDelete) {
+        return null;
+    }
+
     return (
         <ConfirmButton
             variant={variant}

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/i18n.json

@@ -1,6 +1,7 @@
 {
     "namespace": "localUnitsForm",
     "strings": {
+        "lastUpdateLabel": "Last update: {modifiedAt} by {modifiedBy}",
         "successMessage": "Local unit added successfully!",
         "failedMessage": "Failed to add local unit",
         "updateMessage": "Local unit updated successfully!",

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/index.tsx

@@ -9,18 +9,19 @@ import {
     Button,
     Container,
     DateInput,
+    DateOutput,
     MultiSelectInput,
     NumberInput,
     PageContainer,
     Portal,
     SelectInput,
     TextArea,
     TextInput,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
     numericIdSelector,
+    resolveToComponent,
     stringNameSelector,
     stringValueSelector,
 } from '@ifrc-go/ui/utils';
@@ -44,6 +45,7 @@ import useGlobalEnums from '#hooks/domain/useGlobalEnums';
 import useAlert from '#hooks/useAlert';
 import { getFirstTruthyString } from '#utils/common';
 import { VISIBILITY_PUBLIC } from '#utils/constants';
+import { getUserName } from '#utils/domain/user';
 import { CountryOutletContext } from '#utils/outletContext';
 import {
     type GoApiResponse,
@@ -312,10 +314,7 @@ function LocalUnitsForm(props: Props) {
     );
 
     return (
-        <PageContainer
-            className={styles.localUnitsForm}
-            contentClassName={styles.formContent}
-        >
+        <div className={styles.localUnitsForm}>
             {!readOnly
                 && isDefined(actionsContainerRef)
                 && isDefined(actionsContainerRef.current)
@@ -326,12 +325,21 @@ function LocalUnitsForm(props: Props) {
                 )}
             {isDefined(headingDescriptionRef) && isDefined(headingDescriptionRef.current) && (
                 <Portal container={headingDescriptionRef.current}>
-                    <TextOutput
-                        // FIXME: use strings
-                        label="Last updated on"
-                        // FIXME: use actual value
-                        value="2020-10-12"
-                    />
+                    <div className={styles.lastUpdateLabel}>
+                        {resolveToComponent(
+                            strings.lastUpdateLabel,
+                            {
+                                modifiedAt: (
+                                    <DateOutput
+                                        value={localUnitDetailsResponse?.modified_at}
+                                    />
+                                ),
+                                modifiedBy: getUserName(
+                                    localUnitDetailsResponse?.modified_by_details,
+                                ),
+                            },
+                        )}
+                    </div>
                 </Portal>
             )}
             {isDefined(headerDescriptionRef.current) && (
@@ -350,26 +358,25 @@ function LocalUnitsForm(props: Props) {
                             error={error?.type}
                             nonClearable
                         />
-                        <SelectInput
-                            label={strings.visibility}
-                            name="visibility"
-                            required
-                            nonClearable
-                            options={visibilityOptions}
-                            value={value.visibility}
-                            onChange={setFieldValue}
-                            keySelector={VisibilityOptions}
-                            labelSelector={stringValueSelector}
-                            readOnly={readOnly}
-                            error={error?.type}
-                        />
-                        {isDefined(countryId)
-                            && isDefined(localUnitId)
-                            && isDefined(onSuccess)
-                            && isDefined(isValidated)
-                            && (
-                                <>
-                                    <div />
+                        <FormGrid>
+                            <SelectInput
+                                label={strings.visibility}
+                                name="visibility"
+                                required
+                                nonClearable
+                                options={visibilityOptions}
+                                value={value.visibility}
+                                onChange={setFieldValue}
+                                keySelector={VisibilityOptions}
+                                labelSelector={stringValueSelector}
+                                readOnly={readOnly}
+                                error={error?.type}
+                            />
+                            {isDefined(countryId)
+                                && isDefined(localUnitId)
+                                && isDefined(onSuccess)
+                                && isDefined(isValidated)
+                                && (
                                     <div className={styles.actions}>
                                         <LocalUnitDeleteButton
                                             countryId={Number(countryId)}
@@ -394,8 +401,8 @@ function LocalUnitsForm(props: Props) {
                                             readOnly={!pristine}
                                         />
                                     </div>
-                                </>
-                            )}
+                                )}
+                        </FormGrid>
                     </FormGrid>
                 </Portal>
             )}
@@ -1038,7 +1045,7 @@ function LocalUnitsForm(props: Props) {
                     </>
                 )}
             </Container>
-        </PageContainer>
+        </div>
     );
 }
 

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/styles.module.css

@@ -10,11 +10,21 @@
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: var(--go-ui-spacing-lg);
+
+    @media screen and (max-width: 60rem) {
+        grid-template-columns: 1fr;
+    }
 }
 
 /* NOTE: this element is portaled */
 .actions {
     display: flex;
     gap: var(--go-ui-spacing-md);
+    align-self: end;
+    flex-wrap: wrap;
     justify-content: flex-end;
 }
+
+.last-update-label {
+    color: var(--go-ui-color-text-light);
+}