adds storage, user and data management pages (#7814)

* adds storage, user and data mangement pages

Author: ykethan

public/images/gen2/manage/data-manager.mp4

@@ -136,6 +136,9 @@ export const directory = {
                     },
                     {
                       path: 'src/pages/[platform]/build-a-backend/auth/manage-users/manage-devices/index.mdx'
+                    },
+                    {
+                      path: 'src/pages/[platform]/build-a-backend/auth/manage-users/with-amplify-console/index.mdx'
                     }
                   ]
                 },
@@ -311,6 +314,9 @@ export const directory = {
                 },
                 {
                   path: 'src/pages/[platform]/build-a-backend/data/override-resources/index.mdx'
+                },
+                {
+                  path: 'src/pages/[platform]/build-a-backend/data/manage-with-amplify-console/index.mdx'
                 }
               ]
             },
@@ -352,6 +358,9 @@ export const directory = {
                 },
                 {
                   path: 'src/pages/[platform]/build-a-backend/storage/data-usage/index.mdx'
+                },
+                {
+                  path: 'src/pages/[platform]/build-a-backend/storage/manage-with-amplify-console/index.mdx'
                 }
               ]
             },

public/images/gen2/manage/storage-manager.mp4

@@ -0,0 +1,81 @@
+import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
+
+export const meta = {
+  title: 'Manage users with Amplify console',
+  description:
+    'Manage applications Cognito users and groups with Amplify console',
+  platforms: [
+    'android',
+    'angular',
+    'flutter',
+    'javascript',
+    'nextjs',
+    'react',
+    'react-native',
+    'swift',
+    'vue'
+  ]
+};
+
+export function getStaticPaths() {
+  return getCustomStaticPath(meta.platforms);
+}
+
+export function getStaticProps(context) {
+  return {
+    props: {
+      platform: context.params.platform,
+      meta
+    }
+  };
+}
+
+The **User management** page in the Amplify console provides a user-friendly interface for managing your application's users. You can create and manage users and groups, edit user attributes, and suspend users. 
+
+If you have not yet created an **auth** resource, visit the [Auth setup guide](/[platform]/build-a-backend/auth/set-up-auth/).
+
+## Access User management
+
+After you've deployed your auth resource, you can access the manager on Amplify Console.
+
+1. Log in to the [Amplify console](https://console.aws.amazon.com/amplify/home) and choose your app.
+2. Select the branch you would like to access.
+3. Select **Authentication** from the left navigation bar.
+4. Then, select **User management**.
+
+<Video src="/images/gen2/manage/user-manager.mp4" description="Video - [Access user manager on Amplify console]"/>
+
+### To create a user
+
+1. On the **User management** page, select **Users** tab.
+2. Select **Create user**.
+3. In the **Create user** window, for Unique identifier enter a email address, username, or phone number. For Temporary password enter a password.
+4. Choose Create user.
+
+<Callout>
+
+A user can be confirmed by using the [pre-built UI components](/[platform]/build-a-backend/auth/connect-your-frontend/using-the-authenticator/) and [Amplify libraries](/[platform]/build-a-backend/auth/connect-your-frontend/sign-up/).
+
+</Callout>
+
+## To create a group
+
+1. On the **User management** page, choose the **Groups** tab and then choose **Create group**.
+2. In the **Create group** window, for **Title** enter a name for the group.
+3. Choose **Create group**.
+
+
+## To add a users to a group
+
+1. On the **User management** page, choose the **Groups** tab.
+2. Select the name of the group to add users to.
+3. Choose **Add users**.
+4. In the **Add users to group** window, choose how you want to search for users to add from the **Search** menu. You can choose _Email_, _Phone number_, or _Username_.
+5. Add one user or multiple users to add to the group and then choose **Add users**.
+
+## To delete a group
+
+1. On the **User management** page, choose the **Groups** tab.
+2. In the **Groups** section, select the name of the group to delete.
+3. Choose **Delete**.
+4. A confirmation window is displayed. Enter _Delete_ and choose, **Confirm deletion**.

public/images/gen2/manage/user-manager.mp4

@@ -0,0 +1,89 @@
+import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
+
+export const meta = {
+  title: 'Manage Data with Amplify console',
+  description:
+    'Manage GraphQL data with Amplify console',
+  platforms: [
+    'android',
+    'angular',
+    'flutter',
+    'javascript',
+    'nextjs',
+    'react',
+    'react-native',
+    'swift',
+    'vue'
+  ]
+};
+
+export function getStaticPaths() {
+  return getCustomStaticPath(meta.platforms);
+}
+
+export function getStaticProps(context) {
+  return {
+    props: {
+      platform: context.params.platform,
+      meta
+    }
+  };
+}
+
+The **Data manager** page in the Amplify Console offers a user-friendly interface for managing the backend GraphQL API data of an application. It enables real-time creation and updates of application data, eliminating the need to build separate admin views.
+
+If you have not yet created a **data** resource, visit the [Data setup guide](/[platform]/build-a-backend/data/set-up-data/).
+
+## Access Data manager
+
+After you've deployed your data resource, you can access the manager on Amplify console.
+
+1. Log in to the [Amplify console](https://console.aws.amazon.com/amplify/home) and choose your app.
+2. Select the branch you would like to access.
+3. Select **Data** from the left navigation bar.
+4. Then, select **Data manager**.
+
+<Video src="/images/gen2/manage/data-manager.mp4" description="Video - Access data manager on Amplify console"/>
+
+### To create a record
+
+1. On the **Data manager** page, select a table from the **Select table** dropdown. For this example, we are using a *Todo* table.
+2. Select **Create Todo**.
+3. In the **Add Todo** pane, specify your custom values for the fields in the table. For example, enter *my first todo* for the *Content* field and toggle the *Is done* field.
+4. Select **Submit**.
+
+### To update a record
+
+1. On the **Data manager** page, select a table from the **Select table** dropdown.
+2. From the list of records, select a record you want to update.
+3. In the **Edit Todo** pane, make any changes to your record, and then select **Submit**.
+
+### To delete a record(s)
+
+1. On the **Data manager** page, select a table from the **Select table** dropdown.
+2. From the list of records, select the checkbox to the left of the record(s) you want to delete.
+3. Select the **Actions** dropdown, and then select **delete item(s)** .
+
+### To Seed records
+
+1. On the **Data manager** page, select a table from the **Select table** dropdown.
+2. Select the **Actions** dropdown and then select **Auto-generate data**.
+3. In the **Auto-generate data** pane, specify how many rows of data you want to generate and constraints for the generated data.
+4. Then select **Generate data**
+
+You can generate up to 100 records at a time.
+
+<Callout warning>
+
+ Seed data cannot be generated for tables that have the following field types: AWSPhone, Enum, Custom Type, or Relationship
+
+</Callout>
+
+### To download records
+
+1. On the **Data manager** page, select a table from the **Select table** dropdown.
+2. Select the **Actions** dropdown. 
+3. Here you have two options for downloading data.
+    - Choose **Download selected items (.csv)** to download only the selected rows of data.
+    - Choose **Download all items (.csv)** to download all rows of records on the currently selected table.
+4. Once you have selected a download option, your data should immediately start downloading as a CSV file.

src/directory/directory.mjs

@@ -0,0 +1,72 @@
+import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
+
+export const meta = {
+  title: 'Manage files with Amplify console',
+  description:
+    'Manage your applications storage files with Amplify console',
+  platforms: [
+    'android',
+    'angular',
+    'flutter',
+    'javascript',
+    'nextjs',
+    'react',
+    'react-native',
+    'swift',
+    'vue'
+  ]
+};
+
+export function getStaticPaths() {
+  return getCustomStaticPath(meta.platforms);
+}
+
+export function getStaticProps(context) {
+  return {
+    props: {
+      platform: context.params.platform,
+      meta
+    }
+  };
+}
+
+The **File storage** page in the Amplify console provides a user-friendly interface for managing your application's backend file storage. It allows for efficient testing and management of your files.
+
+If you have not yet created a **storage** resource, visit the [Storage setup guide](/[platform]/build-a-backend/storage/set-up-storage/).
+
+## Access File storage
+
+After you've deployed your storage resource, you can access the manager on Amplify Console.
+
+1. Log in to the [Amplify console](https://console.aws.amazon.com/amplify/home) and choose your app.
+2. Select the branch you would like to access.
+3. Select **Storage** from the left navigation bar.
+
+<Video src="/images/gen2/manage/storage-manager.mp4" description="Video - Access storage manager on Amplify console"/>
+
+### To upload a file
+
+1. On the **Storage** page, select the **Upload** button
+2. Select the file you would like to upload and then select **Done**
+
+Alternatively, you can **Drag and drop** a file onto the Storage page.
+
+### To delete a file
+
+1. On the **Storage** page, select the file you want to delete.
+2. Select the **Actions** dropdown and then select **Delete**.
+
+### To copy a file
+
+1. On the **Storage** page, select the file you want to copy.
+2. Select the **Actions** dropdown and then select **Copy to**.
+3. Select or create the folder you want a copy of your file to be saved to.
+4. Select **Copy** to copy your file to the selected folder.
+
+### To move a file
+
+1. On the **Storage** page, select the file you want to move.
+3. Select the **Actions** dropdown and then select **Move to**.
+4. Select or create the folder you want to move your file to.
+5. Select **Move** to move your file to the selected folder.
+

src/pages/[platform]/build-a-backend/auth/manage-users/with-amplify-console/index.mdx

@@ -754,9 +754,7 @@ Future<void> uploadFile(File file) async {
 
 ## Manage files in Amplify console
 
-After successfully publishing your storage backend and connecting your project with client APIs, you can manage files and folders in [the Amplify console](https://console.aws.amazon.com/amplify). You can perform on-demand actions like upload, download, copy, and more under the Storage tab in the console.
-
-![Showing Amplify console showing Storage tab selected](/images/gen2/storage/amplify-console-storage.png)
+After successfully publishing your storage backend and connecting your project with client APIs, you can manage files and folders in [the Amplify console](https://console.aws.amazon.com/amplify). You can perform on-demand actions like upload, download, copy, and more under the Storage tab in the console. Refer to [Manage files in Amplify Console](/[platform]/build-a-backend/storage/manage-with-amplify-console/) guide for additional information.
 
 ## Conclusion